スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Home ＞ フォトショップ講座 ＞ Webサイトメニューバーの作り方

Webサイトメニューバーの作り方

投稿日：2007年1月30日　　　レベル：初心者　　　　ソフトウェア：PhotoShop


Step 1：ドキュメントを作成

Photoshopで新しいドキュメントを作成してください。背景は白、サイズは600×200pxとツールタブから角丸矩形ツールをつかって、長方形を描きます。

ドキュメントを作成

Step 2：ドロップシャドウを適用

ここから、バーに様々な効果を適用していきます。

まず、“ドロップシャドウ”を適用します。レイヤー＞レイヤースタイル＞ドロップシャドウを選択して、下のように設定してください。

ドロップシャドウを適用

こんな感じになると思います。

ドロップシャドウを適用後

Step 3：シャドウ(内側)を適用

“シャドウ(内側)”を次の設定で適用してください。
シャドウ(内側)を適用

このようになるはずです。

シャドウ（内側）を適用２

Step 4：焼きこみ

レイヤーを複製(レイヤータブのレイヤーを右クリックしてレイヤーの複製を選択)してください。ブレンドモードを“焼きこみ”にすれば、下のようになります。

ブレンドモードの焼きこみ

Step 5：メニューテキスト

ここで、メニュー内容を暗めの青色で作成します。下の内容は一例です。

メニューテキスト

Step 6：レイヤーを複製

メニューを含んだレイヤーを複製してください。

レイヤーの複製

Step 7：仕切りを作る

ツールタブからラインツールを使って、メニューにデザインを加えます。

レイヤーを複製して、線の色を明るくします。そして、1ピクセル分だけ右にずらしてください。

ps_10080_9.jpg

Step 8：全て仕切りを作る

ステップ7を繰り返して、全てのメニューを仕上げてください。現時点で下のようになっているはずです。

全て仕切りを作る

Step 9：完成

ここで、下のように角丸長方形を一番上のレイヤーに作成します。ツールタブから角丸矩形ツールを選んで使ってください。

角丸短形ツールを選択

レイヤータブで不透明度を30％として、完成です!!

不透明度30

引用:Web Design Library 著者:DesignTutorials.info翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング