Transparent GIF Guide

In this tutorial, you will learn how to create transparent image, by using Photoshop's powerful utilities. We will follow the path which is obvious from the image below.

So obvious that we will work on the image of Giraffe and make a transparent GIF by using the following steps.

We'll start with an image that we want to remove the background from, or "knock out" the background and create a transparent image.

Now for the tedious part, we're going to trace around our image. Now if you're a new user of Photoshop, or just don't feel as comfortable with the pen tool. l suggest you do this with the lasso tool (). However please note that you should take the time to train yourself on using the pen tool, you have far more control over it, you can zoom in closely, pan the canvas around, and countless other qualities that make it better than the Lasso Tool.

But let's use the Lasso tool, as it's quick and dirty. Another little trick if you find it difficult to trace around your image and keeping your hand from shaking around, set the Feather of the Lasso tool to 1 or 2 pixels, and leave Anti-aliased checked:

Trace around your image as best you can, as shown below.

Tip(s): Now if you need to add to your selection, press and hold the SHIFT key on your keyboard. You should notice a little + sign appear next to the Lasso Tool. This will allow you to ADD to the selection (incase you accidentally dug in to far).

You can also hold down the ALT key on your keyboard, you'll notice a little - sign next to the Lasso Tool. This will allow you to DELETE a piece of your selection (incase you accidentally selected a portion of the image that you didn't mean to).

Okay, so that takes care of the hard part. Now we're going to copy what's inside of the selection. We'll do this by pressing CTRL + C on your keyboard, ( alternatively by going to "Edit->Copy" from your tool bar).

Then we'll create a new image. Press CTRL + N on your keyboard, (alternatively by going to "File->New" from your tool bar).

Leave the Width/Height settings as they are (they are automatically set for you by Photoshop). But make sure that the background is set to TRANSPARENT, as shown here:

Now go ahead and press CTRL + V on your keyboard (alternatively by going to Edit->Paste). This will paste the clipboard onto the new document, and center it perfectly for you:

You can see the checkered background behind the image.

In any event, press CTRL + SHIFT + ALT + S on your keyboard to open up the "save for web" tool (alternatively by going to File->Save For Web).

Now you have two options to save a transparent image. You can use GIF (which is currently the standard for transparent images, or PNG). In the near future I'm sure PNG will be the new standard, as more browsers support the PNG's alpha transparency l'm sure it will overtake the GIF format. But lets go with the GIF format, as all browsers support transparent GIFs.

So set your save for web options up as shown below:

Now rather than confuse yourself with all these settings, simply set them up as it has been done here, for maximum image quality.

And there it is, a transparent GIF: