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:
- 35 Tutorials for Creating Website Layouts in Photoshop
- 40 Excellent Photoshop Tutorials for Textures and Backgrounds
- 40 Icon Tutorials for Photoshop
Stunning Vista inspired menu from PSDTuts
Slick blue navigation menu from SigTutorials
Glossy navigation bar from Core GFX
Quick glass buttons from Bits O’ NewMedia
Basic sleek button from psFreak.com
Sleek buttons from OriginMaker
Vista styled button from psFreak
Shiny green button from psFreak
Sleek glossy blue button from AnotherTutorialSite
Stylish button from OriginMaker
Glowing buttons from OriginMaker
Stylish blue button from Photoshop-Tutorials.us
Shiny orange button from TutorialSubmitter
Unique blue button from OriginMaker
Stylish black nav bar from Dicat.us
Vista buttons using styles only from The Not Simple Solution
Black Vista style button from Great Design
XP style navigation from Tutorial Guide
Glossy navigation menu from Gamexe.net
Glossy style carbon fibre navigation from Photshop Star
Professional glossy buttons from Photoshop Star
Simple glossy navigation buttons from Photoshop Star
Image sprite navigation using CSS from Style Meltdown
Orb button effect from Boonage
Clean and dark navigation bar from Aviva Directory
Nice, clean vertical menu from bwebi.com
Flexible buttons using Photoshop shapes and styles from Veerle
Web 2.0 style buttons from Iris Design
Vista style nav bar from Aviva Directory
Web 2.0 buttons from BlogWatts
XBox360 style nav bar from EvoGFX
Simple and clean menu bar from Photoshop Pack
Glass type navigation bar from Pixel Digest
Tabbed navigation menu from UPUP Media
Vertical navigation menu from EvoGFX
Plastic navigation bar from Tutorial Park
Blue button from Toxic Lab
Glossy web 2.0 buttons from Aviva Directory
Pixel style navigation box from Aviva Directory
Red “order now” button from Caged Flame
Aqua button from Pragt.net
Mac button from Pragt.net
Duotone vertical menu from Pegaweb
Glass button from Depiction.net
Simple web button from 3by9
Professional dark button from Aviva Directory
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
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 [...]
March 3rd, 2008
[...] is a collection of 45 tutorials that will help you with creating the perfect navigation. google [...]
March 4th, 2008
Nice collection, thank you very much!
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. [...]
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
March 4th, 2008
[...] VANDELAY DESIGN comentan que la navegación es, evidentemente, uno de los aspectos más cruciales de diseño web en [...]
March 4th, 2008
[...] [view original post] [source: Delicious] Previously - The Future of Social Networks at Graphing Social Patterns - ReadWriteWeb Next - [...]
March 4th, 2008
[...] [view original post] [source: Delicious] Previously - The Future of Social Networks at Graphing Social Patterns - ReadWriteWeb Next - [...]
March 4th, 2008
[...] 45 Photoshop Tutorials for Better Navigation (Vandelay) [...]
March 4th, 2008
Excellent resource, Steven…
March 4th, 2008
Hello,
These are top class navigation tutorials. Very nice collection, thank you very much for this compilation!
March 4th, 2008
Thank you for this article. This really great and very helpful for me. Thanks again.
March 4th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
March 4th, 2008
What a great list! Thank you very much for this.
You got my bookmark!
March 4th, 2008
[...] Enlace: 45 photoshop tutorials for better navigation [...]
March 4th, 2008
[...] photoshop-navigation-tutorials (tags: design photoshop html) [...]
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.
March 4th, 2008
Quite a comprehensive list, Steven. Also, thanks for the link.
March 4th, 2008
Nice list of tutorials, great work
March 4th, 2008
[...] estos tutoriales podremos resolver el primero de los problemas, su diseño. De interesante visita si estas trabado [...]
March 5th, 2008
[...] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design [...]
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, [...]
March 6th, 2008
Nice list. My web designer has been redoing our menu system after someone described our interface as cold and dirty!
March 6th, 2008
[...] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design (tags: photoshop reference) [...]
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 ó [...]
March 6th, 2008
[...] 45 Photoshop Tutorials for Better Navigation at Vandelay Design. [...]
March 7th, 2008
[...] Vandelay: 45 Photoshop Tutorials for Better Navigation [...]
March 8th, 2008
thanks much,i need its..
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 )
March 10th, 2008
[...] Link: http://vandelaydesign.com/blog/design/photoshop-navigation-tutorials/ [...]
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.
March 22nd, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
March 30th, 2008
[...] 45 Photoshop Tutorials for Better Navigation - from Vandelay Design [...]
April 1st, 2008
[...] Tips: 45 Photoshop Tutorials for Better Navigation [...]
April 3rd, 2008
See also these Web 2.0 style buttons http://www.minidesign.it/mos/view/Webdesign/Grafica/Pulsanti-web-20-stile-glossy/
April 8th, 2008
[...] 45 Photoshop Tutorials for Better Navigation (tags: photoshop webdesign tutorials navigation design tutorial) [...]
April 11th, 2008
[...] | 45 tutoriales de Photoshop para una mejor navegación Vía | Informática [...]
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 [...]
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 [...]
April 25th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
May 12th, 2008
web 2 style buttons is great;)
thanks a lot.
i am sharing this post via my friends.
tx again.
May 13th, 2008
[...] 45 tutoriales para una navegacion mejor [...]
May 14th, 2008
You need more than photoshop to create good navigation and I’m not talking about graphics now…
May 14th, 2008
John,
I agree, and I mentioned that in the opening sentence.
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. [...]
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.
June 9th, 2008
Nice collection, thank you
June 10th, 2008
45 Photoshop Tutorials for Better Navigation | Vandelay Website Design…
45 Photoshop Tutorials for Better Navigation | Vandelay Website Design…
June 11th, 2008
Great collection!
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, [...]
June 25th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
July 7th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
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! [...]
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 [...]
July 10th, 2008
wow listings of menu list would be helpful too, thanks again for sharing this one..
July 25th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
July 26th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
July 27th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
August 4th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
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 [...]
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. [...]
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ı [...]
August 8th, 2008
[...] Burada [...]
August 21st, 2008
[...] clipped from vandelaydesign.com [...]
August 21st, 2008
[...] clipped from vandelaydesign.com [...]
September 8th, 2008
wow listings of menu list would be helpful too, thanks again for sharing this one..
September 17th, 2008
[...] La navegación es, evidentemente, uno de los aspectos más cruciales de diseño web en términos de … [...]
September 30th, 2008
[...] 45 menü tasarım dersi [...]
October 2nd, 2008
[...] 45 Menü Tasarım Dersi [...]
October 18th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
October 28th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
November 2nd, 2008
[...] 45 Photoshop Tutorials for Better Navigation Menus [...]
November 2nd, 2008
[...] 45 Photoshop Tutorials for Better Navigation Menus [...]
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 [...]
November 18th, 2008
web 2 style buttons is great
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
November 25th, 2008
Thanks for the great article. Buttons can make a site look more appealing for sure!
December 9th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
December 24th, 2008
[...] 45 Photoshop Tutorials for Better Navigation submit_url = ‘http://vandelaydesign.com/blog/design/photo-editing-tutorials/’; [...]
December 24th, 2008
[...] 45 Photoshop Tutorials for Better Navigation [...]
December 24th, 2008
[...] 45 Photoshop Tutorials for Better Navigation submit_url = ‘http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/’; [...]
December 30th, 2008
[...] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design - [...]
December 30th, 2008
nice list featuring very different designstyles… thanks!
January 16th, 2009
really, u’r work is so cute!! Amazing that psd tuts menu
Thank you very much for
March 5th, 2009
[...] 45 Photoshop Tutorials for Better Navigation (tags: photoshop tutorials navigation menus) [...]
May 11th, 2009
you need more than photoshop to create good navigation.
May 11th, 2009
Quang,
I agree completely, but knowing how to make it look good can help.
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.