Top 3 Products & Services


Dated: Sep. 05, 2004

Related Categories

Photoshop Graphics Suite

This tutorials shows you how to create transparent GIFs in Photoshop 5. This tutorial assumes you already know about layers in Photohop. The basic process involves creating a new image, coloring the background layer a solid color, and making your graphics on other layers. You then change the graphics mode and export the file to GIF format.

Note: This tutorial uses the GIf89a Export plugin for Photoshop. This should be included on your install disk If you have not installed the plugin, you will need to install it before beginning this tutorial.

Creating Transparent GIFs

To Create Transparent GIFs:

1. Select File > New to create a new image.

2. Set the image size and resolution in the dialogue box that appears.

3. Set the Mode dropdown menu to RGB Color.

4. Click Okay when you're finished. PhotoShop creates the new image.

5. Fill the background image with a solid color that you know will not appear in the image. I use pure green (RGB values 0, 255, 0).

6. Create a new layer and begin making your graphic.
Tip: Turn off the anti-alias option for each tool you use. This option is usually located in the tool's palette. Anti-aliasing smoothes the jagged edges of a color (or selection) by "blurring" the color transition between edge pixels and background pixels. Turning off anti-aliasing leaves the background a solid color, and makes it easier to select the color you want to make transparent later on. It also means some of your graphics may look jagged. If you turn anti-aliasing on, the "blurring" produces shades of the background color, each of which you will have to select when you are setting transparency.

7. Save your work as a PSD file once your finished. This allows you to go back later and make changes if you want.

8. Select Image > Mode > Indexed Color. PhotoShop asks if you want to flatten the image.

9. Click Okay. The Indexed Color menu appears. Use this menu to set options for converting your image to indexed color mode. You can use the default settings (the Exact option). You can also choose options for the web. (Select Web from the palette drop down menu.)

10. Set the conversion options you want.

11. Click Okay to convert the image to Index Color mode. Now that the image is converted Index Color mode, you want to export it to GIF format to add the transparency information.

12. Select File > Export > GIF89a Export.... The GIF89a Export Options menu appears. When you create a transparent GIF, you must select the background color(s) you want to make transparent. Use this menu to do that.

13. Make sure the eye dropper tool in the menu is selected.

Use this tool to select the color you want to make transparent.

14. Locate the color you used as the background color in the mini-palette that appears at the bottom of the menu and click it. A black box appears around it.

15. Click Okay. The Export GIF89 menu appears. This menu acts just like a normal save menu.

16. Navigate to the folder in which you want to save the image.

17. Enter a name for the image.

18. Click Save. That's it. You now have a transparent GIF file.

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!

Previous Article

Next Article

asad's Comment
14 Mon May 2012
Admin's Reply:


Basma's Comment
Hi, I'm using your great plugin which works very well. I've put it in the haeedr of all my pages, to have a second, beautiful menu, using post thumbnail images. By the way, i've tried my blog on several PC, linux and windows, with firefox or chrome/chromium and every time the mouse run over the menu, processors are running very high (with 4 cores, 1 core @ 100%). I don't have any idea about this problem
13 Tue Mar 2012
Admin's Reply:

Thanks for the compliments Basma. Regarding, your CPU to go on an overtime probably doesn't have much to do with your graphics but more due to the coding being used. Make sure you check to make sure all PHP and JavaScript codes are working. And check to makes sure that these two kinds of codes aren't responsible for the CPU.