先日Oguraさんと「にしこり」のデザインについて話し合いました。
それで、とりあえずナビゲーションバーをかっちょよくしようということになりました。
記事投稿ついでに２、３回に分けてチュートリアルを載せていきます。



まず参考サイトはこちら↓

1. PhotoShopで美しいボタンを作るチュートリアル39個
2. How to create VISTA style toolbar with CSS(和訳:CSSを使ってVista風ツールバーを作成する方法)
3. 39 Photoshop Button Tutorials You Should Have in Your Arsenal
4. Vista Style Nav Bar - Photoshop Tutorials

前半は主に参考サイトの4番さんを参考にします。
同じようにつくっても面白くないので改造します。

1. 「にしこり」の横幅は990pxで、ナビゲーションバーの高さが25pxなので988px×32pxくらいのレイヤーを作成。
   
2. 何らかの色で塗りつぶし、イメージ ⇒ 画像サイズ(994px×38pxの真中寄せ)。
   
3. 矩形選択ツールで塗りつぶした画像を選択、新規レイヤー作成(塗りつぶした画像は目隠しか捨てる)。
   
4. 選択範囲を変更 ⇒ 滑らかに(2px) ⇒ 何らかの色で塗りつぶす。
   今はこんな感じ。
   
5. レイヤー効果 ⇒ グラデーションオーバーレイ#333333～#555555(下図参照)
   
6. レイヤー効果 ⇒ 境界線#666666(下図参照)
   

(追記[071101])
PhotoshopでVista風UIのメニューバーを作る＃２

• タグ
• photoshop
• Tutorial Vista
• Vista
• 画像