Free Online Classes

Learn how to create a tabbed navigation bar using shapes and layer styles. This Photoshop tutorial is idea for the beginner web designer who wants to learn how to create a basic navigation bar with tabs and apply layer styles.

Step 1

Let's start out by creating a new file. I used a 940x90 pixels canvas set at 72dpi, and I filled my background with a black color. Now select the Rounded Rectangle Tool, above your screen under the options palette choose Fill Pixels, set the radius to 14 px and check anti-aliased. In a new layer and draw a rounded rectangle with #C6E97A color shade and 134×63 px dimensions. Then cut half of the rounded rectangle to make the first tab design.

Step 2

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Gradient Overlay blending options to your green tab layer.

Step 3

Select the Horizontal Type Tool and set the font family to Verdana, bold, 14 pt, none and #656565 color shade. In a new text layer type your first navigation link on the green tab.

Step 4

In a new layer create a gray tab design with #818181 color shade.

Step 5

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Gradient Overlay blending options to your gray tab layer.

Step 6

In a new text layer type your second navigation link with a white color shade.

Step 7

Now add the rest of your navigation links with its own gray tab.

Step 8

Create a new layer and draw a long rectangle with #B6E35F color shade below your tabs, make sure the green rectangle is connected with the green tab. Then under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Gradient Overlay blending options to your green rectangle layer.

Final Results