I’m taking a break from the Bellabean Coffee design series this week to show a quick example of my workflow with Adobe Fireworks from start to finish. In this quick tutorial I’ll demonstrate how to design a typical bar style navigation and then export the images for inclusion in an HTML document. The Fireworks PNG source file for this will be included at the bottom of this post. If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).

Start out with a fresh canvas by going to File > New. Set the width and height to 2000 PX each, and make sure the background is set to white (#FFFFFF) and click OK. Select the rectangle tool from the vector section of the tools panel on the left. Draw a short rectangle on the canvas that measures 790px wide by 60 px tall. Get the shape in the ballpark when drawing it, and then adjust it in the properties panel numerically (measured in pixels). You’ll find this adjustment in the lower left corner. While you’re down there set the color to #351E7B by clicking the color chip next to the paint bucket and entering the HEX code. Set “Rectangle Roundness” to 40 to complete the basic shape.

With your black pointer selected, click our new rounded rectangle to make sure it’s selected. Now copy the shape using Edit > Copy ( better yet use Ctrl + C), and paste it on top of itself with Edit > Paste (Ctrl + V). Fireworks will automatically place the new copy directly on top of the original. Use the down arrow on your keyboard to move the new duplicate shape down and away from the original. If you hold down Shift while you press the down arrow, you’ll engage super fast movement speed.

Head back to the tools panel and choose the rectangle vector tool again. Now draw a new rectangle that covers the top half of our duplicate. Make sure it covers the entire width and about half of the height. Now we need to select both of these boxes, use the black pointer to do so. You can hold down the shift key and click each shape to select them (note the blue boxes that indicate this). Now go to Modify > Combine Paths > Punch. If you pulled this off, you’ll be left half of a rounded rectangle, and the original above it.

Select our new shape and change the color to black (#000000), then move it up using the arrow keys into a position that covers the lower half of the original shape. You should be left with something that looks like this:

With the black portion of the bar still selected, change the opacity of the shape to 35%. This should result in a darker version of the violet color beneath it.

Select the circle shape from the tools panel on the left, and draw a skinny oval in the middle of our budding navigation bar. Mine ended up 710px by 20px, use the numeric properties to adjust yours so it’s close. You can also adjust the oval using the scale tool (Ctrl + Q). Adjust the position of the oval so it’s in the center of our navigation, then turn your attention to the “Live Filters” (formerly Live Effects) panel, located in the properties panel, on the right hand side). Press the Plus icon (Fireworks CS3) to select from the Live Effects, and choose Blur > Gaussian Blur. Set the slider to “10″ and click OK. With the blurry oval still selected, change the opacity to 35.

What good is a navigation bar with no buttons? Good question! Select the text tool on the left, and set it to Arial, 17, Bold, White (#FFFFFF). Click onto the left side of our bar and type out “HOME” in all caps. Leave the text as is for a moment, and select the rectangle tool one more time. Draw a skinny vertical white line next to our home button. Adjust the size to match my 2px wide by 45px tall shape. Now copy and paste a duplicate shape, and then use the right arrow key to move the duplicate adjacent to the original. With the second shape still selected, change the color to black (#000000). You should now have two skinny rectangles, one white and the other black, next to each other. Zoom into the area using the zoom tool, or Ctrl +. Select both of the shapes by holding down shift and clicking each rectangle. Now group the rectangles by going to Modify > Group (Ctrl + G). Set the opacity of the group to 32%, and move it next to the “HOME” text as depicted in the image shown here.

If you use the black pointer to click and select the “HOME” text, and then hold Shift and click the separator we just made, you can copy and paste a duplicate onto the canvas. Fireworks will place the copies directly on top of the originals. Use your arrow key to move them further down the bar to the right. Once in rough position, change the “HOME” text to “ABOUT”. Continue this process until you’ve entered HOME, ABOUT, OUR SERVICES, HISTORY, FAQ, and CONTACT. Adjust the space between everything with the arrows keys as you go. You should end up with something similar to this:

Looking at this now, I’d say the text is a little big. Holding down shift, click each piece of text until they’re all highlighted. Change the font size in the properties box from 17 to 13. If the text fields are centered in the properties panel, changing the size of the font should keep them centered in each button. If after making the change they look misaligned, just click each one with the black pointer and adjust its position with the arrow keys. Here’s the final graphic:

Now that we have everything finalized, lets export everything. First we have to draw hotspots over each button. For this we’ll need to switch to the Slice tool in the toolbar to the left. You’ll find it in the web section towards the bottom, it looks like a scalpel over a green box. Use the slice tool to draw your green boxes over each button section. Much like the vector rectangle tool you’ve been using, the slice tool will allow you to draw and adjust shapes where you need them. If you need to adjust your hotspots, just switch to the black pointer and zoom into the area that needs attention. Be careful to only cover the pixels that make up the button graphic, keeping the slice area pressed right up to the edge like shown.

The last step, exporting the images, can be done in a variety of ways in Fireworks. Since I’m a pretty hands-on kind of guy, I use this technique: Start by making sure that our button images are set to the correct file type in the properties box. Since we’re using gradients in this example, we’ll choose “JPEG – Better Quality”. Now simply right-click each button and select “Export Selected Slice”. Do this for each individual button. You’ll be asked via a system window where you want to put your new images. I make a local folder for the site, and place the images in an aptly named “images” folder within that. You should also save your original source PNG, typically in a separate folder from whats being uploaded to the web server.

Want to make rollover versions of each button? Of course you do! Simply select the underlying purple bar vector, and change it to different shade of purple, or any other color you like. You can change the color of the text as well (mind the contrast between bar and text). When you export the images again, just name them accordingly. I use this format: nav-home.jpg and then nav-home-ovr.jpg.

If you so choose, you could also automate a lot of this with Fireworks, add drop menus, and even have Fireworks export the final HTML. I’ll save that for another time though. Please leave any questions you have in the comments. Thanks!

The source file (Fireworks PNG) is located here (right-click > Save As).

This entry was posted on Saturday, March 22nd, 2008 at 5:39 pm and is filed under Adobe Fireworks Tutorials, Quick Series, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.