このチュートリアルでは、プロフェッショナルなメニューボタンを作る方法を紹介します。

• Step1 ： 背景を作成
  
• Step2 ： ボタンを作成
  
• Step3 ： ボタンに光を入れる
  
• Step4 ： ボタンにテクスチャを加える
  
• Step5 ： 光沢をいれる
  
• Step6 ： ボタンを装飾する
  
• Step7 ： ボタンにノイズを入れる
  
• Step8 ： ボタンにテキストを加える
  
• Step9 ： 完成
  

Step1：背景を作成

はじめにサイズが500ピクセル×300ピクセルの新規ドキュメントを作成して、背景にグラデーションを入れます。
最適な色を選択するにあたり、ここでは「#000000」と「#1b2c3e」にしています。
[You must be registered and logged in to see this image.]




Step2：ボタンを作成

[You must be registered and logged in to see this image.]角丸長方形ツール（半径10ピクセル）を使って好みの色でボタンを描きます（この段階ではどの色を使っても問題ありません）。
[You must be registered and logged in to see this image.]
「レイヤー」－「ラスタライズ」－「シェイプ」を選択してラスタライズしたら、レイヤースタイルを次のように設定します。
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]
ボタンの周囲に選択範囲を作ったら（「選択範囲」－「選択範囲を読み込む」を選択）、選択範囲を1ピクセルに縮小します（「選択範囲」－「選択範囲を変更」－「縮小」を選択）。
その後新規レイヤーを作成して「#1b1b1d」で塗ります。
それから「Ctrl」＋「D」キーを押して選択範囲を解除します。
[You must be registered and logged in to see this image.]









Step3：ボタンに光を入れる

ボタンの内側に光を入れます。
新規レイヤーを作成したら、[You must be registered and logged in to see this image.]楕円形選択ツールで次のように選択範囲を作ります。
青い色（「#479ea5」）で塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」＋「D」キーを押して選択範囲を解除したら、「フィルタ」－「ぼかし」－「ぼかし(ガウス)」を選択して次のように設定します。
[You must be registered and logged in to see this image.]
ボタンの画像にぼかしが入りました。
[You must be registered and logged in to see this image.]
「フィルタ」－「ぼかし」－「ぼかし(移動)」を選択して次のように設定します。
[You must be registered and logged in to see this image.]
どこまで進んだかを確かめましょう。
[You must be registered and logged in to see this image.]
これから[You must be registered and logged in to see this image.]多角形選択ツールを使って、次のように選択範囲を作って白く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」＋「D」キーを押して選択範囲を解除し、「フィルタ」－「ぼかし」－「ぼかし(ガウス)」を設定します。
[You must be registered and logged in to see this image.]
違いを確かめてみてください。
[You must be registered and logged in to see this image.]
「フィルタ」－「ぼかし」－「ぼかし(移動)」を選択して、次のように設定します。
[You must be registered and logged in to see this image.]




Step4：ボタンにテクスチャを加える

それから[You must be registered and logged in to see this image.]長方形選択ツールで選択範囲を作ります。
[You must be registered and logged in to see this image.]
「Ctrl」＋「Shift」＋「I」キーを押して選択範囲を反転し、「Delete」キーを押して選択範囲を削除します。
「Ctrl」＋「D」キーを押して選択範囲を解除します。
[You must be registered and logged in to see this image.]
ボタンにテクスチャを加えます。
3ピクセル×3ピクセルの新規ドキュメントを作成したら、[You must be registered and logged in to see this image.]鉛筆ツールで黒い格子を描きます。
[You must be registered and logged in to see this image.]
「編集」－「パターンを定義」で、画像をパターンとして保存します。
それからこのドキュメントを保存せずに閉じて、作業中のドキュメントに戻ります。
[You must be registered and logged in to see this image.]長方形選択ツールで選択範囲を作って白く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」＋「D」キーを押して選択範囲を解除し、次のようにブレンドオプションを設定します。
[You must be registered and logged in to see this image.]
塗りの不透明度を7％にすると次のようになります。
[You must be registered and logged in to see this image.]




Step5：光沢をいれる

新規レイヤーを作成し、[You must be registered and logged in to see this image.]多角形選択ツールで次のように選択範囲を作って白く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」＋「D」キーを押して選択範囲を解除し、「フィルタ」－「ぼかし」－「ぼかし(移動)」を選択して次のように設定します。
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]




Step6：ボタンを装飾する

新規レイヤーを作成したら、「#e2dedf」の[You must be registered and logged in to see this image.]鉛筆ツールで次のようにドットを描きます。
[You must be registered and logged in to see this image.]
「Ctrl」＋「J」キーを押してレイヤーを複製し、複製したレイヤーに「フィルタ」－「ぼかし」－「ぼかし(移動)」で次のように設定します。
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]
新規レイヤーを作成し、「#479ea5」の[You must be registered and logged in to see this image.]鉛筆ツールで3本の線を引きます。
[You must be registered and logged in to see this image.]
レイヤーを何枚か複製したら[You must be registered and logged in to see this image.]長方形選択ツールで選択範囲を作り、3本の線と同じ色で塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」＋「D」キーを押して選択範囲を解除し、不透明度を30％に設定してレイヤーを結合します。
それから、「フィルタ」－「ぼかし」－「ぼかし(移動)」で次のように設定します。
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]




Step7：ボタンにノイズを入れる

ボタンを選択したら（レイヤーパレットのサムネイルを「Ctrl」キー＋左クリックする）、新規レイヤーを作成して黒く塗ります。
[You must be registered and logged in to see this image.]
「Ctrl」＋「D」キーを押して選択範囲を解除し、「フィルタ」－「ノイズ」－「ノイズを加える」を選択します。
[You must be registered and logged in to see this image.]
レイヤーモードを変えてみます。
ここではスクリーンを使って不透明度を60％にします。
[You must be registered and logged in to see this image.]




Step8：ボタンにテキストを加える

ボタンにテキストを加えます。
横書き文字ツールを使って、「#70ffff」の色でテキストを入力します。
[You must be registered and logged in to see this image.]




Step9：完成

他のボタンを同様に作って並べてみました。
[You must be registered and logged in to see this image.]





引用:Web Design Library　著者:PhotoshopStar　翻訳：菊池]