Full Navigation(Part 1)

HavenFX is proud to be one of the first websites to bring you the tutorial on how to make a complete navigation. This is a long tutorial that is detailed. Pay close attention so you don't get lost at points. Basic Photoshop knowledge is required. Step-by-step instructions proceed..

1) Let's open up a new image, 150 x 200. Fill this background with the color #595959, just to set a good color scheme. Make a new layer and name it "Mini Button."

2) Select the Rectangular Marquee Tool and select a small rectangle like the one displayed below. Fill it with #3E555E. (Note: In the image, the rectangle is drawn toward the top of the image. As the tutorial progresses, you might notice it go down some. This is because I didn't realize how much space I needed at the top while making this tutorial. If you want to go ahead and put it a little further down to save time, feel free to).

3) Make a new layer and name it "Mini Button Highlight." Now, go to the Gradient Tool. Make sure your foreground color is still the same as the rectangle (#3E555E). In the Gradient Tools Options bar at the top, select Foreground to Transparent. Now, go to the Layers Palette (Windows>Layers). Ctrl + Click on the "Mini Button" Layer to get the rectangle selected. Click back on the "Mini Button Highlight" Layer. Holding SHIFT, drag your gradient from the bottom of the selection to around the middle. Go back to the Layer's Pallette and set the Mode on the "Mini Button Highlight" layer to Color Dodge. You should end up with something like this when all is said and done:

4) Proceed to the Layer's Pallette again. Select the original "Mini Button" layer and go to Blending Options (or click on the 'f'). Click on Bevel and Emboss and apply these settings:

5) Don't click OK yet. Go down to Stroke and set the color to black, width to 1 px, and position: inside.

6) Select the "Mini Button Highlight" layer and hit Ctrl + E or Layer> Merge Down. Now, to be organized, go to your Layer's Pallette, click the file folder icon to create a new layer set. Name it "Buttons." Go back to the merged "Mini Button" Layer and duplicate it 4 times. You should have 5 total buttons after this. Drag all the layers onto the "Button" Layer Set. The 5 "Mini Button" layers should now be under the "Buttons" set. You may also rename each layer to keep track of them easier.

7) It may get confusing here so pay attention. All of the duplicate button layers should be stacked on top of each other at this point. We don't want that so we have to move it! Select one of the "Mini Button" layers and nudge (move by keyboard arrows) that layer down 5 times below the above button. (Ex: Nudge until the 2nd button is 1 pixel over the bottom of the 1st button so that the black stroke line in the middle is just one line and then hit the Down Key 5 more times. Hope that helps!) Do this process to each button. Refer to the picture below for a clearer reference: