このチュートリアルでは、カーボンファイバーをはめ込んだナビゲーションを作る方法を紹介します。
これは、テンプレートモンスターのテンプレートからヒントを得て作成しました。

• Step1 ： 背景を作る
  
• Step2 ： ナビゲーションを作る
  
• Step3 ： ナビゲーションのボタンを作る
  
• Step4 ： ナビゲーションの球体を作る
  
• Step5 ： オンマウス状態の画像を作る
  
• Step6 ： 完成
  

Step1：背景を作る

1200ピクセル×600ピクセルの新規ドキュメントを作成し、背景を透明にします。
描画色を「#bebebf」にして背景色を「#d2d2d2」にしたら、[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.]
キャンバスに作った選択範囲を切り抜きます。
明るいメタルの背景が現れるので、「ぼかし(移動)」の設定を調整してメタルを程よく調整します。




Step2：ナビゲーションを作る

半径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.]
すると次のようになります。
[You must be registered and logged in to see this image.]
カーボンファイバーのテクスチャをカスタマイズします。
4ピクセル×4ピクセルの新規ドキュメントを作成し、次のようにコピーします。
[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.]









Step3：ナビゲーションのボタンを作る

[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ピクセルの線を2本、ナビゲーションの上から下まで入れます。
線の1つを黒にして、もう1つを白にします。
線を作ったらレイヤーの不透明度を50％にし、ブレンドモードをソフトライトにします。
[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.]グラデーションツールの線形グラデーションを選択して、黒（#000000）からグレー（#828282）を設定したグラデーションをドラッグします。
[You must be registered and logged in to see this image.]楕円形選択ツールをもう一度使用し、最初に作った円の内側にもう一つ選択範囲を作成します。
[You must be registered and logged in to see this image.]
選択範囲を「#8e8e8e」で塗ります。
選択範囲を指定した状態のまま、グレーの円の上に新規レイヤーを作成します。
描画色を白（#FFFFFF）にし、[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つ新規レイヤーを作成し、線形グラデーションで下から上にドラッグします。
[You must be registered and logged in to see this image.]
それぞれのレイヤーの不透明度やグラデーションの位置を変えてハイライトを加えると、次のようになります。
[You must be registered and logged in to see this image.]
球体とハイライト全部を複製し、隣のボタンへ移します。
全部のボタンに球体を作ります。




Step5：オンマウス状態の画像を作る

例として、「Portfolio」ボタンを使って説明します。
好みの色で、球体にグラデーションオーバーレイを適用します。
[You must be registered and logged in to see this image.]長方形選択ツールで、仕切り線の間へ、ボタンを囲むように選択範囲を作ります。
[You must be registered and logged in to see this image.]
選択範囲を「#dddddd」で塗ったら、レイヤーのブレンドモードを「オーバーレイ」に設定します。
[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.]




Step6：完成

オンマウス状態の画像ができました。
完成です。
[You must be registered and logged in to see this image.]





引用:Web Design Library　著者:Hv-Designs.co.uk　翻訳：菊池]