In this tutorial you will learn an easy way to create a GIF with a transparent background in Photshop. The advantage of this method compared to creating a transparent gif and starting with a transparent background is that you can see what your design will look like against any colored background as you design your image.Your final transparent GIF will look something like the image below. You will not see the white jagged lines around the outside of the image like you sometimes see on transparent GIFs when they are applied to a dark colored background.

Create a new document with the settings below. The image size isn’t important as long as it is bigger than the gif you want to create. You could start with a transparent background instead of a White background, but this method allows you to see your gifs against light and dark backgrounds before saving and it is easy to make the background transparent later.

Use the text tool and select a large font and a blue color. If you do not want to use text you must create a new layer before starting your image. Type out some text and your image should look like the one below.

Your Layer Palette should look like this. A Text layer above the Background.

This step is optional. To give the text a little depth. Go to Layer/Layer Style/Bevel and Emboss, and use the default settings - click OK. Your text should look something like the beveled text shown below. You can also use the Add Layer Style button at the bottom of the Layers Palette, it’s second from the left and id looks like fx in CS3, and a dark circle in earlier versions of Photoshop.

To see how your image looks against a variety of background colors, select the background layer in the Layers Palette. Change the background color in the Tools window to a new background color. Press CTRL + Backspace to apply the new background color. Once you’re satisfied that your image will look good against your website’s background color it’s time to make it transparent.

To make the background transparent, click on the Background eyeball in the Layers Palette so the eye disappears.

Your image should now look like this.

To get rid of the extra transparency around the text select Image/Trim, and use the settings below.

Your image should now look like this after being trimmed, and it’s ready to save.

Use File/Save for the Web. Use a 2-Up view so you can compare the original image with the one you are saving. At the bottom of the 2-Up view you will see the file size. This will vary as you change some of the settings on the right. On the right make sure GIF is selected. Make sure Transparency is checked. Make sure Matte is set to None. You can adjust the number of colors as needed. For this image 16 colors was used. More colors will increase the file size and the image might not look any different. Click Save, and give it a name. This image will look good over any color background on a web site. If you plan to modify your gif at a later time, then do a Save As, and save it as a PSD file so you will still have your Layers and Layer Style when you re-open it.

The key to making good looking transparent background gifs is to use a colored background first so that you can see what your image will look like when placed against your websites background. Changing the background to transparent is as easy as clicking the eyeball to hide the background layer!