How To Create a Stylish Navigation Bar In Adobe Fireworks

Posted Posted by hacking tips in , Comments 0 comments

 

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.
Create New 
Document
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’.
Setup The 
Grid
Now once you’ve opened the ‘Grids and Guides’ window, set both the horizontal and vertical values to 20px.
Grid 
Values
Now you should have an empty white canvas that’s 960x80 with a 20px grid, like this:
Empty White
 Canvas With Grid

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.
Rounded 
Rectangle Tool
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:
Rounded 
Rectangle
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.
Edit 
Rounded Corners
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
Add 
Gradient
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.
Change 
Gradient Colors
You should have something like this:
Gradient 
Rectangle
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 :)
Crosshatch
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.
League 
Gothic 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.
Text 
Color
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:
Text 
Shadow
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:
Sub-Text
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.
Sub-Text 
Gradient
Then change opacity to 40% for all of them except the ‘who we are’ sub-text.
Sub-Text 
Opacity
You should have something like this:
Sub-Text 
Gradient and Opacity

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.
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:
Vertical 
Line Black
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:
Vertical 
Line Spaced

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:
Group - 
Names - Lock
We’re almost done now! Select the rounded rectangle and then add a 1px white outline.
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.
Shadow And
 Glow
Then apply those values to the shadow:
  • Distance: 1
  • Opacity: 65%
  • Softness: 12
  • Angle: 315
  • Color: #000000
Drop 
Shadow Values

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):
Final Result
So there you have it! It A simple but nice looking navigation bar created with Adobe Fireworks. ;)

blog comments powered by Disqus