This is the second part of a series of web design tutorials on Adobe Fireworks. Using a fictional company I’m documenting my design workflow from start to finish. You can follow along by starting at the beginning of the series or by downloading the most recent Fireworks PNG file here. 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).

Bellabean Coffee: Part 2 (start from file bellabean_coffee_02.png)

Let’s start out by making sure our guides are turned on by clicking View > Guides and checking show guides. Now is a good time to try out the zoom function in Fireworks. Using the control key combined with either plus + or minus – allows you to zoom. You can also employ the magnifying glass tool by drawing a box around the area you want to zoom into or just left clicking the point at which you want to zoom.

Return your zoom level to 100% using CTRL+1 or CTR:L +/- . Select the square tool from the panel on the left and draw a rectangle on the stage that’s 940 pixels wide (the shape should snap to your guides) and 160 pixels tall. You should now have a box of any given color on top of or at least close to our Bellabean logo. As we discussed previously, you can use the black pointer to move the rectangle and the scale tool (CTRL Q) to resize the rectangle as you see fit.

Now, the power of layers! Make sure you’re looking at the layers panel by pressing F2. You should see the Bellabean logo that we made, and our new rectangle above it. Move the rectangle behind the logo by either selecting it and using CTR:L +/- , or clicking and dragging in the layers panel. With the rectangle selected, change the color by clicking the color chip (fill) towards the bottom in the properties panel and replace the hex value with #EFAC22. With the rectangle still selected, round off the corners by adjusting the (you guessed it!) “Rectangle Roundness” setting to 12.

You should be looking at something like this:

Now let’s cover one of the most used parts of my particular workflow in Fireworks. With our rounded rectangle selected, make a copy with CTRL C and paste it on top of itself with CTRL V. Set the color of this new round-tangle to any color you want in the pallet, and set the roundness back to 0. Using the arrow keys on your keyboard, you can position any vector image in fireworks on a pixel by pixel basis. Move our new rectangle down until it just covers the bottom of the original yellow one. Using the black pointer, select both rectangles by holding down shift and clicking the 0ther box, or dragging a box around both. Now simply select Modify > Combine Paths > Punch. Now you should have a rectangular shape with rounded corners at the top, and square corners at the bottom.

Let’s adjust the height of this shape now using the white pointer. When you select the white pointer and the click our yellow shape you’ll notice the blue points that make up our vector shape are now hollow. Click the point in the lower right hand corner, it should turn blue while leaving the others hollow. You can now control this point with the arrows on your keyboard, but what if we want to control several? Hold down the shift key and click the bottom left point. Now you can control the height of our vector without disturbing the shape of the rounded corners. With those two bottom points selected simply tap the up arrow on your keyboard until you get the height to 100px (as noted in the property inspector at the bottom of the screen). With room to spare, draw a new rectangle on the canvas right under the original yellow one, measuring 940 by 40 px. Position it so there’s a white gap (about 6 pixels) between the two boxes.

One last tool and we’ll call it a day. With our brand new box selected, choose the eyedropper from the tools panel on the left. Now click any green point in the logo to change the color of the box to our Bellabean green. We’ll get into how nice the eyedropper is later on.

Lets wrap up by saving your file. You should have wound up with something that’s similar to this:

You can download the source PNG file for this tutorial in the state it’s shown above here. In the next post we’ll look at introducing raster images to the design, so stay tuned. If anyone has any questions or suggestions, please feel free to leave a comment below!

This entry was posted on Saturday, February 9th, 2008 at 12:30 am and is filed under Adobe Fireworks Tutorials, Bellabean Coffee. 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.