Tabbed Navigation Bar

With the selection still active, hold down Ctrl+Alt and click on the shape and drag it to the left or right to duplicate the selection. Make a copy of the selection for each tab you’re making. Space them a few pixels apart. When you’re done, hit Ctrl+D to release the selection.
Adobe Photoshop Tutorial - Tabbed Navigation Bar - Fig. 6

Now go to the Layers palette and click the “Lock transparent pixels” icon. Now take your eyedropper and sample the dark color from the bottom of the nav bar as your foreground color and sample from the top, highlighted portion for your background color.

Once you’ve done that, select the Gradient tool and choose the Foreground to Background gradient type (the default). Now drag from the top of one of the tabs down to the bottom.

Adobe Photoshop Tutorial - Tabbed Navigation Bar - Fig 7

Now we need to move the tabs into place and then hit Ctrl+Alt+[ to move the tabs layer to the bottom of the stack. Be sure to move the tabs down far enough that the bar covers the bottom rounded corners.

Adobe Photoshop Tutorial - Tabbed Navigation Bar - Fig 8

Next, Ctrl+Click on the “bar” layer and create a new layer between it and the “tabs” layer. Hit Ctrl+D to bring up the Feather Selection dialog and enter an amount of 2. Now fill this selection with black and finally, group it with the “tabs” layer, the same way you grouped the “bar highlight” layer with the “bar” layer.

Adobe Photoshop Tutorial - Tabbed Navigation Bar - Fig 9

Finally, we just need to add the text for our tabs. I’m also going to give my text a slight 2px / 100% opacity drop-shadow just to make it pop out a little more.

There you have it, the finished navigation bar.

Adobe Photoshop Tutorial - Tabbed Navigation Bar - Fig 10

If you like, you can download the PSD file for this tutorial.

Pages: 1 2

Added Thursday, September 14th, 2006 at 10:48 pm under Interface Elements.