前回の終了時点での画像



第一回 ⇒ PhotoshopでVista風UIのメニューバーを作る＃１
第二回 ⇒ PhotoshopでVista風UIのメニューバーを作る＃２

それでは、上記のバーにマウスが乗ったときの画像から始めます。

1. 新規レイヤーで200px×26pxの選択領域を作成し、選択範囲の変更 ⇒ 滑らかに(2px) ⇒ 何らかの色で塗りつぶす。
   
2. 塗りつぶしたレイヤーでレイヤー効果 ⇒ グラデーションオーバーレイ#000000～#333333。
   
3. 同じレイヤーで境界線 ⇒ 太さ1px ⇒ 塗りつぶしタイプ(グラデーション)#000000～#333333にする。
   
4. ウィンドウの方のレイヤーを「Ctrl+クリック」し、新規レイヤーを作成。編集 ⇒ 境界線を描く。
   
   今の本体はこんな感じ。
   
5. 次にこのマウスオーバーの画像の上半分を選択してテカりをつける。
   やり方は第二回参照
   
   で、こうなります。
   

これ以降は画像をそれぞれ保存して、あとはHTMLとCSSで実装する。
[追記:071127]
PhotoshopでVista風UIのメニューバーを作る＃４(＠XHTML+CSS実装編)

参考サイト

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

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