ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

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

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

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



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

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

ドキュメントを作成

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

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

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

ドロップシャドウを適用

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

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

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

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

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

シャドウ(内側)を適用2

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件

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