This is the third 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 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.

Tags: Bellabean, Bezier Pen, Fireworks, Masking, Raster

This entry was posted on Sunday, March 2nd, 2008 at 2:05 pm and is filed under Adobe Fireworks Tutorials, Bellabean Coffee, Bezier Pen, Raster Image Techniques. 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.