Fireworks Article

Removing Image Backgrounds with Fireworks

Additional Notes and Tips

There are many methods you can use to create a vector mask. The one I've shown in this tutorial is effective because it avoids the need to draw complex shapes with the Pen tool, which would have been the only way to create a mask for this image in versions prior to Fireworks 8. It will only be as easy as I've shown you here when you work with images with equally simple backgrounds. But how could you go about removing more complex backgrounds?

Building on the Technique

Many times you could use a technique similar to this one when dealing with more complex backgrounds. However, you would need to build your selection by adding up smaller areas. In the case of this sample ring image, this was a simple two-click process—one click inside the ring and a Shift-click outside the ring to add that area to the inside of the ring selection.

It won't always be this easy. You may have to use a mix of the various bitmap selection tools or you may have to resort to finishing the mask shape with the Pen tool. One trick you can use to experiment freely or spread the task between multiple editing sessions is the Save Bitmap Selection feature. I used this in the sample files to demonstrate how the sections you made should look. You can save any bitmap selections you need and restore them at any time to continue working. A saved selection will still be available after you transform it to a vector shape, so use them freely.

With some images it may help to think of the process not as removing a background but as lifting up an object from the larger image. The object you want to keep may have more areas of similar colors than the background and so you could try to select it directly.

You can also mix various vector shapes you obtained from selecting parts of the background or the object you want to lift from the image and join or punch them as needed. Just remember that the final mask shape should cover the object you want to keep. In order to see better how your vector mask shape covers the underlying image, use the technique I describe next.

Ruby Mask

The Ruby Mask technique is derived from the Quick Mask feature in Photoshop which enables you to paint a bitmap selection directly on the canvas using the paint tools instead of its usual bitmap selection tools. When Photoshop is in Quick Mask mode, the selection you paint in does not look like the usual marching ants you get with regular bitmap selection tools. Instead, Photoshop draws your paint strokes as a translucent red film over the underlying image. The name Ruby Mask is derived from the real-life Rubylith acetate films used in the printing world.

How it becomes useful in Fireworks is that as you work on, draw, or edit your vector mask shape, you can set its fill color to red and change the object's Blend mode to Overlay. (Prior to Fireworks 8, you simply lowered the object's opacity to a value of around 40%.) After doing this, you can tweak the vector shape's contour and see where its edge is in relation to the masked object's edge in the underlying image. It works really well and enables you to see clearly how well your edits improve the vector mask shape.

If you look in the Ruby Mask layer in the Diamond_Ring_Mask_final.png file, you'll see how closely the vector shape resulting from converting the bitmap selection really follows the ring image's edges. Zoom close in to the diamond itself (400%) and see where the Magic Wand tool didn't select the diamond's contour correctly (see Figure 9).

Figure 9. Areas where the Magic Wand tool didn't select the diamond's contour properly

It is almost perfect in places and not so good in others, but if you edit the vector path now you'll be able to see the underlying image and make much more precise edits. I use this very useful technique all the time. Using it will dramatically improve your vector masking work as well.

Where to Go from Here

As you can see, creating complex vector masks is easier than ever in Fireworks 8. Although the technique described here won't help you in every situation, it should make your masking work a lot easier for many images. When you mix in this technique with the other sophisticated vector drawing and editing tools in Fireworks, you should be able to remove the background or lift objects from any image.

I hope that this tutorial will be useful to you and that you learned some new things. If you have any questions about this tutorial or masking in general, you can always post them in the official Fireworks support forums. You'll find many expert Fireworks users who can help you there. I also read the forum every day. If I see questions about this tutorial in the forums, I will try to answer them as soon as I can. See you there!

Page 5 of 5

Previous Page