ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > ナビゲーションバーの作り方

ナビゲーションバーの作り方

投稿日:<2006年8月1日>   レベル:中級    ソフトウェア:PhotoShop


新しいドキュメントを作成してください。矩形ツールで上の方に長方形を描きます。
ドキュメントの作成

その長方形の下に、ラインをいれます。
長方形の下にラインをいれる

ラインレイヤーをコピーして、一番下に配置します。別の細いラインも加えます。
ラインレイヤーをコピーする

緑色で長方形を作成してください。
長方形を作成する

灰色でさらに長方形を作成します。この長方形の上にボタンを配置していきます。
ボタンを配置

一番右側にイメージなどを配置します。
イメージを配置

ボタンになる長方形を作ってください。
長方形を作成

レイヤーをクリックしてベベルとエンボス、サテン、境界線について下のように設定してください。
べベルとエンボス

サテンの設定

境界線の設定

各種設定が完了

縦に3つの部分の境界となる線を2本引いてください。ここでは、最初の区画はロゴに、次をボタンに、最後をイメージという風に使います。

境界線を2本引く

ボタンを5回複製して配置します。

5回伊複製する

ボタンと同じ高さの長方形を作成して、ボタンの右に配置します。
右に配置

カラーモードを乗算に変更してください。
カラーモードを乗算

カラーモードを乗算完成

左側には別のイメージを配置します。
イメージを配置する

カラーモードをハードライトに変更して、不透明度を50%に設定します。
カラーモードにハードライトに変更

ロゴを配置します。
ロゴを配置

リンクを作成してください。
リンクを作成する

下のような矢印を付け加えていきます。それをリンクの右側に配置します。
矢印を付け加える

矢印を複製して、全てのリンクの横に配置してください。
すべてのリンクの横に配置

検索ツールをヘッダーの上に配置します。
ヘッダーの上に配置

ナビゲーションバー完成


引用:Web Design Library著者:Head Nerd翻訳:atuk




スポンサードリンク

コメント

ランダム記事5件

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