Total Followers 132,503
While waiting our SEO series to come out, I showcased for you pretty huge and comprehensive navigation, menu and button tutorial article. All of those tutorials are selected carefully just featuring here, the most high quality ones.
Navigation is very important aspect in every web-design, because it is usually the place where people will click the most as well as notice creative and usable buttons. Really all we need is to get visitor remember our site! To complete and sharpen you need to use Photoshop here, actually version doesn’t matter, I am sure everything can be completed in any of PS previous versions too!
Let’s get started and learn how to create shiny, clean, stylish, glossy or even 3D navigation menus! Hope you will enjoy this article!
In this tutorial you will learn how to create a content box similar to the ones used on this site, where the corners are rounded and the heading has a 3D effect.
Learn how to make a vista styled button by using lots of different layer styles, tools and techniques.
This Photoshop tutorial shows you how to create a simple and clean “Web 2.0 style” button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).
Design a beautiful navigation bar in Photoshop. This tutorial will teach you how to combine several layer styles to create a beautiful yet simple navigation bar.
In this tutorial, you will learn how to make a stylish looking green navigation with a shine effect.
This tutorial is describing detailed process of creation of “plastic” navigation bar.
Create this beautiful navigation module with Photoshop. This Photoshop layout tutorial will show how simple shapes and gradients can create elegant designs.
In this tutorial you will learn how to make a more advanced styled navigation box using some more effects and tools.
In this tutorial you will learn some very easy techniques, using gradients and layer styles, that we can use to produce nice subtle 3D effects in our web designs.
The following tutorial is on how to create a set of web buttons. This tutorial assumes you to have basic understanding about the tools in Photoshop.
The following tutorial is on how to create a set of web buttons. This tutorial assumes you to have basic understanding about the tools in Photoshop.
In this Adobe Photoshop tutorial we’ll be learning how to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website.
In this easy, step-by-step tutorial you are going to see how to design an interesting professional menu button by using some simple filters, for example Gaussian Blur & Motion Blur.
This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article),you will learn how to design a watercolor effect menu in Photoshop.
This Photoshop CS3 tutorial will teach you how to make a nice-looking and professional header for your website easily.
Shiny glass orbs have been popular fixtures for web interfaces and application skins for quite some time. In this tutorial, you will be going over a technique for making a standard interface orb.
This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.
In this photoshop tutorial you will learn how to create a Clean Vertical Navigation Interface for your website.
Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.
In this tutorial, you will be learning some tricks with the rounded rectangle tool and how to use the rectangular marquee tool to make a stylish navigation box for a web design.
Learn how to create a slick looking web 2.0 website banner / header!
Use a variety of different techniques to make a stunning button.
Learn how to make this simple and clean menu bar.
Learn how to make a nice Web 2.0 style Glossy Button using Layer Styles, also how to make a rollover.
Learn how to make a navigation box with a unique pixel style.
This tutorial will show you how to make a Professional web button and also to use it like a Navigation Bar.
This tutorial is going to go over how to use some tools and effects to make a navigation box for a web layout which you can apply the same techniques to make content boxes etc.
This photoshop tutorial will teach you how to design the Wii header found at Nintendo.com.
Understanding the tutorial below is understanding it’s technique, with it you can draw yourself some graphical user interface for a website. Side navigation, buttons, headers, for instance. All Web 2.0 style.
If you know any more quality navigation tutorials, please add links on the comments! Thank you!
Get The Only Freelancer crash course you will ever need to read!
Dainis Graveris is 23 years old blogger and designer, founder of 1stWebDesigner, now more silently managing everything behind the scenes. He usually hangs out in Twitter tweeting design related links and chatting with people. If you have any questions or feedback that's the best place to start! Cheers!
Thursday, July 21st, 2011 06:44
Nice collection… I like the 11. Creating A Cool 3D Web Design Effect… That is really awesome
Wednesday, June 1st, 2011 09:33
up. Amazing post !
Your tutorial gave me alot of experiences in learning PSD.
Thank alot for sharing, just keep it
Monday, April 18th, 2011 03:14
Amazingly amazing…
those stuff are really cool and you don’t have to be a genius to make them, this is my third day working on photoshop an I feel mysel professional xD, anyway thanks so much, and keep it ahead
Friday, December 17th, 2010 12:46
The designs are really very nice and even the links. But i would like to tell you that please check your site in IE7 as the menu bar on the top is not working correct. The sub menu gets hide behind.
Friday, May 28th, 2010 18:02
that’s great tutorial! thank u..
Sunday, May 2nd, 2010 11:14
I Like it this simple and slick one, I will implement it in my new web design. thanks for your share… :)
Thursday, April 8th, 2010 15:31
These tutorials are shocking.
I can’t believe this site even posts these.
I would rename this page “really_shocking_designs.php/really_really_shocking”
Wednesday, December 9th, 2009 15:02
How do you distribute the words in the navigation menu so there is equal space between each word, when i use the distribution tool in Photoshop it doesn’t do it. I want this: “HOME ABOUT CONTACT FAQ” but i ned up with this: “HOME ABOUT CONTACT FAQ”
Saturday, October 3rd, 2009 23:11
Wow, many of my tuts featured on those lists, thanks everyone for sharing!
Friday, August 14th, 2009 12:36
yes, at first I am trying to research all the tutorials available and then I am planning actually to create new ones in short future:)
Friday, August 14th, 2009 12:34
No problem, good tutorial! and new one is also worthy! thanks for sharing!
Monday, August 10th, 2009 20:02
Hey, great post i just wanted to say, it looks like you’ve fallen victim to the same problem that i had in the fact that this guy over at guidesigner.net has stolen your blog post without any credit :( and hotlinked to your images using your bandwidth. you can modify your .htaccess file to stop him linking to your images. check out my post on how to fix the problem here: http://papermashup.com/plagiarism-and-how-to-stop-image-hotlinking-with-htaccess/
Great blog!
Monday, August 10th, 2009 22:17
Thanks, Ashley! Yeah, seems so – nice advice, I will implement it as well, however still such article steal can be prevented by contacting their hosting providers or even better create really bad reputation, if they will not take of such article!
Good luck to you too, good approach!
Monday, August 10th, 2009 18:05
Just a really awesome one it will help a lot in redesigning my website especially the bookmark tutorial
Tuesday, August 11th, 2009 00:25
Just an update: I’ve contacted his host as you suggested with examples pointing to both of our sites, lets hope to get a resolution.
Tuesday, August 11th, 2009 00:01
No problem Dainis, good luck with it, i may contact his host then, seems like a good approach. You have some great articles on here! i’ll be sure to follow you on twitter also ;)
Ash
Monday, August 10th, 2009 15:25
now this is a very handy article! thanks! :)
Monday, August 10th, 2009 14:55
awesome post ! ….
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
saurabh shah
Monday, August 10th, 2009 14:55
awesome post ! ….
Dainis Graveris
Friday, August 14th, 2009 12:34
No problem, good tutorial! and new one is also worthy! thanks for sharing!
Ashley Ford
Monday, August 10th, 2009 20:02
Hey, great post i just wanted to say, it looks like you’ve fallen victim to the same problem that i had in the fact that this guy over at guidesigner.net has stolen your blog post without any credit :( and hotlinked to your images using your bandwidth. you can modify your .htaccess file to stop him linking to your images. check out my post on how to fix the problem here: http://papermashup.com/plagiarism-and-how-to-stop-image-hotlinking-with-htaccess/
Great blog!
Dainis Graveris
Monday, August 10th, 2009 22:17
Thanks, Ashley! Yeah, seems so – nice advice, I will implement it as well, however still such article steal can be prevented by contacting their hosting providers or even better create really bad reputation, if they will not take of such article!
Good luck to you too, good approach!
gautam hans
Monday, August 10th, 2009 18:05
Just a really awesome one it will help a lot in redesigning my website especially the bookmark tutorial
joão
Monday, August 10th, 2009 15:25
now this is a very handy article! thanks! :)
Dainis Graveris
Friday, August 14th, 2009 12:35
thanks, man – glad you enjoy!
Ashley Ford
Tuesday, August 11th, 2009 00:01
No problem Dainis, good luck with it, i may contact his host then, seems like a good approach. You have some great articles on here! i’ll be sure to follow you on twitter also ;)
Ash
Ashley Ford
Tuesday, August 11th, 2009 00:25
Just an update: I’ve contacted his host as you suggested with examples pointing to both of our sites, lets hope to get a resolution.
Dainis Graveris
Friday, August 14th, 2009 12:34
Thanks! We’ll see how it will go!:)
Dainis Graveris
Friday, August 14th, 2009 12:36
yes, at first I am trying to research all the tutorials available and then I am planning actually to create new ones in short future:)
pawel
Saturday, October 3rd, 2009 23:11
Wow, many of my tuts featured on those lists, thanks everyone for sharing!
chong tham
Wednesday, June 1st, 2011 09:33
up. Amazing post !
Your tutorial gave me alot of experiences in learning PSD.
Thank alot for sharing, just keep it
Hub Geek
Thursday, July 21st, 2011 06:44
Nice collection… I like the 11. Creating A Cool 3D Web Design Effect… That is really awesome
andrew
Monday, April 18th, 2011 03:14
Amazingly amazing…
those stuff are really cool and you don’t have to be a genius to make them, this is my third day working on photoshop an I feel mysel professional xD, anyway thanks so much, and keep it ahead
Karan Vyas
Friday, December 17th, 2010 12:46
The designs are really very nice and even the links. But i would like to tell you that please check your site in IE7 as the menu bar on the top is not working correct. The sub menu gets hide behind.
John
Wednesday, December 9th, 2009 15:02
How do you distribute the words in the navigation menu so there is equal space between each word, when i use the distribution tool in Photoshop it doesn’t do it. I want this: “HOME ABOUT CONTACT FAQ” but i ned up with this: “HOME ABOUT CONTACT FAQ”
Tom
Thursday, April 8th, 2010 15:31
These tutorials are shocking.
I can’t believe this site even posts these.
I would rename this page “really_shocking_designs.php/really_really_shocking”
Danang Sukma
Sunday, May 2nd, 2010 11:14
I Like it this simple and slick one, I will implement it in my new web design. thanks for your share… :)
rateeeh
Friday, May 28th, 2010 18:02
that’s great tutorial! thank u..