Extract Photo Background Using Fireworks Magic Wand

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

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…

photo to extract background

photo to extract background

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

photo with background extracted

photo with background extracted

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.

using the magic-wand

using the magic-wand

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.

set higher tolerance

set higher tolerance

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.

left portion of wall extracted

left portion of wall extracted

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.

part of the right wall was selected

part of the right wall was selected

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…

adding to the selection

adding to the selection

Step 5: Zoom In to Check Our Selection

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

decrease tolerance

decrease tolerance

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.

missed some spots

missed some spots

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…

contract selection

contract 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.

contracted selection

contracted selection

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.

pedestal edges

pedestal edges

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.

erase background

erase background

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.

erase around the edges

erase around the edges

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.

after deleting background

after deleting background

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.

draw high-contrast rectangle

draw high-contrast rectangle

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

move layer lower

move layer lower

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.

check for missed spots

check for missed spots

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.

erasing missed spots

erasing missed spots

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.

delete red background

delete red background

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.