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.
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
56 comments from readers
1 Alex Hackbart Mar 3, 2008 at 9:49 pm
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 Mar 3, 2008 at 10:25 pm
[…] 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 Mar 3, 2008 at 11:23 pm
[…] is a collection of 45 tutorials that will help you with creating the perfect navigation. google […]
4 niksy Mar 4, 2008 at 12:47 am
Nice collection, thank you very much!
5 45 tutorial photoshop per menu di navigazione « CssGlance - Css gallery, examples and webdesign resources Mar 4, 2008 at 1:26 am
[…] 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 Mar 4, 2008 at 2:41 am
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 Mar 4, 2008 at 4:57 am
[…] 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 Mar 4, 2008 at 5:10 am
[…] [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 Mar 4, 2008 at 5:10 am
[…] [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 Mar 4, 2008 at 6:33 am
[…] 45 Photoshop Tutorials for Better Navigation (Vandelay) […]
11 Ruchir Chawdhry Mar 4, 2008 at 7:09 am
Excellent resource, Steven…
12 Welcome to Paradise Mar 4, 2008 at 7:12 am
Hello,
These are top class navigation tutorials. Very nice collection, thank you very much for this compilation!
13 Sangesh Mar 4, 2008 at 7:28 am
Thank you for this article. This really great and very helpful for me. Thanks again.
14 HighFivez.com: Your Guide Through The Blogosphere Mar 4, 2008 at 8:35 am
[…] 45 Photoshop Tutorials for Better Navigation […]
15 Lukas Labryszewski Mar 4, 2008 at 11:00 am
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 Mar 4, 2008 at 11:04 am
[…] Enlace: 45 photoshop tutorials for better navigation […]
17 links for 2008-03-04 « linksnstuff Mar 4, 2008 at 1:39 pm
[…] photoshop-navigation-tutorials (tags: design photoshop html) […]
18 Vandelay Design Mar 4, 2008 at 2:47 pm
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 Mar 4, 2008 at 2:55 pm
Quite a comprehensive list, Steven. Also, thanks for the link.
20 Digital Revolutions Mar 4, 2008 at 4:00 pm
Nice list of tutorials, great work
21 Tutoriales para la creación de barras de navegación en photoshop | Hernan Davos Mar 4, 2008 at 4:10 pm
[…] 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 Mar 5, 2008 at 12:26 am
[…] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design […]
23 diarioTHC | 45 tutoriales photoshop para crear menús de navegación Mar 5, 2008 at 2:01 pm
[…] 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 Mar 6, 2008 at 3:28 am
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 Mar 6, 2008 at 7:23 am
[…] 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design (tags: photoshop reference) […]
26 Tutoriales de Photoshop | microoweb Mar 6, 2008 at 4:40 pm
[…] 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 Mar 6, 2008 at 11:56 pm
[…] 45 Photoshop Tutorials for Better Navigation at Vandelay Design. […]
28 Templaterie Blog Mar 7, 2008 at 3:35 am
[…] Vandelay: 45 Photoshop Tutorials for Better Navigation […]
29 Mert Mar 8, 2008 at 6:42 am
thanks much,i need its..
30 ccchai Mar 9, 2008 at 12:11 am
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 Mar 10, 2008 at 9:50 am
[…] Link: http://vandelaydesign.com/blog/design/photoshop-navigation-tutorials/ […]
32 johnrobin Mar 18, 2008 at 10:40 am
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! Mar 22, 2008 at 11:18 am
[…] 45 Photoshop Tutorials for Better Navigation […]
34 The Top Best Graphic Design Articles from March 2008 Mar 30, 2008 at 10:52 pm
[…] 45 Photoshop Tutorials for Better Navigation - from Vandelay Design […]
35 davefleet.com » 43 More Top Social Media Tips And Tools Apr 1, 2008 at 11:25 pm
[…] Tips: 45 Photoshop Tutorials for Better Navigation […]
36 amelia Apr 3, 2008 at 6:10 am
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 Apr 8, 2008 at 5:38 pm
[…] 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 Apr 11, 2008 at 8:00 am
[…] | 45 tutoriales de Photoshop para una mejor navegación Vía | Informática […]
39 45 Tutoriais de Botões e Menus em Photoshop | Avante! Apr 19, 2008 at 1:32 am
[…] 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 Apr 21, 2008 at 8:01 pm
[…] 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 Apr 25, 2008 at 2:17 am
[…] 45 Photoshop Tutorials for Better Navigation […]
42 olci May 12, 2008 at 3:32 am
web 2 style buttons is great;)
thanks a lot.
i am sharing this post via my friends.
tx again.
43 Tutoriales photoshop | Pboza May 13, 2008 at 8:02 am
[…] 45 tutoriales para una navegacion mejor […]
44 John Smith May 14, 2008 at 8:31 am
You need more than photoshop to create good navigation and I’m not talking about graphics now…
45 Vandelay Design May 14, 2008 at 6:44 pm
John,
I agree, and I mentioned that in the opening sentence.
46 Recursos de Photoshop: pinceles y acciones | Siguiendo la estela May 28, 2008 at 6:27 am
[…] 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 Jun 2, 2008 at 4:57 pm
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 Jun 9, 2008 at 12:04 pm
Nice collection, thank you
49 pligg.com Jun 10, 2008 at 11:17 am
45 Photoshop Tutorials for Better Navigation | Vandelay Website Design…
45 Photoshop Tutorials for Better Navigation | Vandelay Website Design…
50 seonyár2008 Jun 11, 2008 at 11:29 am
Great collection!
51 7 Factors that Separate Good Websites from Bad Websites | Vandelay Website Design Jun 21, 2008 at 5:17 pm
[…] 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 Jun 25, 2008 at 12:44 am
[…] 45 Photoshop Tutorials for Better Navigation […]
53 40 Photoshop Tutorials for Lighting and Abstract Effects | Vandelay Website Design Jul 7, 2008 at 8:42 pm
[…] 45 Photoshop Tutorials for Better Navigation […]
54 -Mr. Citrin- » Blog Archive » Navigation! (Part 1) Jul 9, 2008 at 8:17 am
[…] 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 Jul 9, 2008 at 8:08 pm
[…] 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 Jul 10, 2008 at 9:31 pm
wow listings of menu list would be helpful too, thanks again for sharing this one..