Vandelay Website Design Blog

45 Photoshop Tutorials for Better Navigation

Thank you for visiting the Vandelay Design Blog! We regularly publish collections of Photoshop tutorials like this one. If you would like to improve your Photoshop skills, please consider subscribing to our feed by RSS or by email so you don’t miss these posts.

Navigation is obviously one of the most crucial aspects of web design in terms of usability, but often it is also a focal point of the design’s appearance. Navigational buttons, bars and menus provide the designer with an excellent opportunity to be creative and add some style to the design. What better tool to use for this purpose than Photoshop?

Here is a collection of 45 tutorials that will help you with creating the perfect navigation. Some of them produce an end result that is fairly similar to another tutorial on the list, but you can learn something from each one as they take a slightly different approach.

You may also be interested in the following collections of Photoshop tutorials:

Stunning Vista inspired menu from PSDTuts

stunning vista inspired menu

Slick blue navigation menu from SigTutorials

Slick blue navigation menu

Glossy navigation bar from Core GFX

Glossy navigation

Quick glass buttons from Bits O’ NewMedia

Quick glass buttons

Basic sleek button from psFreak.com

Basic sleek button

Sleek buttons from OriginMaker

Sleek buttons

Vista styled button from psFreak

Vista styled button

Shiny green button from psFreak

Shiny green button

Sleek glossy blue button from AnotherTutorialSite

Sleek glossy blue button

Stylish button from OriginMaker

Stylish button

Glowing buttons from OriginMaker

Glowing buttons

Stylish blue button from Photoshop-Tutorials.us

Stylish blue button

Shiny orange button from TutorialSubmitter

Shiny orange button

Unique blue button from OriginMaker

Unique blue button

Stylish black nav bar from Dicat.us

Stylish black nav bar

Vista buttons using styles only from The Not Simple Solution

Vista buttons using styles only

Black Vista style button from Great Design

Black vista style button

XP style navigation from Tutorial Guide

XP style navigation

Glossy navigation menu from Gamexe.net

glossy navigation menu

Glossy style carbon fibre navigation from Photshop Star

glossy style carbon fibre navigation

Professional glossy buttons from Photoshop Star

professional glossy buttons

Simple glossy navigation buttons from Photoshop Star

simple glossy buttons

Image sprite navigation using CSS from Style Meltdown

Image sprites navigation

Orb button effect from Boonage

Orb button

Clean and dark navigation bar from Aviva Directory

Clean and dark navigation

Nice, clean vertical menu from bwebi.com

Vertical menu

Flexible buttons using Photoshop shapes and styles from Veerle

Flexible buttons

Web 2.0 style buttons from Iris Design

Web 2.0 style buttons

Vista style nav bar from Aviva Directory

Vista style nav bar

Web 2.0 buttons from BlogWatts

Web 2.0 buttons

XBox360 style nav bar from EvoGFX

XBox style nav

Simple and clean menu bar from Photoshop Pack

Simple and clean menu

Glass type navigation bar from Pixel Digest

Glass type navigation

Tabbed navigation menu from UPUP Media

Tabbed nav menu

Vertical navigation menu from EvoGFX

Vertical menu

Plastic navigation bar from Tutorial Park

Plastic navigation bar

Blue button from Toxic Lab

Blue button

Glossy web 2.0 buttons from Aviva Directory

Glossy button

Pixel style navigation box from Aviva Directory

Pixel style navigation

Red “order now” button from Caged Flame

order now

Aqua button from Pragt.net

Aqua button

Mac button from Pragt.net

Mac button

Duotone vertical menu from Pegaweb

Duotone vertical

Glass button from Depiction.net

Glass button

Simple web button from 3by9

Simple web button

Professional dark button from Aviva Directory

Professional dark button

Originally Published March 3rd, 2008

89 Responses

  1. Alex Hackbart
    March 3rd, 2008

    Awesome post and thanks for the link! Theres a ton of tutorials here that would combine a nice design with my CSS tutorial and make a nicer looking but functional nav. Looking forward to more great posts

  2. DeDestruct And Other Kinds of Awesomeness
    March 3rd, 2008

    [...] on another side note my Image Sprite Navigation with CSS tutorial made Vandelay’s list called 45 Photoshop Tutorials for Better Navigation, check it [...]

  3. Most Inspired Blog » Blog Archive » 45 Photoshop Tutorials for Better Navigation
    March 3rd, 2008

    [...] is a collection of 45 tutorials that will help you with creating the perfect navigation. google [...]

  4. niksy
    March 4th, 2008

    Nice collection, thank you very much!

  5. 45 tutorial photoshop per menu di navigazione « CssGlance - Css gallery, examples and webdesign resources
    March 4th, 2008

    [...] Il menu di navigazione assume una duplice importanza in un sito, a livello di usabilità e a livello di design, appeal di una pagina.  Dopo aver aver parlato di un articolo apparso di recente su Smashing Magazine riguardante le tendenze e le soluzioni innovative utilizzate per il design della navigazione, segnaliamo una raccolta di 45 tutorial photoshop da cui trarre ispirazione per migliorare lo stile grafico dei propri menu. [...]

  6. Neon
    March 4th, 2008

    These look ace but you must still remember that the site still needs working navigation if images are disabled so always remember to tag properly and make sure the text and backgrounds are different colours :)

  7. Colección de tutoriales para Photoshop que mejoran la navegación » Cosas sencillas
    March 4th, 2008

    [...] VANDELAY DESIGN comentan que la navegación es, evidentemente, uno de los aspectos más cruciales de diseño web en [...]

  8. Metaholic » 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design
    March 4th, 2008

    [...] [view original post] [source: Delicious] Previously - The Future of Social Networks at Graphing Social Patterns - ReadWriteWeb Next - [...]

  9. Metaholic » 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design
    March 4th, 2008

    [...] [view original post] [source: Delicious] Previously - The Future of Social Networks at Graphing Social Patterns - ReadWriteWeb Next - [...]

  10. Daily Bits - March 4, 2008 | Alvin Ashcraft's Daily Geek Bits
    March 4th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation (Vandelay) [...]

  11. Ruchir Chawdhry
    March 4th, 2008

    Excellent resource, Steven…

  12. Welcome to Paradise
    March 4th, 2008

    Hello,

    These are top class navigation tutorials. Very nice collection, thank you very much for this compilation!

  13. Sangesh
    March 4th, 2008

    Thank you for this article. This really great and very helpful for me. Thanks again.

  14. HighFivez.com: Your Guide Through The Blogosphere
    March 4th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  15. Lukas Labryszewski
    March 4th, 2008

    What a great list! Thank you very much for this.
    You got my bookmark!

  16. 45 tutoriales de Photoshop para mejorar la navegación | frogx.three
    March 4th, 2008

    [...] Enlace: 45 photoshop tutorials for better navigation [...]

  17. links for 2008-03-04 « linksnstuff
    March 4th, 2008

    [...] photoshop-navigation-tutorials (tags: design photoshop html) [...]

  18. Vandelay Design
    March 4th, 2008

    Neon,
    You’re absolutely right. Looks shouldn’t replace the need for accessibility. Most of these Photoshop images can easily be used as background images with text on top to maintain accessibility.

  19. Matthew Griffin
    March 4th, 2008

    Quite a comprehensive list, Steven. Also, thanks for the link.

  20. Digital Revolutions
    March 4th, 2008

    Nice list of tutorials, great work :D

  21. Tutoriales para la creación de barras de navegación en photoshop | Hernan Davos
    March 4th, 2008

    [...] estos tutoriales podremos resolver el primero de los problemas, su diseño. De interesante visita si estas trabado [...]

  22. » 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design Webcreatives
    March 5th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design [...]

  23. diarioTHC | 45 tutoriales photoshop para crear menús de navegación
    March 5th, 2008

    [...] Vandelay realizar un recopilatorio con 45 tutoriales photoshop en los que explican como obtener una buena navegación que cumpla los dos requisitos primordiales, [...]

  24. Jon
    March 6th, 2008

    Nice list. My web designer has been redoing our menu system after someone described our interface as cold and dirty!

  25. links for 2008-03-06 « Bluebeck blog
    March 6th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design (tags: photoshop reference) [...]

  26. Tutoriales de Photoshop | microoweb
    March 6th, 2008

    [...] Vandelay se puede encontrar una cuidadosa recopilación de tutoriales profesionales en photoshop para diseñar barras y menus de navegación para dejar más lindo tu sitio ó [...]

  27. The Best of the Blogosphere: March 7, 2008 | Super Blogging
    March 6th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation at Vandelay Design. [...]

  28. Templaterie Blog
    March 7th, 2008

    [...] Vandelay: 45 Photoshop Tutorials for Better Navigation [...]

  29. Mert
    March 8th, 2008

    thanks much,i need its..

  30. ccchai
    March 9th, 2008

    Trackback from “Best resources for Web developers and designers” ( http://impressionsoft.blogspot.com/2008/03/best-resources-for-web-developers-and.html )

  31. 45 PhotoShop tutorials til navigation | bran.dk
    March 10th, 2008

    [...] Link: http://vandelaydesign.com/blog/design/photoshop-navigation-tutorials/ [...]

  32. johnrobin
    March 18th, 2008

    wow… wonderful, what an inspiration.. design is the gate of trust to a web site.. thanks for the collection. I still looking for ways how to combine the design and text just in case user has disabled to load images from a web.

  33. Reflect Society » Blog Archive » Links of the Day!
    March 22nd, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  34. The Top Best Graphic Design Articles from March 2008
    March 30th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation - from Vandelay Design [...]

  35. davefleet.com » 43 More Top Social Media Tips And Tools
    April 1st, 2008

    [...] Tips: 45 Photoshop Tutorials for Better Navigation [...]

  36. amelia
    April 3rd, 2008

    See also these Web 2.0 style buttons http://www.minidesign.it/mos/view/Webdesign/Grafica/Pulsanti-web-20-stile-glossy/

  37. Tommunication.com » Blog Archive » links for 2008-04-08
    April 8th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation (tags: photoshop webdesign tutorials navigation design tutorial) [...]

  38. 45 tutoriales para Photoshop sobre navegación web | Diego Mattei Blog
    April 11th, 2008

    [...] | 45 tutoriales de Photoshop para una mejor navegación Vía | Informática [...]

  39. 45 Tutoriais de Botões e Menus em Photoshop | Avante!
    April 19th, 2008

    [...] acrilicos e brilhantes? Sempre quis fazer menus que dão vontade de clicar? Então veja esses 45 tutoriais de criação de menus e botões utilizando o Photoshop. Muito [...]

  40. 50 Essential Photoshop Text Tutorials | Vandelay Website Design
    April 21st, 2008

    [...] month I published a collection of 45 Photoshop Tutorials for Better Navigation, which quickly became one of the most popular posts on this blog. Due to the response, I spent some [...]

  41. ボタン・バッジいろいろ - DesignWalker
    April 25th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  42. olci
    May 12th, 2008

    web 2 style buttons is great;)
    thanks a lot.
    i am sharing this post via my friends.

    tx again.

  43. Tutoriales photoshop | Pboza
    May 13th, 2008

    [...] 45 tutoriales para una navegacion mejor [...]

  44. John Smith
    May 14th, 2008

    You need more than photoshop to create good navigation and I’m not talking about graphics now…

  45. Vandelay Design
    May 14th, 2008

    John,
    I agree, and I mentioned that in the opening sentence.

  46. Recursos de Photoshop: pinceles y acciones | Siguiendo la estela
    May 28th, 2008

    [...] Vandelay .- Otro blog donde se hizo una recopilación de tutoriales para photoshop para una mejor navegación (para la creación de menús) para las páginas web. Sitio recomendado para coger nuevas ideas y aprender nuevas técnicas. [...]

  47. Karl Hardisty
    June 2nd, 2008

    Thanks for the great article. Buttons can make or break a design, so the more options the better.

    While I’m a big fan of keeping code light and using text for links wherever possible, many of these designs make a great case for image based menus.

  48. stfn
    June 9th, 2008

    Nice collection, thank you

  49. pligg.com
    June 10th, 2008

    45 Photoshop Tutorials for Better Navigation | Vandelay Website Design…

    45 Photoshop Tutorials for Better Navigation | Vandelay Website Design…

  50. seonyár2008
    June 11th, 2008

    Great collection!

  51. 7 Factors that Separate Good Websites from Bad Websites | Vandelay Website Design
    June 21st, 2008

    [...] through the site, navigation is often used by designers to create more visually-appealing websites (see 45 Photoshop Tutorials for Better Navigation). Although navigation provides designers with a great opportunity to improve the look of the site, [...]

  52. ナビゲーション・メニューまとめ - DesignWalker
    June 25th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  53. 40 Photoshop Tutorials for Lighting and Abstract Effects | Vandelay Website Design
    July 7th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  54. -Mr. Citrin- » Blog Archive » Navigation! (Part 1)
    July 9th, 2008

    [...] Look em’ over, and see if any of them either fits your site as-is, or inspires you to something that does! [...]

  55. Signature resources - Zelda Universe Forums
    July 9th, 2008

    [...] Tut Scream Aim Fire General Art Tutorials Photoshop Tutorials and Flash Tutorials - Tutorialized 45 PS Tutorials Photoshop Explosion Effect Wow Web Designs - tuts for PS and Illustrator Pixel2Life Animated Gifs [...]

  56. Mark Abucayon
    July 10th, 2008

    wow listings of menu list would be helpful too, thanks again for sharing this one..

  57. Weblog Edwin Duinkerken » Blog Archive » Leer ontwerpen door het te doen (900+ tutorials)
    July 25th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  58. The world’s biggest post about Photoshop (PSDs, textures, tutorials, patterns, shapes, brushes and…) - FrancescoMugnai.com
    July 26th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  59. Booto’Blog » Blog Archive » 最多的Photoshop资源降临…
    July 27th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  60. 25 Examples of Creative Navigation | Vandelay Website Design
    August 4th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  61. Haberin Merkezi » Blog Archive » Photoshop’la yapılmış en iyi 45 navigasyon menü örneği
    August 7th, 2008

    [...] tasarımıyla uğraşan arkadaşlar için yardımcı olacağını düşündüğüm bir konu,Photoshop’la yapılmış en iyi 45 navigasyon menü örneği. Biryerlerden kopyala yapıştır, Yapmaktansa nasıl yapıldığını öğrenip kendi [...]

  62. bırakın hazırı kendiniz yapın 45 adet button , navigasyon yapımı - Sizlere ; Bu yazılar benim için değil sizler için yazılıyor.
    August 7th, 2008

    [...] bu sitede 45 adet navigasyon , icon tasarımlarının nasıl yapıldığı anlatılmış.kendini geliştirmek isteyen ve kendi tasarım yeteneğini , bilgisini geliştirmek isteyen arkadaşlar içeriği kontrol edip uygulamaya koyulabilirler.gerçekten çok güzel menüler ve buttonlar var. [...]

  63. yenibirhost.net » Photoshop ile hazırlanmış 45 navigasyon menü dizaynı
    August 7th, 2008

    [...] güzel navigasyon menülerin Photoshop ile nasıl hazırlandığını görmek istermisiniz? Photoshop’la yapılmış en iyi 45 navigasyon menü örneği ne bu adresten ulaşabilirsiniz. Web sitesi hazırlayanlar için büyük kolaylık sağlayacak bu örnekleri kaçırmamanızı [...]

  64. 45 Photoshop Tutorials for Better Navigation « Yazılım geliştiricisinin klavyesinden..
    August 8th, 2008

    [...] Burada [...]

  65. 45 Photoshop Tutorials for Better Navigation « Malandrazi’s Weblog
    August 21st, 2008

    [...] clipped from vandelaydesign.com [...]

  66. 45 Photoshop Tutorials for Better Navigation « Kauai Capoeira Group
    August 21st, 2008

    [...] clipped from vandelaydesign.com [...]

  67. Teknoloji
    September 8th, 2008

    wow listings of menu list would be helpful too, thanks again for sharing this one..

  68. 45 Tutoriales Photoshop para una mejor navegación « Trocitos de internet
    September 17th, 2008

    [...] La navegación es, evidentemente, uno de los aspectos más cruciales de diseño web en términos de … [...]

  69. Photoshop i̇le i̇lgili her şey. | Batuhan Bulak
    September 30th, 2008

    [...] 45 menü tasarım dersi [...]

  70. Photoshop İle İlgili Ne Varsa… | Blog ve Bilgin
    October 2nd, 2008

    [...] 45 Menü Tasarım Dersi [...]

  71. » 45 Best Web Collection &raquo&raquo» on gNcWebmaster.com - Web 2.0 Tasarım ve Türkiye
    October 18th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  72. Comenzando con las mejores paginas con tutoriales de photoshop ;) « Whatshappen’s Blog
    October 28th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  73. 35 Tutorials for Creating Website Layouts in Photoshop | Vandelay Website Design
    November 2nd, 2008

    [...] 45 Photoshop Tutorials for Better Navigation Menus [...]

  74. 35 Tutorials for Creating Website Layouts in Photoshop | Vandelay Website Design
    November 2nd, 2008

    [...] 45 Photoshop Tutorials for Better Navigation Menus [...]

  75. Yaratıcı Menü Tasarımları · Yakup Gövler'in Not Defteri
    November 11th, 2008

    [...] bulunan sitenin listesine buradan, photoshop ile yapılabilinecek 45 menü tasarım dersine ise buradan ulaşabilirsiniz. Ayrıca site baştan sona incelemeye değer. Yazıyı Paylaş: Aşağıdaki [...]

  76. TaunT
    November 18th, 2008

    web 2 style buttons is great

  77. Alex
    November 23rd, 2008

    Cool article and thanks for including my image sprite article, there is another article here Image Sprites Tutorial that may have some more helpful stuff if you want to add it

  78. Frank J
    November 25th, 2008

    Thanks for the great article. Buttons can make a site look more appealing for sure!

  79. ナビゲーションメニューのデザイン総まとめ - DesignWalker
    December 9th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  80. 45 Photo Editing Tutorials for Photoshop | Vandelay Website Design
    December 24th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation submit_url = ‘http://vandelaydesign.com/blog/design/photo-editing-tutorials/’; [...]

  81. 35 Photoshop Tutorials Inspired by Apple | Vandelay Website Design
    December 24th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation [...]

  82. 40 Excellent Photoshop Tutorials for Textures and Backgrounds | Vandelay Website Design
    December 24th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation submit_url = ‘http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/’; [...]

  83. Bookmarks for Diciembre 30th through Diciembre 31st | FACIL TUTORIALES
    December 30th, 2008

    [...] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design - [...]

  84. frank katzer | 1klang.de internetagentur
    December 30th, 2008

    nice list featuring very different designstyles… thanks!

  85. Satish Borkar
    January 16th, 2009

    really, u’r work is so cute!! Amazing that psd tuts menu

    Thank you very much for

  86. Daily Design Links for 7-19-08 » Anidan Design
    March 5th, 2009

    [...] 45 Photoshop Tutorials for Better Navigation (tags: photoshop tutorials navigation menus) [...]

  87. quang cao online
    May 11th, 2009

    you need more than photoshop to create good navigation.

  88. Vandelay Design
    May 11th, 2009

    Quang,
    I agree completely, but knowing how to make it look good can help.

  89. manmadhakumar
    June 13th, 2009

    this is very royal collection.i need this type of collection more.i have gotta good knowledge by watching your collection.thanks.

Leave a Reply