Prerequisite Knowledge

This tutorial teaches you how to design slightly more complex website navigations 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 to graphic design. We also recommend that beginners read and practice our simple navigation ideas first to be able to easily follow and create these advanced designs.

Glass Effect navigation bar 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.

The below images illustrate the navigation designs you are going to learn:

Glass Effect Navigation

Advanced Tabbed Navigation

Designing the Glass Effect Bar

Step 1: Draw a rounded rectangle using Rounded Rectangle Tool and set the Fill Color to #006699 and Stroke Color to none. While the Rounded rectangle is still selected, choose the following option:a. Select the Fill color go to Fill category >> select Gradient >> Choose Linear option.b. Now click the Fill color, and then click on the small color rectangle that is on the left side and set its color to #006699.c. After that, click on the small color rectangle that is on the right side and set its color to #00CCFF. The image below shows the linear effect:

Step 2: Again draw another Rounded Rectangle place over the previous Rounded Rectangle and set the Fill color as #FFFFFF and stroke as none.

Step 3:
Select the Rounded rectangle and do the following:a. Select the Fill color go to Fill category >> select Gradient >> Choose Linear optionb. Now click the Fill color, and then click on the small color rectangle that is on the left side and set its color to #FFFFFF and set the Opacity to 58.c. After that, click on the small color rectangle that is on the right side and set its color to #FFFFFF and set the Opacity to 0. See the illustration below that will show we have placed the rounded rectangle:

Using the above navigation idea we have designed a website's header portion as shown below. Please read our Rollover Images Tutorial to learn how to make the navigation bar's rollover button links active.

Tabbed navigation bar using Adobe Fireworks CS3 or below

Open Fireworks and create your base design over which you are going to place the navigational bar.

Designing the Tabbed Navigation

Step 1: Create a rounded rectangle using Rounded Rectangle Tool and set the Fill color to #663399 and Stroke Color to #663399.

Step 2:
To create a tab from the rounded rectangle, drag and flatten the bottom two corners (learn how to flattened the bottom two corners) along with pressing the alt key. The tab design will look like this:

Step 3:
Duplicate the first tab and create four more tabs next to it with Fill color as #663399 and Stroke Color as #663399. The tabs should now look like this:

Step 4: Draw two curves (learn how to draw curves) using Pen Tool over the tab; set the fill colors as #663399, #8659AF and stroke color as #663399. Select the Pen tool in the Tools panel. Click to place the first corner point over the tab. Move to the location of the next point, then click and drag to produce a curve point. Each time you click and drag, Fireworks extends the line segment to the new point. To close a path, click the first point you plotted. The beginning and end points of a closed path are the same. You can modify curved path segments by dragging their point handles. In the image below see how we have use the pen tool to draw a curve.

Using the above navigation idea we have designed a website's header portion as shown below. Please read our Rollover Images Tutorial to learn how to make the navigation bar's rollover button links active.

Software Required

Adobe Fireworks (Macromedia Fireworks prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial requires only basic tools of Fireworks to create the navigational designs, using mostly any version should be fine. If you are using the CS4 version of these software please read Navigation Design Ideas for Advanced Users.