【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを

少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう!というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください!


角丸のベースになんの装飾もない文字を載せたボタン。これをかっこよく加工してみましょう!

グラデーションを加える

まずは500 x 270 pxでキャンバスを新規作成します。

一つ目のレイヤーに角丸のボタンのベース、2つ目のレイヤーに文字を入力します。これで準備完了です!

ベースのレイヤーを選択し、レイヤースタイルを設定します。「グラデーションオーバーレイ」にチェックを入れ、描画モードを「スクリーン」、不透明度を50%前後、角度を90°に設定。

1pxのラインを加える

続いて「境界線」にチェックを入れ、サイズを1px、色はベースの色より少し濃い色(ここでは文字と同じ色)を設定します。

さらに「シャドウ(内側)」からハイライトの設定をします。描画モードを「通常」、色を「白」、距離とサイズを1~2pxに。いい感じにクッキリとしてきましたね。

シャドウを加える

ベースのレイヤーの下に新規レイヤーを作成し、黒い楕円を描きます。それをフィルター>ぼかし>ぼかし(ガウス)でぼかした後、不透明度を50%前後に調整します。

ノイズを加える

一番上に新規レイヤーを作成します。そのレイヤーを白く塗りつぶし、フィルター>ノイズ>ノイズを加える からノイズを加えます。

まず、コマンド(Windowsならコントロール)を押しながら、ベースレイヤーのサムネイル部分をクリック。ベースの長方形が選択されます。次に先ほど作成したノイズのレイヤーをクリック。下のマスクアイコンをクリックするとノイズが長方形に切り取られます。レイヤーのモードを「通常」から「乗算」に変更するときれいにノイズが加わっています!

レタープレス効果

文字レイヤーを選択し、レイヤースタイルを設定していきます。まずは「グラデーションオーバーレイ」にチェックを入れ、描画モードを「乗算」、不透明度を30%前後、角度を90°に。

次に「ドロップシャドウ」にチェックを入れます。描画モードを「通常」、色を「白」、距離・サイズを1~3pxに設定。

さらに「シャドウ(内側)」にチェック。サイズと距離を1~3pxで調整し、レタープレス効果の完成です!

完成!

こんな感じにかっこよく加工されました。

そしてなんとなく動画にしてみた。

このチュートリアルのために日本語版Photoshopのトライアル版を入れてみた。5年ぶりにいじる日本語版は使いにくいんだぜ…。

シェアする

コメント

“【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを” への18件のフィードバック

  1. youko より:

    いつも拝見させてもらっていますが、色々な記事が、本当に為になります。
    一言お礼が言いたくなったのでコメントさせて頂きました。
    いつもありがとうございます。

  2. DearWorldjay より:

    動画になってたので不思議に思って
    少し調べたらWinkなるアプリを発見。
    刺激になります。
    やっぱりプロはフォトショップを使うんですね。
    自分はデザインはどうもダメそうです。
    プログラムと一緒で長くやれば
    スキル上がるんだろうか?

  3. […] 少しの手間で大きく変わる、細部にこだわったWebデザインを 縲恷タ践編~ (tags: webdesign) […]

  4. 素晴らしい!!いつもは手を抜いてレイヤー効果だけでつい作ってしまっていました。
    これからも勉強させていただきます。

  5. n より:

    ありがとう・・・とても勉強になりましたし、細部まできちんと仕上げることで綺麗に見え、とても感動しました!

  6. […] 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを 参考になります。 […]

  7. 上西 より:

    実践編だぁ~。

    ありがたやぁ~。

  8. […] ■ 少しの手間で大きく変わる、細部にこだわったWebデザインを 縲恷タ践編~ | … […]

  9. MOCA より:

    さっそく、実践してみました!
    いつもありがとうございます☆

  10. Becky より:

    この処理ずーっと以前からやりたかったのですが、
    手法がみつからなかったです。
    Fireworksなら簡単なのだろうか?とかかなり調べたりもしました。
    これほどあっさりと綺麗に作成していただき、感謝してます。

  11. […] 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | W… […]

  12. aya より:

    すばらしい!!

    こうゆうプロのが使ってる技みたいなのをもっと載せてください!!(>_<)

  13. flow-t より:

    最後の「のチュートリアルのために日本語版Photoshopのトライアル版を入れてみた」に泣いた・゜・(/Д`)・゜・
    分かりやすい記事を書くとはこういうことです。
    分かりやすい1行を書くためにどれだけの時間が必要か。

  14. NoName より:

    こういう分かりやすい説明は本当に有難いです。

    ありがとうございます。
    これからもこのサイトは参考にさせて頂きます。

  15. […] ・Photoshop でつややかな表現をわりと簡単に実現する ・少しの手間で大きく変わる、細部にこだわったWebデザインを ・超簡単! 髪の毛の画像を1分で切り抜く方法 […]

  16. […] 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを記事元のサイト:Webクリエイターボックス このサイトはJavaScriptがオンになっていないと正常に表示されません【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを2011年08月04日Photoshop「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう!というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください!角丸のベースになんの装飾もない文字を載せたボタン。これをかっこよく加工してみましょう!グラデーションを加えるまずは500x270pxでキャンバスを新規作成します。一つ目のレイヤーに角丸のボタンのベース、2つ目のレイヤーに文字を入力します。これで準備完了です!ベースのレイヤーを選択し、レイヤースタイルを設定します。「グラデーションオーバーレイ」にチェックを入れ、描画モードを「スクリーン」、不透明度を50%前後、角度を90°に設定。1pxのラインを加える続いて「境界線」にチェックを入れ、サイズを1px …続きを読む […]

  17. 諭 森川 より:

    ありがとうございました。
    非常にわかりやすく勉強になりました。
    デザインのことよくわかならいプログラマーの私にとってはこういうのは非常にありがたい。

  18. […] ・Photoshop でつややかな表現をわりと簡単に実現する ・少しの手間で大きく変わる、細部にこだわったWebデザインを ・超簡単! 髪の毛の画像を1分で切り抜く方法 […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)