【Photoshop】すぐできる！光沢のある立体ボタンの作り方

こんにちは、AK3です。

WEBサイトで見かける光沢のある立体ボタン。目を引きますよね。

Photoshopのグラデーションを利用して作れます。

AK3

「3ステップ」で光沢のある立体ボタンができるんです。

1. 長方形ツールでボタンを作成
2. 光る部分を作成
3. ボタンにレイヤースタイル「グラデーション」と「枠線」を適用

さっそく作ってみましょう！

ボタンの作成

新規ファイルの作成

新規ファイルを作成します。

1. ［ファイル］から［新規］を選択 ショートカットCommand＋N
2. ［プリセットの詳細］「立体ボタン」［幅：600］［高さ：400］［解像度：72ピクセル/インチ］［カラーモード：RGBカラー：8bit］［カンバスカラー：白］
3. ［作成］をクリック

中央にガイドを引くと操作がやりやすいです。
中央にガイドを引く方法は、こちらを参考にしてください。

長方形を作成

［ツールバー］から［長方形ツール］を選択

1. ［オプションバー］の［塗り］をクリック
2. 「シアンブルー（純色）」を選択

1. カンバス上をクリック
2. 幅「400px」高さ「120px」角丸「60px」
3. ［OK］ボタンをクリック

中央からズレてる場合は、［ツールバー］から［移動ツール］を選択し、中央に配置します。

ベースになるボタンができました。

光の部分を作成

レイヤーを複製して、光る部分を作成していきます。

レイヤーを複製

［レイヤーパレット］の「長方形１」レイヤーを［新規レイヤーを作成］アイコンにドラッグして複製します。

「長方形１のコピー」レイヤーが追加されました。

1. ［ツールバー］から［長方形ツール］を選択
2. ［ツールバー］の「塗り」から［ホワイト］をクリック

［レイヤーパレット］から「長方形１のコピー」レイヤーの［不透明度］を「70％」に変更します。

［編集メニュー］から［自由変形］を選択　ショートカットCommand＋T
鎖マークはオフにしておきます。［W］「80％」［H］「30％」に設定

光る部分ができました。

［表示］メニューから［エクストラ］のチェックを外して、ガイドを非表示にします。ショートカットCommand＋H

［ツールバー］の［移動ツール］を使って上部に移動します。

グラデーションと枠線の設定

作ったボタンを立体にしていきます。

グラデーションの設定

［レイヤーパレット］の「長方形1」レイヤーを選択

1. ［レイヤースタイルを追加］アイコンをクリック
2. ［グラデーションオーバーレイ］を選択

［レイヤースタイル］で［描画モード：スクリーン］［不透明度：100％］［スタイル：線形］［逆方法］と［シェイプ内で作成］にチェック。［角度：-90°］に設定
グラデーションの横をクリックし［グラデーションエディター］を開きます。

1. ［グラデーションエディター］で［ブルー］フォルダを開き、［青_03］をクリック
2. ［OK］ボタンをクリック

ボタンの枠線の設定

［レイヤースタイル］から［境界線］にチェックをいれ［サイズ：1px］［カラー：#2477ac］にして［OK］ボタンをクリックします。
青は好みの設定でOKです。

文字を入れて完成です！お疲れさまでした。

まとめ

Photoshopで作る光沢ある立体ボタンは次の３ステップでできます。

1. 1. 1. 長方形ツールでボタンを作成
      2. 光る部分を作成
      3. ボタンにレイヤースタイル「グラデーション」と「枠線」を適用

立体ボタンに一部強い光を入れることで光沢を表現できます。
ボタンのカタチを変えて作ってみてください。

Kodama Akemi

いかがでしたか？少しでもこの情報がお役に立てたら幸いです。