スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

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