Website Navigation Design for Beginners

Navigation design ideas and step-by-step design with Fireworks

In this tutorial you are going to learn simple navigation ideas using basic techniques and predefined styles in Fireworks. Learn how to easily create pleasant navigation elements. We will show you how to create the following simple website navigation designs:

Horizontal box navigation using solid colors

Horizontal bar navigation using inbuilt styles

Vertical buttons navigation using inbuilt button

Simple tabbed navigation using graphics from inbuilt button

---

Software Required

Adobe Fireworks (Macromedia Fireworks prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial covers an inbuild core function of fireworks to create simple navigation bars, using mostly any version of these software should be fine. If you are using the CS4 version of these software please read Navigation Ideas: Fireworks CS4 Tips for Beginners.

Prerequisite Knowledge

This tutorial teaches you how to create simple navigation bars using Fireworks and thus assumes you are familiar with some design software, even if you are new to Adobe Fireworks. However be assured that our detailed instructions can be followed by even a total novice.

---

You Are Here ::: Home >> Free Tutorials >> Fireworks Tutorials >> Website Navigation Design for Beginners

Navigation Design Ideas for Beginners with Adobe Fireworks CS3 or below

Open Fireworks and create your base design over which you are going to place the navigational bar. Or you can first create the navigational elements and then design around it.

Horizontal box navigation using solid colors

• The above example shows how we have created the header portion using simple navigation (Click for the Fade Image tutorial). Draw a rectangle using Rectangle tool set the Fill Color as #EB82AB and Stroke Color as none. Now divide the rectangle using Pen Tool set the stroke color as #003466 and fill color as none. Note: Make sure that the Stroke category is Pixel hard (Pencil>>1-Pixel Hard).

Horizontal bar navigation using inbuilt styles

In the above example we used Style 43 and using Pen Tool we have divided the Rounded Rectangle and then we have applied drop shadow. Click on the tiny blue circle with "i" next to the Drop Shadow filter (Edit and arrange live filters button) and set the following values for the filter: Opacity – 65%, Softness – 2, Angle – 270, Distance – 3, Color - #FF9900. Draw two rectangles set the Fill color as #CC0000 and #FF9900. Now place the Rounded Rectangle in the rectangles. The predefined Styles are related with a number. The steps to create objects with inbuilt styles are as follows:

• Step 1 - Create navigation bar: Create a navigation bar using Rectangle or Rounded Rectangle.
• Step 2 - Apply inbuilt style: To apply the styles, click on the object and go to Window > Styles to open the styles panel. Now select the Pointer Tool and select any style as you like.
• Step 3 - Divider lines: If you want to divide the navigation use Pen tool and draw a line. Select the line using Pointer Tool and apply Drop Shadow (for some navigation you might not need to apply drop shadow).
• Step 4 - Apply Shadow: On the right side of the properties window, you will find filters, click over the + symbol and choose Drop Shadow from Shadow and Glow. Click on the tiny blue circle with "i" next to the Drop Shadow filter (Edit and arrange live filters button) and set the following values for the filter: Opacity – 65%, Softness – 2, Angle – 270, Distance – 3, Color - #000000 (you can change the values according to the shadow). The color may vary according to your navigation.

Vertical buttons navigation using inbuilt button

• Fireworks has symbol libraries in the Edit >> Libraries submenu from which you can import Animation symbols, Bullet symbols, Button symbols, Halo Lite, Navigation bars and Themes. Using these symbols, you can quickly create a web page containing advanced navigation bars.
• Go to Edit >> Libraries and select a buttons symbol. The buttons has collection of 2-, 3-, and 4-state Fireworks button symbols. To import button symbols into a document’s Library panel, select the Fireworks button symbols and click Import. Now the imported symbols appear in the Library panel. We have selected 2-State Button symbol. See the image below that will show how the imported 2-State Button symbol will appear:

  

• Click on the button symbol to edit the button. You can edit a button slice only in the Active Area tab of the Button Editor. Now double-click the button instance in the workspace, click the Active Area tab and change the width as 167 pixels and height as 30 pixels. After making the changes to the button click Done.
• To edit the text, click on the button symbol and change the text in the Properties Inspector. The image will look as below:

  

• Arrange the button symbols and change the text as shown below: Now you have quickly created a simple navigation using button symbols.

  

Simple tabbed navigation using graphics from inbuilt button

• Now you are going to create another simple navigation using Fireworks. Go to Edit >> Libraries and select a buttons symbol. To import button symbols into a document’s Library panel, select the Fireworks button symbols and click Import. Now the imported symbols appear in the Library panel. We have selected 2-State Button symbol. See the image below that will show how the imported 2-State Button symbol will appear:

  

• Double-click the button instance in the workspace, copy the button graphic in the Over tab then close the 2-State Button window and paste the button graphic in the workspace. Now the button will be in vector format, so that you can change the colors using Pointer Tool.
• Select the button using pointer tool and change the Fill Color as #006699 and #003366. See the image below that will show how we have changed the colors:

  

• To edit the text, click on the text and change the text in the Properties Inspector. Select the text; choose font size - 11, color - #000033, Anti-aliasing level - Strong Anti-Alias.
• Duplicate the first tab and create three more tabs next to it with Fill Color as #99C2D6 and #006699. Click on the text and change the text in the Properties Inspector. Select the text; choose font size - 11, color - #006699, Anti-aliasing level - Strong Anti-Alias. Now arrange the four tabs as shown below:

  

• Use the above navigation idea in a regular website design as the header navigation bar or use it to display tabbed content as in the example belows:

  

  

Congratulations! You have now learnt a couple of simple navigation techniques.

Related Tutorials: Drop Down menu | Advanced Navigation Ideas

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!