ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

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

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

投稿日:2008年8月26日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、フォトショップでWeb 2.0風のナビゲーションを作成してみたいと思います。


Step1:はじめに
500ピクセル×100ピクセルで新規ドキュメントを開き、「#eceae5」と「#e5e5e5」の色でグラデーションを使って、少しだけグレーを入れたり、任意の色を使ったりして色を塗ります。

角丸長方形ツールを使って半径15ピクセルで長方形を作ってナビゲーションの基礎にします。

ナビゲーションの基礎


Step2:レイヤー効果をつける
レイヤー効果を選択して次のように設定します。

ドロップシャドウ

光彩(外側)

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

境界線

すると次の画像のように効果がつきます。

レイヤー効果をつける


Step3:テキストを入れる
画像に効果をつけたら、次はテキストを入れます。ナビゲーションにテキストを入力してから「|」キーを使って仕切りを入れるか、線ツールを使って線を引きます。

テキストを入れる


Step4:星の中にRSSアイコンをいれる
カスタムシェイプツールを使ってシェイプを選択して星型のシェイプを選択してナビゲーションの角に星を作って回転させます。
注意:星型のシェイプが見えない場合はデフォルトのシェイプが全部ロードされていないことがあります。

ブレンドオプションを選択して次のように効果を入れます。

境界線

すると次のようになります。

星の中にRSSアイコンをいれる

それから星の中にRSSアイコンを入れます。


Step5:完成
完成すると次のようになります。

完成


引用:Web Design Library  著者:xtratutorials.uni.cc 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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