投稿日：2009年11月20日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルでは、Photoshopで光沢のあるシンプルなナビゲーションバーを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： ブラシで円を描く
• Step3 ： ドロップシャドウを追加
• Step4 ： 選択範囲を作成
• Step5 ： タイトルを入力
• Step6 ： 完成

まず、作業をする背景を作ります。

1000px×600pxで新規ドキュメントを作成して、
グラデーションツール（描画色を＃333333、背景色を＃000000）で背景レイヤーを塗りつぶします。

新規レイヤーを作成して、大きな丸いブラシ（私は700pxのブラシを使用します）、
白色、不透明度と流量は50％を選択した上で、数回左クリックをします。（詳細は次の画像を参照してください）

「ナビ・バー」という名前で新規レイヤーを作成して、
長方形選択ツールで選択範囲を作り、黒で塗りつぶしてください。

レイヤー効果のドロップシャドウをこのレイヤーに下記のとおり適用します。

ここまでの効果です。

「Ctrl」キーを押しながら「ナビ・バー」レイヤーの上で左クリックして選択範囲を呼び出します。
選択範囲が呼び出されたら、「Alt」キーを押しながら長方形選択ツールで、現在の選択範囲に重なるようにもうひとつの選択範囲を作成します。
これにより、重なった選択範囲が解除されます。

前のステップの選択範囲を維持しながら、「光沢」という名前で新規レイヤーを作成して、白で塗りつぶします。
レイヤーの不透明度と塗りを30％程度に設定してください。

「光沢」レイヤーに各ページのタイトルを入力します。

ここでマウスを重ねた際の効果を追加します。
テキストレイヤーと「光沢」レイヤーの間に新しいレイヤーを作成し「マウスオーバー」と名付けます。

次に、長方形選択ツールで各ページタイトルの外側に選択範囲を作成し、白で塗りつぶして、
レイヤーの不透明度と塗りを30％程度に設定します。（レイヤー効果オプションで）

カラーオーバーレイを好きなように設定してください。
私は下記の設定を選びました。

これでこのチュートリアルは終わりです。
仕上げにプリセットブラシを使って背景にテクスチャーの効果を加えてもいいでしょう。
これが私の作品です。

このチュートリアルをお楽しみ頂き、ご自身のホームページ作成に役立てて頂ければ幸いです。
このデザインを実際にWeb上に載せるにはXHTMLとCSSを勉強してみてください。
ネット上にはそれらに関するチュートリアルがたくさん存在します。

引用:Web Design Library　著者:psdvault.com　翻訳：幕澤

スポンサードリンク