How To Create a Stylish Navigation Bar In Adobe Fireworks

 

I love Photoshop. I guess we all do. But there are some times when I like to design using Adobe Fireworks instead. After all Fireworks was created with web-designers in mind and it allows us to quickly prototype and design for the web, so let’s see what it can do.
I’ve created this simple yet modern navigation bar in Fireworks, and I’ll walk you through the steps necessary to create something like that. In the event there are some windows and panels you don’t see opened on your computer, simply go to the ‘Windows’ menu and open them.

New Document And Basic Settings

The first thing you’ll want to do is create a new document. I made mine 1200x600 just so I have enough room to work and feel comfortable. Set the background color to white.

Our nav bar will be 960px wide and 80px high. I don’t like guess work and no matter the software I always prefer to work with a grid. So let’s set this up. In the ‘View’ menu, go select ‘edit grid’ like in the screenshot below. You will also want to activate the grid by selecting ‘show grid’ and also activate ‘snap to grid’.

Now once you’ve opened the ‘Grids and Guides’ window, set both the horizontal and vertical values to 20px.

Now you should have an empty white canvas that’s 960x80 with a 20px grid, like this:

Let’s Get Started

Now once we’re setup, the first thing we’ll want to do is select the ‘rounded rectangle’ tool in the Tools window.

Then simply draw a rounded rectangle that’s 960px by 80px. Since we’ve selected ‘snap to grid’ you should be able to do that pretty easily. Here’s what you should get:

Now, Fireworks will give the rounded corners a 20px radius by default, let’s change this to 12px. Open up the ‘Auto Shape Properties’ window and select your rounded rectangle, then change the 20px values to 12px.

Now we have a flat rounded rectangle, we need a gradient there!

Gradients And Colors

The rectangle needs to have a linear gradient. Doing this with Fireworks is just as easy as with Photoshop.
Select the rectangle, then go in the ‘Properties’ window and select ‘Gradient’ and then ‘Linear’ from the drop-down menu

Now we need to change the gradient colors. Click on the color palette tool right next to that drop-down menu, and make the top value #333333 and the bottom one #000000 so we get a nice smooth gradient.

You should have something like this:

Now let’s add a subtle crosshatch texture to it. Still in the properties window, select ‘Crosshatch’ from the Texture drop-down menu. You may want to select another texture but I like this one :)

Then change the amount of texture to 2% (we want this to be subtle).

Add Some Text/Menu Items

For the actual menu items I’ve use one of my favorite fonts, League Gothic, for the bigger text and Arial for the sub-text.

Let’s add some text! As you can see in the following screenshot, I’ve got 8 navigation links in the menu. Make sure each of them is spaced evenly and centered. Also make the text 28px bold. Change the color of this text to #999999. Then switch the color of the ‘About’ link to #ffffff. This would be our hover state.

Then Select all that text and in the Properties Window, click on the + sign to add a Filter and select Shadow And Glow -> Drop-Shadow, and put the following values:

Now let’s add the sub-text. Select the Text Tool again and go select Arial from the drop-down ‘Font’ menu in the Properties window. Make sure the font size is set to 12px bold.
Add the text like in the following screenshot:

Of course make sure it’s aligned perfectly with the bigger text above.
Now we want to add a subtle linear gradient to this sub-text. Select all of the sub-texts (shift+click) and then click the ‘Fill Color’ panel in the Properties window, click on ‘Fill Options’, select Linear Gradient from the drop-down menu, and then click on ‘Edit’ to go change the colors. Click on the left handle and make this one #996699 then make the right one #996600.

Then change opacity to 40% for all of them except the ‘who we are’ sub-text.

You should have something like this:

Subtle Lines

Now let’s add some vertical separator lines between each menu item/block.
Select the ‘Line Tool’ from the Tools window and draw a vertical line.

Then select that vertical line and make sure that it doesn’t bleed outside of the rounded rectangle. Check the Properties Window and make the line the color black like in the following screenshot:

Now, select that line you just did and copy-paste it between each menu item and make sure they’re all spaced evenly.
Check the following screenshot to see what I mean:

Let’s Group Things

Now that we have our rounded rectangle, gradients, text and separator lines it would be a good idea to group a couple things together and better organize our document.
The first thing you’ll probably want to do is select all the text and group them, then select all the separator lines and group them also. To Group items together you can either use the cmd+G shortcut or go in the ‘Modify’ menu and select ‘Group’.
Then in the Layers Panel, edit the group names and lock them like in the following screenshot:

We’re almost done now! Select the rounded rectangle and then add a 1px white outline.

Then let’s apply a shadow to that rounded rectangle. In the ‘Properties’ Window, add a filter by clicking on the + sign and then select Shadow And Glow and then Drop Shadow from the drop-down menu.

Then apply those values to the shadow:

• Distance: 1
• Opacity: 65%
• Softness: 12
• Angle: 315
• Color: #000000

Background Image

I’ve used a background image from our Bokeh Backgrounds Set and tweaked the levels and hue a bit and added an inner shadow (for presentation purposes.)
Here’s the final result (click to enlarge):

So there you have it! It A simple but nice looking navigation bar created with Adobe Fireworks. ;)