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 3 (start from file bellabean_coffee_03.png)

In the last segment we left off with this file, which includes a vector based masthead made up of two shapes, and a logo placed on top in the upper left which we also made with Fireworks in this tutorial here. As we’ve already learned, Fireworks is a very capable vector image editing program. But in addition to that Fireworks is also able to pull off a lot of the raster (or photo) editing tasks that are usually reserved for its cousin Photoshop. We’re going to continue our Bellabean series by finding, importing, and masking a photo.

So we’re designing a website for a fictional coffee chain store right? What are we missing in the design so far you might be thinking? Coffee of course! Depending on the budget of your particular client you have plenty of options. If this was a real company with hundreds of employees and a dedicated marketing budget chances are we’d have access to real live professional product photography. Since we’re working for a fake company we’ll use a free source, one of my favorites is www.sxc.hu. Don’t be daunted by the Hungarian domain name, the sites boasts over a quarter of a million free stock images with relatively generous licensing rights.

I grabbed this beautiful photograph by Dimitris Kritsotakis here (note: You’ll have to create a free user account at sxc.hu, which is painless. You’ll thank me later). Save this image in a separate folder, I call my folder “stock photography”. I keep this folder in a “design files” folder which has separate folders for my Fireworks files, Photoshop files, Illustrator files, Flash files, and the stock photos.

Open up the bellabean_coffee_03.png file from the end of the last lesson, and then import our new stock photo by clicking File > Import. Browse to the location you saved the file, click it, and then click open. You’ll be shown a funny icon that looks like a bent line. Click anywhere on the canvas to place the imported file. At this point you’ll probably notice that the file is extremely large! Let’s remedy that by first zooming out of our canvas by holding CTRL and pressing the – key. Zoom out until you can see the entire shape of the raster photo we imported. It should be outlined in a blue box, which you can see extending past the canvas. Now go to Modify > Transform > Scale (or CTRL + Q). You’ll see transform handles appear around the image. To ensure that you don’t mess up the proportions of the image, hold down the Shift key and move one of the corner handles in. We want to get the image about as wide as the masthead we made earlier, but don’t worry about perfection here.

We’re now at the point where we need to remove the background from our coffee cup photo. There are many, many different techniques we could use to do this, some more challenging than others. I’ve decided to take us down one of the more challenging paths, but in the event you get stuck I’ve provided a PNG file that lets you skip over the masking.

There are two different techniques we’re going to be covering here: masking, and the Bézier pen tool. We’re going to draw a shape that resembles our coffee cup with the pen tool, then use that shape as a “mask” that will hide the rest of the photo, leaving only the green cup.

If you search for “Bézier Pen Tutorial” on Google, you’ll turn up about 40,000 results. The pen tool works in a very similar fashion amongst all popular vector programs, so feel free to give it a go with any software you have access to. One video tutorial I found on YouTube is a great start, you can see it here.

Once you’re ready to begin, save your file, then zoom into 150% (CTRL +) and select the pen tool from the tool panel on the left. I like to start in a sharp corner when I can, so left click once right where the handle of the mug touches the right side of the cup at the top. Now we’ll create the next point by clicking a little further down, right at the apex of the curved handle. When you click this area, hold down the mouse button and then drag the mouse down. You’ll see “direction handles” sprouting out of the point you just created, with one of them following your mouse south. You’ll notice that the line that connects your first point to the second is changing. Try moving the mouse to the left and right – notice how the curve changes to reflect the direction you’re moving towards? How far you pull the direction handle also affects the shape of the curve as well. Let go of the mouse button to lock in the line. If you simply click to make a new point without dragging, you’ll get a hard corner with no curve. If the previous point you created was a curve, and you want the next line segment to be straight, simply left click the last point you made with the pen to convert it.

Go ahead and play around with the pen tool until you get a little more comfortable with its use. Remember CTRL Z is every graphic artist’s best friend! If you stray too far from the cup shape we’re tracing, feel free to start over. You can also adjust curves and the location of points with the white pointer. You can even make adjustments on a pixel by pixel level by selecting a certain point and moving it with the arrow keys on the keyboard.

Once you’re more comfortable with the pen tool, continue tracing around the cup until you’ve worked your way back to the first point you placed. You’ll know that you’re about to create a closed vector shape because the pointer will change to a little circle icon.

There’s a lot more to the Bézier pen tool than what we’ve discussed here, and in the future I’ll be expanding on its use. In the mean time learn it the way I did, by practicing! If you’d like to come back to the pen tool later, simply download this tutorial post-pen tool here (right-click, save-as).

Moving on, you should have an ugly outline around our coffee cup photo. Make sure the vector line work you made is selected (use the black pointer if it’s not) and then swap the stroke for the fill using the “Swap Stroke/Fill Colors” button which is located directly under the fill color in the tools panel. You should now have a solid vector shape placed directly on top of the cup in our photo.

Now we can bring this all together with one final step. Select the photo beneath the cup vector we drew with the black pointer. Now cut the photo using Edit > Cut or CTRL + X. Now, click the cup vector shape, and change the fill property in the bottom left from Solid to None. Now, you should see only a blue vector outline of our cup – without touching anything else, click Edit > Paste Inside.

Presto! We now have a masked coffee cup. Save your work at this stage and we’ll continue on in the next installment. In the mean time try creating additional vector masks. It’s a technique that is used frequently across all types of graphic design.

You can download the source PNG file for this tutorial in the state it’s shown above here (right-click, save-as). In the next post we’ll actually work that coffee cup into our design, and I’ll show you how to edit raster images, covert vector images into rasters, and much more. It’ll start to look more and more like a website I promise. If anyone has any questions or suggestions, please feel free to leave a comment below! Thanks for your kind words and support so far.