【Photoshop】webサイトでよく見かけるボタン素材の作り方

こんにちは。webデザイナーの山本です。
今回は素材感のあるwebサイトのボタンの作り方をご紹介します。
ツールはPhotoshop CS5を使用しています。

【2017/02/13追記】

新しく別のボタン素材の作り方も作成したので、こちらもよければどうぞ！

【Photoshop CC】Webサイトのボタン素材の作り方

020

ステップ1：土台を作ろう
ステップ2：縁を作ろう
ステップ3：縁を作ろう2
ステップ4：基盤を作ろう
ステップ5：輝きを吹き込もう
ステップ6：丸みを出していこう
ステップ7：反射を入れてみよう
ステップ8：キラッとさせてみよう
ステップ9：もっと立体感を出そう
ステップ10：文字を入れよう

制作方法

それでは実際に作っていきましょう。

ステップ1：土台を作ろう

001

・円形シェイプツールで円を作る。（直径230pxくらい、カラー：#000）
・新規レイヤーを作成し、ブラシツールで適当に形を作る。（今回はペンキブラシを使いましたが、何ブラシでもよいですし、もはやこの過程はなくても大丈夫です）
・上記２つを「レイヤーの結合」する

002

・さっき結合したレイヤーにレイヤースタイルを付ける。

■ドロップシャドウ
・描画モード：乗算（カラー：#000）
・不透明度：75
・角度：120（包括光源を使用にチェック付）
・距離：0
・スプレッド：49
・サイズ：13

■シャドウ（内側）
・描画モード：乗算（カラー：#000）
・不透明度：75
・角度：-45（包括光源を使用にチェックなし）
・距離：2
・チョーク：0
・サイズ：0

■光彩（外側）
・描画モード：通常
・不透明度：36
・ノイズ：0
・カラー：#00fcff
・テクニック：さらにソフトに
・スプレッド：19
・サイズ：18

■グラデーションオーバーレイ
・描画モード：乗算
・不透明度：61
・グラデーション：デフォルト（左#000、右#fffのやつ）
0002
・スタイル：線形
・角度：90

■パターンオーバーレイ
・描画モード：通常
・不透明度：47
・パターン：白い岩っぽいやつ（テクスチャの色や柄によって不透明度も変更してくださいね）

■境界線
・サイズ：2
・位置：外側
・描画モード：通常
・不透明度：100
・塗りつぶしタイプ：グラデーション（左が#00f6ff、右が#287067）
0003
・スタイル：線形
・角度：-43

ステップ2：縁を作ろう

003

・円形シェイプツールで、ステップ1で作った円より少し小さい円を作る（カラー：#ff00cc）
※今回は#ff00ccで作っていますが、作りたいボタンの色に合わせて変更してください。　

004

・作った円にレイヤースタイルを付ける。

■ドロップシャドウ
・描画モード：乗算（カラー：#000）
・不透明度：75
・角度：120（包括光源を使用にチェック付）
・距離：1
・スプレッド：0
・サイズ：7

■シャドウ（内側）
・描画モード：乗算（カラー：#000）
・不透明度：100
・角度：-51（包括光源を使用にチェックなし）
・距離：5
・チョーク：0
・サイズ：84

■境界線
・サイズ：2
・位置：外側
・描画モード：通常
・不透明度：100
・塗りつぶしタイプ：グラデーション（左#000、右#dfdfdf）
0004
・スタイル：線形
・角度：122

ステップ3：縁を作ろう2

005

・円形シェイプツールでステップ2で作った円より2pxくらい小さい円を作る。（カラー：#ff00cc）

006

・作った円にレイヤースタイルを付ける。

ステップ4：基盤を作ろう

・ステップ3で作ったシェイプレイヤーを複製する

009

・複製したレイヤーにレイヤースタイルを付ける。

■パターンオーバーレイ
・描画モード：乗算
・不透明度：29
・パターン：宇宙っぽいやつ（テクスチャの色や柄によって不透明度も変更してくださいね）

ステップ5：輝きを吹き込もう

010

・新規レイヤーをステップ4で作成したレイヤーの上に作成し、右クリックして「クリッピングマスクを作成」する
・【ステップ4】で作成したレイヤースタイルに、下の画像の設定を加える
0001
※この設定をしてあげると、親（クリッピングマスクされた側）のレイヤースタイル効果が子ども（クリッピングマスク下側、画像でいうと上のレイヤー）には反映されないので便利です。