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

2013年3月23日
Photoshop

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

↑私が10年以上利用している会計ソフト！

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

グラデーションを加える

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

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

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

1pxのラインを加える

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

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

シャドウを加える

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

ノイズを加える

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

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

レタープレス効果

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

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

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

完成！

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

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

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