This is the fourth 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 (right-click, save-as). 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 4 (start from file bellabean_coffee_04.png)
When we left off last time we had a nice looking coffee cup floating in our layout that we masked with Fireworks. Lots of people that use Fireworks prefer to keep everything as editable as possible, and avoid “destructive” techniques. Quite often though I know for a fact that I won’t need to revert back to where I was, so I’ll flatten masked objects. If you click our coffee cup to highlight it, you’ll see the selection includes what’s left of the photo – what the mask is covering. Go to Modify > Flatten Selection. The bounding box should now snap right to the edges of the cup, making it easier to work with. Although this is “destructive”, meaning that we can’t unmask the cup anymore, I’m not worried.
Let’s add some depth to the design by adding a shadow. First change your fill color to #000000 (black) and set the stroke color to none. Now draw an oval over the bottom of our cup. Make it a touch wider, with a slightly more round radius. You can eyeball this of course, but mine ended up 247px wide by 32px tall. Adjust yours with the numeric path properties in the lower left if you wish. Now, with your black oval selected hold down CTRL and press the down arrow. This should move the oval behind the cup, if it doesn’t keep pressing down. With the oval still selected we can add our blur. In the properties panel at the bottom, on the right hand side, you’ll see a “plus” symbol next to the word “filters”. These are your Live Filters. Click the plus, go to Blur then choose Gaussian Blur. Adjust the blur radius slider to 14 and click OK. You should end up with a pretty convincing shadow. Lets group the cup and the shadow together since we know they’ll always be together. With your black pointer draw a box around both the cup and the new shadow to highlight them. Now hold CTRL and press G.
To work the cup into the masthead, I’m going to shrink it down a little and move it to the right hand side of our design. With the group selected, press Q on your keyboard (or select the scale tool from tools panel underneath the black pointer). Hold the Shift button down to constrain the proportions of the cup, and then drag a corner handle inward to shrink it down. I want to get the cup about 30 or 40 pixels taller than the masthead, but don’t worry about perfection here. Drag the cup into place to match what I have below:
A note on using the scale tool: You can shrink stuff as much as you like with no loss of quality (aside from some aliasing, but we’ll get into that later). However, you can’t enlarge images again without wildly distorting them. If you shrink something too much, just use Undo (CTRL Z) to revert back. Once something is a symbol (as discussed in part one of this series), you can change the size however you like without distortion (assuming you don’t enlarge bigger than the original).
Now that we have the sexy coffee cup our boring beige background color is looking a little lacking. Lets add some more vector shapes to punch it up. First, draw a long rectangle similar to our green bar at the bottom of the design. Make it about one third thicker and just above the green bar. Using the “Fill” selection in the properties panel at the bottom, change the fill to Gradient > Linear. More likely than not, Fireworks will set the fill to an ugly verticle gradient (CS3). Earlier versions of Fireworks default to a horizontal gradient. Either way, you can change the direction of the gradient by adjusting the direction handle that appears when the shape is selected. The circle portion of the handle can be dragged around the canvas to control where the gradient starts, while the square end of the handle can be moved to change the direction of the fill. Move the circle end of the fill handle to the left of our new box, and then click and drag the square end to the opposite side, hugging the outside edge of our coffee cup. Try to get the fill direction as horizontal as possible. If the fill keeps snapping to an unfavorable position, try moving to an extreme angle, letting go, then trying again. Now let’s adjust the colors of the gradient. To change the options for the linear gradient fill, click the color swatch. You’ll see two boxes on each side of the gradient. The lower set of boxes control the fill color of each side, while the top two boxes control the percentage of transparency. What makes this tool so nice is the fact that when you click one of the color chips you’re presented with a set of web safe colors, an input field to enter a custom HEX value, and most important of all – an eyedropper. Now click the left color chip and use the eyedropper to click the beige background of our masthead. Now click the right color chip and change the color to the green we’ve used in the lower bar and the logo. Click anywhere on the canvas to retire the gradient fill properties box. Click to highlight the box we just created, then move it behind the cup using CTRL and the down arrow. If you press Q on the keyboard you’ll once again activate the scale tool – adjust the width of our new box to make sure it doesn’t poke out on the right side of the
coffee cup or off of left edge of the masthead. You should end up with something that looks like this:
You can download the source PNG file for this tutorial in the state it’s shown above here (right-click, save-as). Next week we’ll start adding some navigation elements and go over some cool techniques for buttons. Who doesn’t love buttons? If anyone has any questions just me a line in the comments below.
Tags: Bellabean, Fireworks, Gaussian Blur, Gradient
Hello from
Joey, I’ve read all of your posts. I’m sure you have more to come, but I’m wondering how and when this work is going to export/import into Dreamweaver. It might be good to have an overview or workflow segment at the start of the tutorial (or even a final comp) that shows where this is all going. Thanks for your posts.