In this tutorial im going to show you how to create some simple, smart 3d looking tabbed navigation in Photoshop. This type of tab would be used on the 'over' state when you come to build your actual site. 
NOTE, you will need to click the images below to view them full size.
Step 1
To start either open up the web layout in Photoshop which you wish to apply this technique to, or make a new document. For this tutorial i will be applying this style of navigation to the header you see below.
Step 2
Now we need to add the text layer. Take the text tool and type out your navigation. Im using the font Blue Highway. This is a good time to get familiar with the 'Character' panel. In here you have an array of options. With Blue Highway the letters are spaced quite far appart. I can get round this by setting the 'tracking' of the text (basically the spacing). Below are my character settings along with the header so far.
Step 3 - Making Those Tabs
Now its time to get making the tabs.
• Make a new layer behind your text layer
• Grab the rectangular marquee tool
• Draw out a shape around the first link (Home) similar to that of the one below. Make the selected area longer than you want the actual tab to be - you'll see why later.
• Go to Select > Modify > Smooth and set the smooth to 5px.
• Click Layer > New Fill Layer and fill it with a dark grey, but not black. You should now have a tab that looks like the one below - its pretty plain and the edges are a bit jagged and we need to chop off the bottom, but we can sort that out.
Step 4
We need to smooth those choppy edges so making sure your tab layer is selected click Filter > Blur > Gaussian Blur and set it to about 2. Then to smooth out this blur press CTRL + L to bring up 'Levels'. Drag the two arrows into the middle as shown in the image below. Do this until the tab returns to its normal state, but you should notice the choppy edges are eliminated.
Step 5
Making sure your tab layer is selected draw over the part of the tab you want to delete with the rectangular marquee tool and press backspace - and its gone!
Step 6
We need to make our tab look a little bit 3d or for want of a better word, dare i say it glossy. Draw out a selection like the one below underneath your text layer, but above the initial tab your just created. Now fill it with a darker colour than that of your actual tab. This will make it look slightly 3d and more interesting.
Step 7
You might think your done, but you can add a slight outerglow to make the tab stand out against the background. This technique is particularly useful if you have a stock image behind the tab.
• select your first tab layer and add a layer style. This menu can be found at the bottom of the layers palette (shown below).
• click outer glow and use the settings shown below.
The Outcome
And there you have it, a 3d looking tab created in a few easy steps. You need to repeat these steps to apply tabs to the other navigation.
