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

thumb_ps

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


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

グラデーションを加える

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

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

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

1pxのラインを加える

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

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

シャドウを加える

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

ノイズを加える

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

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

レタープレス効果

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

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

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

完成!

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

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

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

シェアする

コメント

  • youko

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

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

  • Pingback: 妄想魂 - links for 2011-08-03()

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

  • n

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

  • Pingback: 2011年8月4日のブックマーク | Yuxu's Notebook()

  • 実践編だぁ~。

    ありがたやぁ~。

  • Pingback: 8月05日のおすすめ記事()

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

  • Becky

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

  • Pingback: 「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com()

  • aya

    すばらしい!!

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

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

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

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

  • Pingback: Hello world! | d-toools()

  • Pingback: 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | サイトデザイン全般 - デザイン・制作ヒント - ウェブデザイン | Jishuu.net()

  • 諭 森川

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

  • Pingback: フォトショップ | d-toools()

ニュースレター

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