ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで光沢のあるシンプルなナビゲーションバーをデザインする方法

Photoshopで光沢のあるシンプルなナビゲーションバーをデザインする方法

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

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

Step1:はじめに

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

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

背景レイヤー塗りつぶし



Step2:ブラシで円を描く

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

新規レイヤー





Step3:ドロップシャドウを追加

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

ナビ・バー

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

ドロップシャドウ

ここまでの効果です。

効果



Step4:選択範囲を作成

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

選択範囲

選択範囲が解除



Step5:タイトルを入力

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

不透明度と塗り

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

タイトル



Step6:完成

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

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

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

カラーオーバーレイ

効果

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

完成

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



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



スポンサードリンク

コメント

ランダム記事5件

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