Removing Image Backgrounds with Fireworks

Removing a Plain Background the Fireworks Way

Now that you have seen the old-fashioned way of removing a plain background, learn how to do it more efficiently in Fireworks by using its unique blend of bitmap and vector tools.

Start by opening the Diamond_Ring_Mask start and final PNG files that are part of the sample ZIP file that accompanies this tutorial. The start file contains the same diamond ring image in Figure 1. You will be using it to perform the steps in this tutorial. So let's begin!

1. Select the Magic Wand tool and, in the Property inspector, give it a Tolerance value of 4 and set the Edge to Anti-Alias.
2. Click in the middle of the ring to select the hole inside.

3. Hold down the Shift key with the Magic Wand tool still active and click outside the ring to add the background around it to the selection. You should end up with something that looks like Figure 3.

   

   Figure 3. Selecting the entire background

   Note: You can also look at the Steps 1, 2, 3 & 4 layer in the Diamond_Ring_Mask_final.png file and select the diamond image. I have saved both the inside and outside ring selections as well as the complete one. You can recall any one of them by going to the Select menu and choosing Restore Bitmap Selection. (You need to have the ring image selected with the black arrow tool in order for that menu item to be active.)

   From here on out the steps differ from the old-style method I described previously. Traditionally, you would now delete the image's background. In this example, however, you achieve the same result by applying a vector mask that reveals only the ring image instead. In order to do that, you need to modify the selection you have now because you want it to cover the actual ring and not the background around it, as it does now. This is a simple one-step process.

4. With your bitmap selection still active (as in Figure 3), go to the Select menu and click Select Inverse. The bitmap selection now covers the ring instead of the background of the image (see Figure 4). You can also look at the Diamond_Ring_Mask_final.png file, select the ring image in the Step 1, 2, 3 & 4 layer and go to the Select menu to restore the Ring Only saved bitmap selection.

   

   Figure 4. Bitmap selection covering the ring

5. Now use the Fireworks feature that makes all of this possible. With your ring selection still active, open the Select menu again and click Convert Marquee To Path. Your bitmap selection has just been transformed into a vector shape that follows the selection's contour and has the default Stroke and Fill settings that were selected in the main toolbox.

   In my case there is no stroke set and I get a solid red fill (see Figure 5). That red fill needs to be changed to a white one in order to be used as a mask that removes the ring's background.

   

   Figure 5. Converting the marquee selection to a path (the red fill will be changed to white)

   Note: Later in the section "Additional Notes and Tips," I show you how that red fill can be useful (if you lower the shape's opacity) to create what's often called a ruby mask. For now, continue with your masking task.

6. Leave the vector shape selected—or select it again if you need to—and remove the stroke in the Property inspector if your shape has one. Change its fill to solid white.

   Note: If you deselect the vector shape now, you should see a barely visible dark outline around it, which is the only part of the ring that your mask does not cover (see the Step 6 layer in the final PNG file).

7. You're now ready to apply the mask to the ring image. Switch to the Black Arrow tool and click anywhere in the gray area outside the canvas to deselect everything.
8. Shift-click both the ring image (click its background outside the white vector shape) and the vector mask shape itself so that both are selected.

9. Go to the Modify menu and select Mask, and then Group As Mask. Your work should now look like Figure 7.

   

   Figure 6. The finished mask

Notice how much cleaner the edges look in Figure 6 compared to both images in Figure 2. The background in the starting PNG image you downloaded at the beginning of this tutorial was black, yet you didn't see it because the bitmap image's background covered it. The PNG file's black background was revealed in Step 9 (Group As Mask) above. Fireworks will correctly anti-alias the edges of the masked ring to whatever background color you choose.

Page 3 of 5

Previous Page

Next Page