adv banner
Photoshop  Home Photoshop Web Layout Tabbed Navigation
rss

Tabbed Navigation

Author: Imgry.com More by this author


Step 1 - Create Your Document

This tutorial will teach you how to make a nice tabbed navigation bar. Open up a new document 700x300,  set the background to white. This will be the background for your menu bar. Create a new layer by going to Layer>New>Layer (Ctrl+Shift+N).

image 1

Step 2 - Create Your Menu

Press D to set your colors to default (black foreground and white background), next select the Rectangular Tool and make a selection across the whole document, about 25-50px high. This is the actual height of your menu.

Click to enlarge
Click to enlarge

Step 3 - Add Some Style

Right click the layer in the layers palette and go to Blending Options. In blending Options use the following settings for Bevel and Emboss as well as Gradient Overlay.

image 3

Step 4 - Create a Selection

Create another new layer (Ctrl+Shift+N). Next, Ctrl+Click on the rectangle layer on the layer palette, this will make a selection of it. Now go to Select>Modify>Contract, use 2px to slim down your selection.

image 4

Step 5 - Brush a Little

Now with a white soft brush, brush the selection like so (On the empty layer). Set the layer mod to overlay and lower the opacity to 65% in the layer panel. This is going to serve as a glossy 3D effect for your menu bar, so make sure you brush it the way you want it, because you may have to go back later and correct it if you don't like it the way you create it now.

Click to enlarge
Click to enlarge

Step 6 - Add Your Text

Add the text you want to your navigation bar, put about 15 spaces between each word. Make the text white (#FFFFFF). This is what mine looked like after I added some standard text that would be on a website navigation bar.

Click to enlarge
Click to enlarge

Step 7 - Add Your Tabs

Create a rounded rectangle covering the "Home" text like so. Change the color of the "Home" text to Dark Grey so it is visible over the tab. There you have it!, tabbed navigation. The tab is meant to show you what page is selected, you can change it to any text on the navigation bar.

Tabbed Navigation Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: imgry.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Tabbed Navigation"