Photoshop Tutorial - Make a Navigation Bar.

Making a Navigation Bar in Photoshop.

In this tutorial I will be using Photoshop CS2.
Ok Lets begin.

Step 1.

Open up Photoshop and make a new document. (File>New)









Your New image should be; (up to 600px) x 100px, Transparent Background.

For this I will be using 400px x 100px with a transparent background.


Step 2.

Hold CTRL+SHIFT and press N. Name your new layer "iconbase" (No Capitals).








Step 3.





Depending on what shape you want your buttons to be make that shape about 1/5 the size of your workspace.

Step 4.

Now, Press CTRL+J 4 times to duplicate your first shape. Grab your last copy and pull it to the opposite side of your workspace. Then click your top layer, Hold shift and click your bottom layer. This should select all your layers you have made so far. Use Layer > Distribute Layers > Left Edges to evenly space all your buttons. With your buttons still selected Hold CTRL and press G to group your images. Name your group iconbases.

Step 5.

With all your images now evenly spaced we can work on the detail. Go into your group "iconbases" and select "iconbase" this should select just the FIRST of your iconbases. You can add whichever Layer style you like to your iconbase using (Layer>Layer Style).
For my iconbase I will use a "Gradient Overlay" and a "Bevel and Emboss" effect.
Now you might be thinking "I did that but I still have to do all that for the next buttons" Well you don't.
Right click the layer you styled up, then select "Copy Layer Style" then hold CTRL and select the other layers you haven't edited. Now right click and select "Paste Layer Style". This will make all your iconbases look the same.

Step 6.

Now, we will make the images for your links.
Create a new layer (CTRL+SHIFT+N) Outside of your group. This will be your "home" button detail.
Now grab your "Rectangle Tool (U)" and make a small rectangle inside your first iconbase. This will be the base of your home icon. Now make another new layer. This time grab your Polygon tool and select "3 sides". Make sure "STAR" is Unchecked. Now hold shift and start moving your mouse around until your triangle "roof" is level with the top of your rectangle. Press V to select the Move Tool and make your house look like a home.
After you have done this click the two of your "home" layers and press CTRL+E to merge them.
Now you can add a gradient overlay in the Layer Styles tab.

Step 7.

Now, for the Gallery Button.
Make a new layer and grab your line tool.
Draw a straight line down the center of your second iconbase. Now make a horizontal line and make a "+".
Make a new layer, This time grab your Rectangle Tool.
Draw a single rectangle in the top left hand corner of your "+". Now hold ALT and pull your rectangle shape to the bottom left corner of your "+". This will mean you have 2 rectangles on the left side of your cross. Now press V to make your two rectangles selected. Hold ALT and pull them to the right side of your cross, making 4 rectangles. One in each corner.

It should look like this:

Rec Rec
__________

Rec Rec

Now add a gradient overlay like I showed you before.

Step 8.

Now you can make icons for your other buttons. Some ideas I had are:
- Contact button = Make an envelope shape and angle it to make the effect of moving mail.
- Links button = Make a hand shape (google one) or write "LINKS" in a cool font.
- F.A.Q button = A simple button - Use the Text Tool to make a "?" inside your shape.

Step 9.

If you did a good job of making your images look like you dont need text labelling, then ignore this step.

For everyone like me who needs the text, grab your text tool. Pull a text box the length of your first iconbase. Make your font size 6 and use a pixelfont (Font easily read when small). To label your buttons you may want to zoom in. Type your button names underneath your icons in your iconbase box. When you have done this to all your buttons, Group them (CTRL+G).

Step 10.

If you haven't done this already - Save your work.

By now your navigation bar should be looking pretty sweet so you can add optional layer styles to your work. Be careful not to overdo it.

To add your navigation bar to another layout firstly you need to open your layout and your navigation bar.

In your navigation bar window, click the Layers tab. Select All of your layers and right click. Select Duplicate Layers.

A box will appear giving you options. You will see: (navigation.psd) then a dropdown bar.
Click the dropdown and select your layout from the list.

Once in your layout Group your navigation (CTRL+G) and name it "navigation".

Press V to move your navigation bar around your layout.

Congratulations you have made your first navigation bar.

Soon... Making a layout in Photoshop and Publishing using Dreamweaver.

My Finished Piece.

Your finished piece may not look like mine. All I did was mess around with Layer Styles and instead of the Rectangle Tool I used Rounded Rectangles.
Your Navigation bar can also be made with Circles and Polygons.