45 Photoshop Tutorials for Better Navigation

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

Published March 3rd, 2008 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

106 Responses

Comments are now closed on this post.

  • Alex Hackbart, March 3, 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

  • niksy, March 4, 2008

    Nice collection, thank you very much!

  • Neon, March 4, 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 :)

  • Ruchir Chawdhry, March 4, 2008

    Excellent resource, Steven…

  • Welcome to Paradise, March 4, 2008

    Hello,

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

  • Sangesh, March 4, 2008

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

  • Lukas Labryszewski, March 4, 2008

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

  • Vandelay Design, March 4, 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.

  • Matthew Griffin, March 4, 2008

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

  • Digital Revolutions, March 4, 2008

    Nice list of tutorials, great work :D

  • Jon, March 6, 2008

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

  • Mert, March 8, 2008

    thanks much,i need its..

  • ccchai, March 9, 2008

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

  • johnrobin, March 18, 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.

  • amelia, April 3, 2008

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

  • olci, May 12, 2008

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

    tx again.

  • John Smith, May 14, 2008

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

  • Vandelay Design, May 14, 2008

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

  • Karl Hardisty, June 2, 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.

  • stfn, June 9, 2008

    Nice collection, thank you

  • seonyár2008, June 11, 2008

    Great collection!

  • Mark Abucayon, July 10, 2008

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

  • Teknoloji, September 8, 2008

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

  • TaunT, November 18, 2008

    web 2 style buttons is great

  • Alex, November 23, 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

  • Frank J, November 25, 2008

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

  • nice list featuring very different designstyles… thanks!

  • Satish Borkar, January 16, 2009

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

    Thank you very much for

  • quang cao online, May 11, 2009

    you need more than photoshop to create good navigation.

  • Vandelay Design, May 11, 2009

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

  • manmadhakumar, June 13, 2009

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

  • slang, September 21, 2009

    nice tuto
    thank you guys

  • legOstaRwArs, November 6, 2009

    nice tutorial list.
    very thanks.

  • Adam Martin, December 4, 2009

    This is just what I had been looking for. Thanks.

  • il Sindaco di Notiziopoli.it, December 10, 2009

    Hello guys, thanks a lot for this very very cool stuff!

  • 迷你倉, December 30, 2009

    there are good tutorial ! thanks

  • Misha, February 20, 2010

    What can I say that these are things I like so much! But tell me something how you do know when?

  • Borge, March 10, 2010

    Yeah, love your collection. This makes me inspire to create one of this. Awesome.

  • Fotografia Ślubna Gdańsk, April 26, 2010

    Really excellent compilation of tutorials! thanks a lot

  • Web 2.0 Design, May 13, 2010

    Excellent post. Many thanks for sharing this resource. The base of all good websites is, and always will be, quality navigation. The better the navigation, the better the search results will be.

  • Ashley, May 22, 2010

    I don’t know if it’s me or if it’s CS5, but I followed a couple of the navigation bar/button tutorials from Aviva Directory word for word twice, and I got something wayyy different than what they got in the end. :

  • Shoaib Hussain, June 16, 2010

    thnx a lot for such a nice collection of menu tutorials and all the other nice stuff that you have over here.

  • PSD web templates, June 16, 2010

    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.

  • I’ve been wanting to update the buttons on my scrapbook website for a while. This will definitely help.

    Thanks!

  • pathloss tutor, January 9, 2011

    Hey… this what i looking for… a great background button with photoshop source. to lead me ….

    Nice article…..

    Thanks

  • Nora Reed, June 16, 2011

    If you watch carefully at “Glossy style carbon fibre navigation from Photshop Star” you will see spelling mistake in start button which proves that designers are totally focused on designs and always makes these silly mistake, some people thinks that they are week in english which is not true.. they are just focus on designs.

  • Kev, January 5, 2013

    Pure CSS3 Navigation at http://templatz.co/navigation.php