Fw Removing White Backgrounds 345m39

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 , 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 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 ant’s background not removed) :

(End of Document)

Removing White Backgrounds Using Magic Wand in Fireworks

Page 6 of 6