45 Photoshop Tutorials for Better Navigation
Published March 3rd, 2008 in DesignNavigation 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
91 Responses to “45 Photoshop Tutorials for Better Navigation”
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
Nice collection, thank you very much!
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
Excellent resource, Steven…
Hello,
These are top class navigation tutorials. Very nice collection, thank you very much for this compilation!
Thank you for this article. This really great and very helpful for me. Thanks again.
What a great list! Thank you very much for this.
You got my bookmark!
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.
Quite a comprehensive list, Steven. Also, thanks for the link.
Nice list of tutorials, great work
Nice list. My web designer has been redoing our menu system after someone described our interface as cold and dirty!
thanks much,i need its..
Trackback from “Best resources for Web developers and designers” ( http://impressionsoft.blogspot.com/2008/03/best-resources-for-web-developers-and.html )
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.
See also these Web 2.0 style buttons http://www.minidesign.it/mos/view/Webdesign/Grafica/Pulsanti-web-20-stile-glossy/
web 2 style buttons is great;)
thanks a lot.
i am sharing this post via my friends.
tx again.
You need more than photoshop to create good navigation and I’m not talking about graphics now…
John,
I agree, and I mentioned that in the opening sentence.
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.
Nice collection, thank you
Great collection!
wow listings of menu list would be helpful too, thanks again for sharing this one..
wow listings of menu list would be helpful too, thanks again for sharing this one..
web 2 style buttons is great
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
Thanks for the great article. Buttons can make a site look more appealing for sure!
nice list featuring very different designstyles… thanks!
really, u’r work is so cute!! Amazing that psd tuts menu
Thank you very much for
you need more than photoshop to create good navigation.
Quang,
I agree completely, but knowing how to make it look good can help.
this is very royal collection.i need this type of collection more.i have gotta good knowledge by watching your collection.thanks.
nice tuto
thank you guys
nice tutorial list.
very thanks.
Trackbacks