ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

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月の人気記事ランキング