ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでいつもと違うナビゲーションバーを作る方法

Photoshopでいつもと違うナビゲーションバーを作る方法

投稿日:2010年09月14日   レベル:初級者    ソフトウェア:PhotoShop

このチュートリアルでは、いつもと違うナビゲーションバーを作る方法を紹介します。

Step1:箱をつくる

900px×300pxの大きさで解像度を72ppiとして新しいドキュメントを開きます。

ドキュメントを開く

50pxと850pxのところに縦のガイドをひきます。
50pxと250pxのところに横のガイドをひきます。
ガイドの間に、丸ふちの長方形を描きます。

丸ふちの長方形を描く

Ctrl+Enterで、それを選択範囲に変え、0090bfの色で塗りつぶします。

青色に塗りつぶす



Step2:ワープで歪ませる

Ctrl+Tを押して右クリックし、「ワープ」を選びます。

ワープ

「でこぼこ」オプションを選び、「カーブ」に-10と入力します。

でこぼこ

カーブ

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

カーブした箱





Step3:下半分を使う

下半分だけが見えるように画像を上に移動させます。

下半分を使う



Step4:境界線をつけ、文字をかく

境界線を白の3pxの幅にします。
レイヤースタイルの中で境界線の使用できる中央オプションを選択します。

境界線

ナビゲーションバーの中にリンクを書くと、次のようになります。

リンク



Step5:完成

完成です。
あなたの創造力次第で効果を付け加えて、よりよいものを作ることができます。

完成1

このようなものも出来ます。

完成2



引用: Web Design Library 著者: animhut 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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