投稿日：2008年1月22日　　　レベル：初心者　　　　ソフトウェア：

---

• Step1 ： 新規ファイルを作成
• Step2 ： 480px × 30px
• Step3 ： 角丸
• Step4 ： 色の設定
• Step5 ： レイヤースタイルを適用
• Step6 ： 上部を選択
• Step7 ： グラデーション設定
• Step8 ： 不透明度設定
• Step9 ： 一行選択ツール
• Step10 ： 選択範囲を反転
• Step11 ： 光沢の設定
• Step12 ： ロールオーバー効果
• Step13 ： テキストリンク追加
• Step14 ： 完成

ファイルを新規作成します。サイズは500ピクセル×50ピクセルです。

選択範囲を480ピクセル×30ピクセルにします。



「選択範囲」−「選択範囲を変更」−「滑らかに」を選択して2ピクセルのラジオを適用します。



新規レイヤーを作成（「Shift」＋「Ctrl」＋「N」キーか「レイヤー」−「新規ー」−「レイヤー」）して選択範囲に任意の色をつけます。

次のレイヤースタイルを適用します。
グラデーション: #313332 から #46474a


境界線: #676767


ナビゲーションバーの上半分を選択します。



新規レイヤーを作成して上から下にかけて白から透明のグラデーションを作ります。



レイヤーのブレンドモードを「覆い焼き(リニア)」にして不透明度を35％に設定します。

ナビゲーションバーは次のようになります。



新規レイヤーを作成してから「一行選択ツール」を使ってナビゲーションバーの上の境界から1ピクセル下に選択範囲を作ります。





ここで、一番上のレイヤーを「Ctrl」キーを押しながらクリックして選択します。



1ピクセルの白い線のレイヤーを選択したまま「選択範囲」−「選択範囲を反転」して、「Delete」キーを押します。



このレイヤーのブレンドモードを「ソフトライト」にして不透明度を60％に変更します。



これからロールオーバー効果を作ります。130ピクセル×24ピクセルの選択範囲を作成し、「選択範囲」−「選択範囲を変更」−「滑らかに」を選択して2ピクセルのラジオを適用します。

新規レイヤーを作成して選択範囲に任意の色をつけます。

次のレイヤースタイルを適用します。
グラデーション: #000000 から #2f3233


境界線: #0f1011 から #575858


新規レイヤーを作成して一番上のレイヤーを「Ctrl」キーを押しながらクリックして選択します。「編集」−「境界線を描く」を選択して1ピクセルの白い境界線を追加します。

レイヤーの不透明度を15％に変更します。



ロールオーバーする部分の上半分を選択し、上から下にかけて白から透明のグラデーションを適用します。



レイヤーの不透明度を80％に変更します。



テキストを追加しましょう。Verdanaの11ポイントと白を使います。



リンクの間に境目を追加する必要があります。新規レイヤーを作成し、「一列選択ツール」で選択範囲を作り「#1a1b1c」で色を塗ります。

選択範囲を1ピクセル右に移動して「#5d5f60」で色を塗ります。

再び選択範囲を1ピクセル右に移動して「#232526」で色を塗ります。



20ピクセルのソフトブラシを使って上下を消してからこのレイヤーの不透明度を50％に変更します。



このレイヤーを複製して他の2つのリンクの間に移動します。



Vista風ナビゲーションバーの完成です！

引用:Web Design Library 著者:Aviva Directory 翻訳:菊池

スポンサードリンク