Removing White Backgrounds Using Adobe Fireworks

Suppose we have this great picture of an Ant that we found in Google images,
and saved into our own folder as a .jpg file. We now want to use this fabulous
looking ant in an animation project.


But we have a problem, because our Ant has
a white background surrounding him.

We want to remove this white background
so that we only have our ant present.

We can do this using Adobe CS3 Fireworks.




First we need to Start Programs, and find FW Fireworks as a yellow colored
icon that is part of the Adobe Master Collection.


It should start up, and look something like this:





















On the above screen, we click in the top left corner and do File > Open
and then find our way to the folder on our computer that contains the Ant
picture and click on the open button, as shown on the image below:





Removing White Backgrounds Using Magic Wand in Fireworks Page 1 of 6
Removing White Backgrounds Using Adobe Fireworks






















This should open up the Ant image in Fireworks like this:





















We now need to set up Fireworks, so that it is running with a Transparent
background. In Fireworks, the background is called the Canvas. This name
comes from the idea of normal paintings, where the painting picture is on top
of the Canvas.

To change Fireworks to have a transparent (or see through clear) Canvas, we
have to go to the top of the screen and do Modify > Canvas > Canvas Color
Removing White Backgrounds Using Magic Wand in Fireworks Page 2 of 6
Removing White Backgrounds Using Adobe Fireworks

as shown in the screen shot below:





















On the resulting panel, we need to make sure that we have Transparent
selected like this:




















Then click the OK button to get this setting activated.

We now need to use the magic wand tool, to select all of the white
background and clear it away.

Click on the Magic wand tool (third down on the left as shown below):
Removing White Backgrounds Using Magic Wand in Fireworks Page 3 of 6
Removing White Backgrounds Using Adobe Fireworks


















Now move the mouse over onto the white area, and the magic wand symbol
should appear. Click the left mouse button and flashing dashed lines should
appear, showing that the white area around the ant is selected like this:
















Now at the top of the screen, click on Edit > Clear like this:













Removing White Backgrounds Using Magic Wand in Fireworks Page 4 of 6
Removing White Backgrounds Using Adobe Fireworks

This should then clear away all of the white, and replace it with checkered
racing car flag patterns like this: (checker pattern =transparent in Adobe)


















We now remove the dashed lines selection by either pressing the Esc key on
our keyboard, or by going Select > Deselect .

We are now ready to save our Ant.

However, here we need to do File > Save As and save the Ant as a .PNG
Fireworks file, (or we can also use a .GIF file). We must use either of these
two file types, for our Ant to keep his transparent background. If we resave
him as a .jpg file, we will have the white background come back again. This is
because .jpg images are not able to ever have clear backgrounds.

So we need to change the file type, as shown below when we save our
image:

















Removing White Backgrounds Using Magic Wand in Fireworks Page 5 of 6
Removing White Backgrounds Using Adobe Fireworks

Removing White Backgrounds Using Magic Wand in Fireworks Page 6 of 6
We then click the Save button, and our file will be saved as ant.png.

Now if we bring the Ant into a Project, he will not have his ugly white
background, and should therefore look like this:



















Instead of like this (with the ants background not removed) :
























(End of Document)