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.

I’m going to show you my particular workflow for creating a web layout with Adobe Fireworks, and I’m also going to cover the selection tools. When I get started on a new project, I like to have as much open canvas space as possible. Yet it’s also important to keep what’s going to become your finished product at the correct size for the eventual export.

To get started, click File > New to open the New Document Window. Here is where you set the document size and background color. I’m going to leave the discussion on ideal width for a website for a different post, but for our purposes here we’ll be using a relatively wide fixed-width design. So set the width to 940 px, the height to 3000 px or so (think big canvas) and choose a white background color. Make sure your DPI is set to 72, and click ok.

With your new canvas, zoom into 100% using ctrl + and scroll up to the top of the page. Select the rectangle tool from the panel, and draw a rectangle of any height and color that covers the entire canvas (940px, no more and no less). If you need to adjust your rectangle’s size, you have lots of options. For now, just select the rectangle, then select the Scale tool from the tool panel and resize the rectangle as needed.

Now we need to make some more room to work with. Go to Modify > Canvas > Change Size. Change the width to 2000 PX, leave everything else untouched and click “ok”. Make sure your view is still centered on our rectangle.

Now click View > Rulers. Click and hold the mouse button down on the ruler to the left of our rectangle to drag out a guide. Place the guide on the left hand side of the rectangle. Make sure the guide is rubbing right up on the side of our box by zooming in on it with the zoom tool located in the tool panel (zoom back with ctrl+1).

Now just repeat this step for the guide on the right, and delete our handy rectangle. You can change the color of the guides by clicking View > Guides > Edit Guides. I find the green a little distracting sometimes, so go with something a little less noticeable. What you now have are guides centered on a giant canvas awaiting creative input. I’d suggest saving your work at this point, or download the Fireworks PNG file here (Right-click, save as).