ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Vista風ナビゲーションバーの作り方

Vista風ナビゲーションバーの作り方

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

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

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

ps_13077_1.jpg

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

ps_13077_2.jpg

Step4:色の設定
新規レイヤーを作成(「Shift」+「Ctrl」+「N」キーか「レイヤー」−「新規ー」−「レイヤー」)して選択範囲に任意の色をつけます。

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

境界線: #676767
ps_13077_4.jpg

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

ps_13077_5.jpg

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

ps_13077_6.jpg

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

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

ps_13077_7.jpg

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

ps_13077_8.jpg

ps_13077_9.jpg

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

ps_13077_10.jpg

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

ps_13077_11.jpg

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

ps_13077_12.jpg

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

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

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

境界線: #0f1011 から #575858
ps_13077_14.jpg

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

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

ps_13077_15.jpg

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

ps_13077_16.jpg

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

ps_13077_17.jpg

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

ps_13077_18.jpg

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

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

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

ps_13077_19.jpg

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

ps_13077_20.jpg

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

ps_13077_21.jpg

Step14:完成
Vista風ナビゲーションバーの完成です!

ps_13077_22.jpg

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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング