After we saw how to create vectorial backgrounds, this tutorial will show you how to create a good looking navigation bar for your website layouts using Adobe Photoshop CS3.
We will start off by drawing a rounded rectangle with a radius of 10pixels.
Rasterize this layer and using the rectangular marquee tool cut the rounded rectangle in half (select the portion of the rectangle you wish to delete with the rectangular marquee tool and hit DEL on your keyboard) so it looks like this:
Duplicate this layer and with the rectangular marquee tool cut the lower portion some more.
Move this duplicated layer to the right.
Change the background to black.
Select the layer containing the first shape and go to the blending options.
Let' s add a nice gradient overlay and a light stroke:
Let' s add a layer style to the other tab too:
With the rectangle tool we will now create a new level containing a bar with the same green color of the bottom part of the gradient of the first tab.
Position this layer above both tabs and arrange it so it looks like this:
Create another layer with a thinner bar, make the bar a more vibrant green:
That' s already rather nice, isn' t it?
Let' s add some web 2.0 effects so make it look even better.
Create a new layer and position it above the first tab.
Use the rectangular marquee tool to select about half of the tab and fill it with any color.
Go to the blending options and add a default black to white gradient.
With the wand tool active, select the layer containing the green tab and click anywhere on the background.
Select the layer you just created and hit DEL on your keyboard to give this layer the same rounded corners as the tab:
Create a new empty layer above the layer containing the gradient and merge the two by selecting both in the layers panel and hitting CTRL+E on the keyboard.
Change this layer' s blending mode to "Overlay":
Repeat the process for the second tab, but invert the gradient direction:
Great!
The only thing that’s left to do is duplicate the layers that form the silver tab and add some text!
Feel free to use the navigation menu included in the download!
I attach the PSD and FLA file that demonstrates how to use this menu using Flash CS3 and Actionscript 3.0 .