Photoshop Tutorial - Make a Navigation Bar.

2008-03-21T15:22:00.000-07:00

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.

Welcome

2008-03-21T14:50:00.000-07:00

Welcome to the Paradox website.

This website was made so that I can try to teach you:
- Photoshop Skills
- Dreamweaver Skills
- Animation Skills (Maybe)

The way I will try to teach you is by using a range of materials including; Pictures, Videos, Text and Voice. I must add that I have only been using Dreamweaver for a short while but I am confident in my skills using Photoshop and Flash (Animation). My tutorials will be ranked by the difficulty of the content.
- Beginner *
- Advanced **
- Expert ***

My tutorials will be added weekly or as I make them. I will also make specific tutorials on request so don't be afraid to ask. Please be patient when making a request as I am still learning to use Dreamweaver. This will all change when I start my Interactive Media course in September. There I will learn Web Design, Coding and Advanced Animation. This means that my tutorials will get better as the time goes on.

About the Creator

Peter Hewett is a 16 year old boy who live in Wales, UK.

Peter did one year in an Animation Course provided by his high school after showing a raw interest in animation and art. This course was run by "Media 4 Schools". There he completed a range of tasks including:
- Small pencil drawn animations.
- Flash based animations.
- 3D animations.
- A large scale project making a 30 minute film. This task was completed as part of a group.

Peter applied for the Interactive Media course and was accepted conditionally meaning he has to obtain 4 A-C grades at GCSE including English. If Peter does obtain these results he will go on to do a two-year course in Interactive Media at College.

[Paradox] Tutorials

Photoshop Tutorial - Make a Navigation Bar.

Welcome