スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > PhotoshopでAqua風のナビゲーションを作る方法

PhotoshopでAqua風のナビゲーションを作る方法

投稿日:2010年02月16日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、PhotoshopでAqua風のナビゲーションを作ってみたいと思います。

Step1:はじめに

先ずは、新規ファイルを作成します。
私は72dpiで800ピクセル×200ピクセルのキャンバスを使用し、白で塗りつぶしました。
次に、新規レイヤーを作成し、ダークグリーン(#002C28)の長い長方形(722ピクセル x 34 ピクセル)を描いてください。

長い長方形



Step2:レイヤースタイルを追加

ダークグリーンの長方形を描いたレイヤーに、
下記のレイヤースタイル(「レイヤー」−「レイヤースタイル」)を加えてください。

シャドウ(内側

グラデーションオーバーレイ

結果





Step3:タブにカラーを追加

角丸長方形ツール角丸長方形ツールで、ダークグリーン(#002C28)の角丸長方形を101ピクセル×60ピクセルで描いてください。
そして、下側の角を切り取り、下の画像のように配置してください。

角丸長方形を作成

小さい角丸長方形のレイヤーに、
下記のレイヤースタイル(「レイヤー」−「レイヤースタイル」)を加えてください。

シャドウ(内側)

光彩(内側

グラデーションオーバーレイ

結果



Step4:タブにテキストを追加

横書き文字ツールを選択し、
フォントをArial、bold、12pt、なしにセットして、色は白にしてください。
最初のタブの上の新規文字レイヤーに「Home」と入力してください。

Homeを入力

残りのナビゲーションへ文字を加え、タブから光彩(内側)を削除してください。
そのエフェクトはアクティブなリンクのためのものです。

光彩(内側)を削除



Step5:明るいタブを作る

新規レイヤーを作成し、タブの隣に、173ピクセル×28ピクセルの黒いタブを加えてください。

黒いタブ

黒いタブのレイヤーに、下記のレイヤースタイルを加えてください。

シャドウ(内側)

グラデーションオーバーレイ

そして、描画モードを比較(明)にしてください。

描画モード比較(明)



Step6:RSSフィードのリンクを入力

横書き文字ツールを選択して、
フォントをArial、bold、12pt、なしにセットして、色は#002421にしてください。
新規文字レイヤーに、RSSフィードのリンクを入力し、明るいタブの上に置いてください。

RSSフィードのリンクを入力

明るいタブの隣に、もう一つ別のタブを加え、
「Contact(問い合わせ)」と「Advertise(広告)」のリンクにします。

別のタブ

横書き文字ツールを選択して、
フォントをArial、bold、11pt、なしにセットし、色は#74807Fにしてください。
長い長方形の上に、色を#A8C1BFにしてサブナビゲーションリンクを入力してください。

サブナビゲーション



Step7:完成

完成です。

完成



引用:Web Design Library 著者:phototutorial.infocs 翻訳:日下部



スポンサードリンク

コメント

ランダム記事5件

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