すてきなナビゲーションバーの作り方を無料でご紹介します。
  ホーム > Webデザイン講座 > ナビゲーション作成2


■ ナビゲーション作成2

 

Web制作会社のWebサイトを想定して、ナビゲーションをつくってみます。
たまには、そういうのもいいよね。

1.細長〜い長方形をつくります。
色は、灰色(#EEEEEE)を使用。
まぁ、ここでは何色でもいいんだけど。

2.グラデーションを施します。
上部に白、下部に灰色(#EEEEEE)を使用。
上部はもうちょっと濃くてもいいかもしれません。

3.べベル加工を内側に施します。
まわりの部分は、1ピクセルに設定。
面倒なんで、その他の数値は適当です。(笑)

4.メニューを配置します。
フォントはMSPゴシック、色は黒(#333333)を使用。
このページの作成で一番苦労したのは、このメニューを考えることだったりします。(笑)

5.それぞれのメニューの前に、正方形を3つずつ配置します。
色は橙(#FFCC00)を使用。
この素材は、簡単につくれて洗練された印象をあたえられるので、けっこう便利です。

6.表示しているページをわかりやすくするために、メニューを赤い丸で囲みます。
マウスをつかって、つたない感じにするのがポイント。
葉月は、かっこよすぎるのはあんまり好きじゃないんで。(笑)

もうちょっとつくりこんでもいいんだけど、とりあえず完成です。
なんか素敵じゃないですか???

こんな感じでやれば、ほんと簡単に、かっこいいいナビゲーションがつくれるんです。
あなたにも、つくってみてほしいな。

でも、これは企業サイト向きだね。
個人サイトで、こんなデザインのナビゲーションつかっちゃったら、きっと親しみ
にくくなっちゃう。
だから、葉月はつかわなかったりします。

そう考えると、Webデザインって企業サイトのほうが楽かもっ。(笑)

 

Webデザイナー講座・Webデザイン講座

    もどるっ  
   
Webデザイン講座 | Webデザイン論 | Webユーザビリティ | Webデザイン関連書籍 | ホームページ作成ソフト | 画像編集ソフト
アクセスアップへの道しるべ | アフィリエイト・プログラム | いま人気のWebデザイン通信講座 | 求人情報サイト集 | Web制作用語集
 
   

© 2u WEBデザイン.com 2004