Extract Photo Background Using Fireworks Magic Wand

Posted in Tutorials

To successfully extract an object from its background, we will learn several techniques in this lesson: using the magic wand, adding to the selection, contracting the marquee, and using the eraser tool.

Here we have a photo of an old laptop on a pedestal…

We want to extract out the background so that we only see the laptop to end up with the following…

An object without its background is useful for purposes such as in banner ads or websites.

Step 1: Using the Magic Wand

With the image selected in Fireworks, select the magic wand tool and set its edge to Anti-alias and tolerance 5.

When we click the white area with the magic wand, it is not selecting the entire portion of the wall. The tolerance of the wand is set too low. It is too sensitive and is detecting the fine color change in the gradient light of the wall.

Step 2: Adjusting the Tolerance

Do Ctrl-D to de-select our selection. Increase the tolerance higher to 40 so that it is not so sensitive to color changes. And use the magic wand again to pick out the wall.

Generally, you want to set the tolerance to be as low as possible and yet still pick out the area that we want.

Step 3: Delete the selection

With the selection made as shown above, press the delete key. Do Ctrl-D to de-select. We have deleted the background wall.

Step 4: Adding to Selection

Use the magic wand tool to do the same for the right wall. This time, it selected only part of the right wall.

We can add to the current selection by holding down the shift key and clicking with the magic wand. This is the new extended selection…

Step 5: Zoom In to Check Our Selection

Before we delete this selection, zoom in close to take a better look.

See how our selection is selecting part of the edge of the laptop. It is selecting too much because the magic wand tolerance is set too high. Ctrl-D to de-select and zoom back out to 100%.

Step 6: Decrease the Tolerance

Decrease the tolerance to 10 and try again. This time, the selection pieces are much smaller. So you may have to Shift-click a few times to get the full wall as shown.

If it misses some spots in between, it will be okay. We will clean those up later.

Step 7: Contracting the Marquee

After zooming in to check on our selection…

If the selection is still cutting into the laptop, choose Select -> Contract Marquee and contract the selection by 1 pixel in our case. See how it is no longer cutting into the object.

Press Delete, de-select with Ctrl-D, and zoom back to 100%.

Step 8: Deleting the Pedestal

Deleting the pedestal is a bit more difficult. It is hard to get a good selection due to its varied shadings. As you can see from the below selection. Part of the brown near the edge of the laptop is not getting selected.

Step 9: Eraser Tool to erase background

Instead we will use the eraser tool to clear out an area around the base of the laptop. Zoom in and use an circular eraser head size 8. Set it to a fairly soft edge at 75. You can see the how an edge setting of 0 differs from an edge setting of 100 in the below picture.

Step 10: Erase Around the Edges

After erasing all the way around the edge, you can pick out the pedestal with the magic wand by setting a very high tolerance of 119. It won’t catch any of the laptop pixels because the laptop had been disconnected from the pedestal by our erased area.

Step 11: Delete the Pedestal

Delete the pedestal selection. De-select the marquee. And use the eraser to erase any pieces that are left over.

Step 12: Catching Missed Spot with Red Background

Although the above looks decent, we can not see the tiny pieces that we might have missed due to the transparent background. So we draw a rectangle with a constrasting red color over our entire canvas.

Move the rectangle layer underneath the Bitmap layer. Now you can clearly see the missed spots.

Another way to see the missed spots is to select the red area with a magic wand set to zero tolerance. It will detect areas that are not pure red.

De-select any selections. (In order to delete properly, you must not have any selection active.) Select the Bitmap layer and start cleaning up with the eraser.

Step 13: Deleting the Red Background

After the magic wand detects no stray marks, you can then drag the rectangle layer to the trash can to delete it.

Step 14: Trim the Excess Canvas

Trim off excess canvas with Modify -> Canvas -> Trim Canvas and we get our extracted laptop.

Save it as JPG since photographs are often better saved in this format. Note that the JPG will have a white background because JPG does not support transparancy.

Note:  This tutorial is relevant for Fireworks 8.

---