This tutorial will show you how to remove a background from an image. This is
an important step when creating an animated GIF,
or a button for a web page. For some examples of a few animated GIF's i've made
using this technique, just click here.
About The Remove Background Tutorial
I am assuming that you have at least version 5 of Adobe Photoshop installed. As
well, i assume that you have enough computer skills to be able to follow these
simple directions. If you have problems opening files and checking your e-mail,
then you will have problems with this tutorial. In that case, get a friend to
sit beside you while you do this. I'm not going to be answering e-mails from
every fruit cake that can't figure out how to save a picture from a webpage.
I opened a thread at polycount.com, and i was taught how to do this by guys
like ShitHead, Janus, and HarlequiN. Thanks guys.
Start by loading Photoshop with the picture below.
Remove Background Tutorial
That picture has a background that is easy to work with since it's all one
colour. As well, i have saved it in GIF format so the image is already in
Indexed Colour mode (more on that later). In order to remove the background,
first we will select it. Use the magic wand tool to select the background by
clicking on it. That's right, just click the red area with the wand. This is
what the magic wand looks like.
On a small side note, double click the magic wand in the tool box and a small
window appears. In it you can set the sensitivity of the wand. I find mine
works nice at 75. Change the number as you desire, and then close that window.
To get the little spots of red from inside the logo, just hold down the SHIFT
key and click on the additional areas. If you need to get in a tight spot, use
hold the CTRL key and hit the plus (+) or minus (-) keys
on the keypad to zoom in or out.
Now that you have selected all of the background colour that you do not want to
remain, press the Delete key on the keyboard, and the selected areas
will disappear. The next step is to select the logo image, which is exactly the
opposite of what you currently have selected. To do this, choose Inverse
from the Select menu (see image below).
If you don't have the "Channels" box open, you can make it visible by clicking Windows/Show
Channels. At this point, the channels window should be open with the
channel tab clicked. As well, the image should have the logo selected. To
proceed, click the little arrow in the right corner of the channels box and a
pop up will appear.
Click the first item in the list called "New Channel...". A pop up
window appears like the one shown below. It will be asking you what the name is
going to be, and a bunch of other stuff. Just leave the settings in their
default settings and click the "OK" button.
Clicking that will have added a new channel (kinda like another layer) to your
picture. It will now look like this:
We are almost done. Now you just need to fill the selected area with white. To
do this, just click "Edit/Fill..." from the menu. A small pop up window
will appear like this one:
Once again, don't worry about what it says, just click "OK", and it will
fill the center of the image with white. Your image should now look kinda like
The image is almost ready to go. You're only a few steps from being done. Now
we will need to convert this image from it's current format (jpeg format) to
the GIF format. To do this, you will change it from the RGB mode to the Index
mode. Confused? Just follow these easy steps. Click "Image/Mode/Indexed Colour"
in the menu. It currently has RGB checked on. You just need to check Indexed
A small pop up window will appear. If didn't already guess, i'll tell you again
- Just click "OK". Leave the settings in their default positions.
Now you have converted it to a file format that allows you to save it as a GIF.
Just click "File/Save As..." and you will be prompted to pick a file
name and location. Make sure you change the file format to "CompuServe GIF
(*.GIF)". Did you read that? Make sure it's saved as a GIF file!
You are now done. You have just created an image that has a clear background.
You can exit and re-open the image in Photoshop, or just drag and drop the
image onto Netscape to verify your work.
That's it. You're all done. What you do with it now is up to you. I recommend
that you practise doing this a few more times.