Before we get started: I’ve switched to Fireworks CS4 for these tutorials for several reasons, the biggest being the text engine bug introduced in the CS4 product release has been fixed. This is a pretty straightforward tutorial, but in the future if there’s any major differences between CS3 and CS4 and how my tutorials relates to the versions I’ll make note of it.

Getting Started

Lets create a new file by going to File > New and setting our canvas size to 1000 pixels wide by 1000 pixels tall. Set your canvas color to white and ensure your resolution is at the standard 72 pixels/inch. Set your zoom to 100% by holding CTRL and pressing +/- or using the scroll wheel on your mouse (if you have one). Now select the rectangle tool from the vector section of the tools panel on the left.  Lets draw a square in the center of the canvas. To force the shape to stay truely square, or “constrain the proportions”, you’ll want to hold down the Shift key as you draw the shape. Depending on what you were doing with Fireworks last time you used it, your new square could be any color. Lets change it to blue by selecting the black pointer from the tools panel and clicking our square to highlight it. In the Properties Panel at the bottom you’ll see the fill color of the selected object. Click the paint chip next to the paint bucket icon and enter this HEX code into appropriate box at the top of the pop-up: #0B4E80. Press Enter to save the color change. Before we move on let’s make our blue square “rounded” by adjusting the Rectangle Roundness setting in the Properties Panel.  Set this as you see fit, but I’m making mine at “8″.

You should have something like this so far:

Layers of Fun

Before we go much further, make sure you’re looking at and are familiar with the Layers panel. If you press F2 on your keyboard this will toggle Fireworks Layers panel on and off. It’s important to understand how layers work in Fireworks (or any graphic design program for that matter), so if you need to brush up I suggest you press F1 to bring up the help screen, search for “layers” and read the section on “Working with Layers”. Why am I worried about your understanding of this concept so much? Because we’re going to be building the effects of our glossy button one on top of another using layers.

With the layers panel open click to highlight our blue square. Now press CTRL-C to copy our square and CTRL-V to paste a new copy onto our canvas. You won’t notice much on the state, as Fireworks will copy the new vector shape directly on top of the existing one. You will however notice a new blue square at the top of the layers panel on the right.

Now, select the ellipse tool (same place you found the rectangle tool, hold down your mouse click to see all of the shapes) from the tools panel on the left. Now draw an oval over the top half of our blue square. Change the color of the oval to anything other than blue for now, and then adjust the opacity to 50% in the property inspector.

Mine looks like so:

I use the opacity slider quite often just to align and manipulate shapes. Since I can see both vectors now along with how they overlap, it allows me to figure out where I want everything.

Making sure you have nothing selected already by clicking a blank area on the canvas. Now click the top blue box, hold down the shift key, and then click the oval on top so both shapes are selected. In the top menu click Modify > Combine Paths > Punch. If you did it correctly you should have two blue shapes left, the top most having the shape of the oval cut out of it. Select that shape and change the fill type from solid to linear. Your gradient will most likey start out wonkey, so click the color chip and set the left (top in this case) to #073252 and ensure the right (bottom) color is set to the original blue #0B4E80.

You should end up with something like this:

Get your Gaussian Blur On

Before we start this step change your canvas color to black. To do so, click a blank space on the canvas and adjust the “canvas color” selection in the properties panel in the lower left to the appropriate color chip. Now select the ellipse tool from the tools panel on the left and draw an oval in the middle of our square shape. Change the color of the oval to white (#ffffff), and then add a Gaussian blur by clicking the plus symbol in the filters panel at the bottom of the screen and selecting Blur > Gaussian Blur. I set my glow to 40, feel free to play around with yours as you see fit. Flatten the new blurred shape by selecting it and clicking Modify > Flatten Selection.

Marquee Effects

Select the black pointer from the tools panel on the left. If you click the towards the edge of the rear blue square (not the half square we created) you should be able to highlight it. Now copy (Ctrl+C) and paste (Ctrl+v) a duplicate square on top of the existing one. With our new square copy highlighted, go to Modify > Convert to Marquee. You now have a “marquee” or mask drawn on your canvas in the shape of our original rounded rectangle. This means that everything inside of the marquee can be manipulated with our tools, and everything outside is protected. Lets inverse this effect go clicking to select > select inverse. You’ll now notice that our marquee is drawn around not only the rounded square but also the canvas itself. We can now delete the “glow” that extends outside of our square shape. Now press Ctrl+D to remove the marquee. Click our new timmed glow bitmap that’s on top of our square and move it down behind the half-square using Ctrl+Down Arrow. While the glow is still selected, change the opacity to 80 in the properties panel. You should end up with something similar to this:

Using some of the techniques we went over in this short tutorial you should be able to create some nice modern graphic web elements. Feel free to experiment and post back here if you run into any questions!

Here’s the link to my final Fireworks PNG.

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.