ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > 多目的に使えるナビゲーションヘッダーの作り方

多目的に使えるナビゲーションヘッダーの作り方

投稿日:2008年3月18日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、多目的に使えるナビゲーションヘッダーを作ってみたいと思います。

Step1:タブの作成
角丸長方形ツールで角丸長方形を作ります。

ps_13207_01.jpg

「Ctrl」を押しながらクリックすると角丸長方形を選択できます。
選択範囲を2ピクセル縮小します。

新規レイヤーを作成します。白のグラデーションに黒を適用します。

ps_13207_02.jpg

グラデーションのレイヤーの描画モードを「ハードライト」に変更し、レイヤーの不透明度を「50%」にします。

ps_13207_03.jpg

グラデーションのレイヤーを複製します。
数ピクセル上に移動します。
レイヤーパレットを使ってレイヤーの描画モードを「スクリーン」に変更します。

ps_13207_04.jpg

Step2:タブの複製
同じようにしてタブをもっと作ります。
タブのレイヤーの複製、移動を繰り返しましょう。

ps_13207_05.jpg

Step3:大きな長方形の作成
同じように大きな角丸長方形を作り、Step1と同じステップを繰り返します。

ps_13207_06.jpg

Step4:ロゴ窓の作成
長方形ツールを使って長方形を作ります。

ps_13207_07.jpg

長方形のレイヤーをダブルクリックしてレイヤースタイルウィンドウを開きます。
以下の設定を適用します。

ドロップシャドウ 描画モード「乗算」、不透明度「28%」、サイズ「9px」

ps_13207_08.jpg

境界線 サイズ「1px」、位置「内側」、描画モード「通常」

ps_13207_09.jpg

ps_13207_10.jpg

Step5:ロゴ、メニューの挿入
長方形ツールを使って長方形を作ります。
「Ctrl」+「Alt」+「G」キーを押してクリッピングマスクを作ります。

ps_13207_11.jpg

下の画像のように会社名、ロゴ、メニュー名を入れます。

ps_13207_12.jpg

Step6:画像の追加
大きな長方形の上に画像を入れたら、完成です。
レイヤーモードで作業してください。

ps_13207_13.jpg

引用:Web Design Library  著者:photoshopforfun.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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