投稿日：2010年06月15日　　　レベル：中級者　　　　ソフトウェア：

---

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

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

1200ピクセル×600ピクセルの新規ドキュメントを作成し、背景を透明にします。
描画色を「#bebebf」にして背景色を「#d2d2d2」にしたら、グラデーションツールで線形グラデーションを選択します。

グラデーションを選択したら、キャンバスの上から下に向けてドラッグします。

キャンバスにノイズを追加するときは、「フィルタ」−「ノイズ」−「ノイズを加える」で次のように設定します。

背景にぼかしを入れます。
「フィルタ」−「ぼかし」−「ぼかし(移動)」で次のように設定します。

キャンバスの両端にぼかしが入りすぎました。
選択範囲を作って、ぼかしの入りすぎたところを取り除きます。

キャンバスに作った選択範囲を切り抜きます。
明るいメタルの背景が現れるので、「ぼかし(移動)」の設定を調整してメタルを程よく調整します。

半径10ピクセルの角丸長方形ツールをドラッグし、ナビゲーション用の長方形をキャンバスの真ん中に描きます。

レイヤースタイルを次のように設定します。

すると次のようになります。

カーボンファイバーのテクスチャをカスタマイズします。
4ピクセル×4ピクセルの新規ドキュメントを作成し、次のようにコピーします。

カーボンファイバーのパターンができたら、「編集」−「パターンの定義」を選択して、ナビゲーションの作業に戻ります。

ナビゲーションの周囲の選択範囲を読み込みます。
「選択範囲」−「選択範囲を読み込む」でナビゲーションの長方形のレイヤーを選択します。
ナビゲーションのレイヤーの上に新規レイヤーを作成したら、塗りつぶしツールを選択して、パターンメニューからカーボンファイバーのパターンを選択します。
パターンを選択したら、読み込んだ選択範囲を塗ります。

カーボンファイバーのレイヤーのブレンドモードを「差の絶対値」にします。
次のようになります。

文字ツールでナビゲーション領域の下側に文字を入れます。

文字を入力したら、次のようにレイヤースタイルを設定します。

それぞれの文字の間に、隣接する1ピクセルの線を2本、ナビゲーションの上から下まで入れます。
線の1つを黒にして、もう1つを白にします。
線を作ったらレイヤーの不透明度を50％にし、ブレンドモードをソフトライトにします。

楕円形選択ツールをドラッグしてナビゲーションの文字の上に小さい円を描きます。

グラデーションツールの線形グラデーションを選択して、黒（#000000）からグレー（#828282）を設定したグラデーションをドラッグします。

楕円形選択ツールをもう一度使用し、最初に作った円の内側にもう一つ選択範囲を作成します。

選択範囲を「#8e8e8e」で塗ります。
選択範囲を指定した状態のまま、グレーの円の上に新規レイヤーを作成します。
描画色を白（#FFFFFF）にし、グラデーションツールの円形グラデーションを選択したら、グラデーションのタイプを「白から透明へ」に変更します。

選択範囲をズームし、円形グラデーションを左上の角からドラッグします。
グラデーションを大きくしたくない場合は、ドラッグを短か目にします。

選択範囲が指定された状態のまま、グラデーションのタイプを線形グラデーションに変更します。
もう1つ新規レイヤーを作成し、線形グラデーションで下から上にドラッグします。

それぞれのレイヤーの不透明度やグラデーションの位置を変えてハイライトを加えると、次のようになります。

球体とハイライト全部を複製し、隣のボタンへ移します。
全部のボタンに球体を作ります。

例として、「Portfolio」ボタンを使って説明します。
好みの色で、球体にグラデーションオーバーレイを適用します。

長方形選択ツールで、仕切り線の間へ、ボタンを囲むように選択範囲を作ります。

選択範囲を「#dddddd」で塗ったら、レイヤーのブレンドモードを「オーバーレイ」に設定します。

最後に多角形選択ツールで三角形のシェイプを作り、背景と同じ色で塗ったら、次のような設定でドロップシャドウを入れます。

オンマウス状態の画像ができました。
完成です。

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

スポンサードリンク