Photoshop Tutorials » TabbedNavigation Tutorial

Step 1 - Starting Out
First off I want to say that a tabbed navigation is one of the best ways you can enhance your website out. It is very modern, and makes a great turnout for the simplicity of it. That said, make a new document in Photoshop with 600x70px for the size. Step 2 - Creating the Base
Select the "Rectangular Marquee Tool", and create a selection with the size 600x35, just like in the image below. Create a new layer. Rectangular Marquee Selection Next, take the paint bucket tool and fill it with a light blue color. Step 3 - Tab Base
Create another new layer. This will be our tab base. Place it under the blue 600x35 rectangle you just made. Next, take the "Rounded Rectangle Tool", and with a radius of 10px, draw a rectangle similar to the size of the one below. Move it accordingly until you get the position wanted. Step 4 - Tab Base Blending Optionse
Right click the tab layer, and click "Blending Options". Follow the blending options in the animation above, and you should get an effect like below. If not, double-check your blending options. Step 5 - Duplicating the Tabs
Right click the tab layer, and click "Duplicate Layer". Once you duplicate it, move the tab to the left so that the right white stroke aligns with the left white stroke of the previous tab. Repeat two more times. Step 6 - "Active" Tab
Select the layer that corresponds to the second tab, and then right click and go into blending options again. Follow the animation to get the correct effect we're looking for. Depending on the blue color, you may have to select a different gradient color. Do this by double-clicking on the Gradient picture. Then, double-click on the black to white gradient fill. Like it says, double-click on the pointer to bring up the color palette. With this open, you should be able to have an eyedropper tool automatically on. So instead of finding the color, you can just click on the blue you made in that 600x35 rectangle. This is the easiest way to match the color to the rectangle color. Optional: If you want the tab to stick out more, change the "Outer Glow" size to 10px instead of 4px. This will increase the size of the outer glow, which will give the shadow a wider span. Step 7 - Finishing Touches
With the same blue tab still selected, select the "Pencil Tool". With a size of 1-2px, draw a line going straight across the image to give it more depth (the reason we did it on the same layer, is that we want to keep the blending options present, that way there is an outer glow still present to give the shadow effect.) Step 8 - Adding Text
Choose a nice font to go along with it, and with a black text color selected, being typing out your links. Once you do that, change the blending mode of the text layers to "Overlay". This will give it a see-through effect for the base tabs, and a blue color for the active tab. If you want the active tab to stick out more, duplicate the text layer for it once. This will increase the blue color into a darker blue, which will make it easier to read. Enjoy your new tabbed navigation! End! Job well done!

Photoshop Tutorials » TabbedNavigation Tutorial