Metal Navigation Bar

In this tutorial, you will learn how to create the metal navigation bar of your dreams! Start off by opening up a new 72 dpi image with a white background. The size of the image should be big enough to fit your navigation bar.

1. After your new image is up, right click on the Rectangle Tool and selected the Rounded Rectangle Tool from the flyout menu. Above in the options bar (Window > Options if you don't have it up already), set the Radius to about 15 or 20.

2. Now that you have your settings in order, make the shape of your navigation bar.

3. After you have made your shape, create a new layer, and switch to the Paths Palette (Window > Paths). Right click on the Work Path and choose "Make Selection" from the flyout menu. Set the Feather Radius to 0 and click ok.

4. Go back to the Layers Palette (Window > Layers) and fill in your selection with the Paint Bucket. The color you fill it with should be black.

5. Now, right click on the layer that you just used the Paint Bucket on and select "Blending Options" from the flyout menu. Choose Drop Shadow and use these settings:



Use the following settings for Inner Glow:



Use the following settings for Bevel And Emboss:



Use the following settings for Contour:



Use the following settings for Satin:



Use the following settings for Color Overlay:



Click ok and then look at your nav bar, it should look something like this:



6. Now that you have your navigation bar, make a new layer and grab your Pencil Tool. The Pencil size should be 1 pixel. Draw lines from the top of the nav bar to the bottom of it. This will be the line that divides each section of your nav bar, so draw as many lines as you need. If you go outside of the nav bar while drawing your lines, don't worry, we will fix that within the next couple of steps. Once you are done drawing your lines, go to the Layers Palette and set the Blend Mode to "Multiply" and the Opacity to 50.

7. Duplicate the layer you were just working with (Layer > Duplicate Layer) and set the Blend Mode to "Soft Light" and the Opacity to 100. Now, Invert the colors by hitting Ctrl + I on your keyboard. Grab your Move Tool (V) and hit the Right Arrow key on your keyboard one time.

8. Finally, Ctrl + Click the layer with your nav bar on it. This should bring up the selection of your nav bar. Hit Ctrl + Shift + I to invert the selection. Now click on the layer that has your lines on it and hit Delete one time. Now click on the second layer of lines and hit delete again. This should take care of lines that went outside of the nav bar. All that is left to do now is add your text. Here is my final image: