Advertisement

menubar502

 

メニューバーは多くのユーザーが実際操作する場所であり、ホームページやウェブサイトの顔といってもいい部分です。

デザインがよければ、多くのユーザーに見てもらえるというわけではないですが、悪いよりは良いほうが誰でもいいでしょう。

今回はフォトショップを使って作ることができるメニューバーを50個まとめた「50 Really High Quality Photoshop Navigation Menu Tutorials」をご紹介します。

その中でも特に気になるメニューバーのチュートリアルをいくつかまとめてみました。

どれも企業ウェブサイトなどでも使われている高品質なメニューバーとなっているので、これからホームページを作ろうと考えているひとは一度チェックしておくのもいいでしょう。

 

詳細は以下から。

 

 

1.Content Box With Orange Banner Heading

2009年度のウェブトレンドのひとつ「3Dスタイル」を作成するチュートリアルになっています。

海外系デザインブログなどでは当たり前のように取り入れられています。

orange-banner-menu-photoshop-navigation-tutorial

 

2. Vista Styled Button Photoshop Tutorial

Windows Vista風のアイコンを作る方法をご紹介しています。

vista-styled-button-photoshop-navigation-tutorial

 

3. How to Create a Slick and Clean Button in Photoshop

「Web2.0」を意識したスタイリッシュなボタンの作り方です。

slick-clean-button-photoshop-navigation-tutorial

 

 

4. Blue on Black Navigation Bar

淡い青色のグラデーションがとてもきれいなナビゲーションバーの作り方。すべて細かくレイヤーに分けられているので自分で作成する際の参考にもなります。

blue-on-black-menu-photoshop-navigation-tutorial

 

5. Green Navigation

単色ではなく、光を当てたような淡いグラデーションがきれいな緑のメニューバーの作り方。

green-button-photoshop-navigation-tutorial

 

6. High-Detailed Plastic Navigation Bar

つるつるしたプラスチックのような質感のメニューバーを作る方法を紹介しています。光が反射している様子まで再現してある高品質なメニューバーです。

plastic-menu-button-photoshop-navigation-tutorial

 

7. Modernistic Navigation Module

サイドバーなどに使われていそうなシンプルでモダンなデザインのメニューバーの作り方を紹介しています。

modern-menu-photoshop-navigation-tutorial

 

 

8. Create a Nice Stylish Glossy Button in Photoshop

個人的にお勧めしたいのが、こちらのボタン作成チュートリアルです。

光の反射まで表現することでエレガントなデザインのボタンを完成させます。

stylish-glossy-button-photoshop-navigation-tutorial

 

9. Stylish Dark Navigation Box

垂直型メニューバーですが、立体的なつくりになっています。

stylish-dark-menu-photoshop-navigation-tutorial

 

10. Creating A Cool 3D Web Design Effect

メニューバーに陰影をあらわした影をデザインすることで立体的なメニューバーを作ります。

3d-modern-menu-photoshop-navigation-tutorial

 

 

11. Web Button Making Tutorial 1 by easydisplayname

立体的で光の反射がきれいなツルツルした質感のボタンを作る方法を紹介しています。

web-technic-button-photoshop-navigation-tutorial

 

 

12. Web Button Making Tutorial 2 by easydisplayname

上記のチュートリアルと同様の作者の人がデザインした別のボタンです。こちらは中心部分が平らになったバージョンです。

web-technic-button-2-photoshop-navigation-tutorial

 

13. Professional Menu Button

淡い水色の光を放つスタイリッシュなボタンをステップごとに解説しているチュートリアルとなっています。

menu-button-photoshop-navigation-tutorial

 

14. Design Watercolor Effect Menu

水彩絵の具で描いたような淡いデザインのめずらしいメニューバーの作り方を紹介しています。

design-watercolor-effect-photoshop-navigation-tutorial

 

 

15. Glossy-Style Carbon Fibre Navigation Buttons

glossy-set-photoshop-navigation-tutorial

 

16. Interface Orbs

メニューバーではありませんが、本物のような立体的な透明感のあるボタンを作ることができます。

いろいろなボタンとして使えそうです。

interface-orbs-photoshop-navigation-tutorial

 

 

17. Clean Vertical Navigation Interface in Photoshop

シンプルなモノクロデザインのメニューバーを作る方法が紹介されています。

vertical-menu-photoshop-navigation-tutorial

 

 

18. Clean White Navigation Bar

シンプルな白色のメニューバーですが、どんなデザインにもあわせやすいです。

clean-white-button-photoshop-navigation-tutorial

 

 

19. Simple and Clean Menu Bar

うすいストライプの入ったシンプルなメニューバーの作り方です。

simple-menu-photoshop-navigation-tutorial

 

20. Clean Blue Navigation Box

透明感のあるブルーの垂直型メニューバーを作る方法を紹介しています。

clean-blue-menu-photoshop-navigation-tutorial

 

21. Create a Wii Web Header in Photoshop

Wiiで使われているようなメニュー部分の作り方を紹介しています。

wii-web-header-photoshop-navigation-tutorial

22. Metallic Header Design in Photoshop

メタルテクスチャを使った、立体的なメニューバーの作り方です。

metallic-header-photoshop-navigation-tutorial

 

 

23. Web 2.0 style buttons tutorial

「Web2.0」に対応したさまざまなツルツル素材のボタンの作り方を紹介しています。

web-20-style-button-photoshop-navigation-tutorial

 

24. Shut Down Button

パソコンなどの起動ボタンをデザインしたチュートリアル。

個人的にホームページのどこかにこんなぼたんあったらおもしろいと思うんですがいかがですか。

shut-down-button-photoshop-navigation-tutorial

 

25. Glass Button Photoshop Tutorial

透明のガラスで作成されたようなメニューバーです。

シンプルなデザインが好印象です。

glass-button-photoshop-navigation-tutorial

 

 

26. Easily Create An Apple-Inspired Navigation

apple社のウェブサイトで使われているメニューバーを忠実に再現したチュートリアルです。

真似してみたいと思っていた方も多いのではないでしょうか。

apple-inspired-menu-photoshop-navigation-tutorial

このほかにも参照元サイトにはさまざまな種類のメニューバーのフォトショップでの作り方が掲載されています。ぜひ覗いてみてください。

またこのほかにもお気に入りのメニューバーの作り方などありましたら教えてください。

 

 

 

 

[参照元 : 50 Really High Quality Photoshop Navigation Menu Tutorials – astwebdesigner.com]