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.