1. Creating the main navigation bar.
Ok, let us get started. Create a new image using the dimension 800 x 600. Set the background color to white. You can change the background depending on you web site color. Create a new layer, Layer > New > Layer… (Shift+Ctrl+N). Using the Rounded Rectangle Tool 
create a rectangle using the dimensions below. Change the foreground color to #525253.
With that, you should have the effect below.
2. Using the pen tool to create the rectangle shape.
Click on the Pen Tool 
using the options below.
Create the Anchor point as shown in the image below.
Complete the selection, Using the Pen Tool Right click on the selection as shown below and click Make Selection. The Make Selection rendering should be set at Feather Radius: 0 With you path converted to a selection press the delete key. The outcome is shown below.
3. Applying the gradient and blending option.
Click on the Gradient Tool 
using this settings below.
Apply the gradient to the rectangle from top to bottom, make sure the rectangle is selected before applying the gradient. This will give you the effect below.
Right click on the rectangle layer and click Blending Options. Now add the Blending Optionssetting below.
Click ok to apply the settings.
4. Creating the Tab buttons.
create a rectangle using the dimensions below. Change the foreground color to #9ad346
With that, you should have the effect below.
This layer should be under the main layer with the navigation bar. Just position it to get the effect below.
Tutorial by Pixel Digest
 |
 |
 |
 |
 |
 |
 |
 |
Latest on zaBox
Sponsors
User Links Panel User Links Friends We recommend Sponsor
by 
January 15, 2008 at 9:10 am
This is really neat. I will be using this in the near future. Thanks for sharing!
March 6, 2009 at 6:47 am
I successfully made my own version of your toolbar, but when I put the link tags in, the images get spaced out and no longer look seamless. how do you fix that? thanks
BT
March 6, 2009 at 12:16 pm
Hey Brian,
You would have to contact the tutorial’s author for that. You can find his email address at the end of the original tutorial : http://www.pixeldigest.com/navigation_menu.html . His name is Mark.