How to create Transparent Gifs with Photoshop for your Web Page

Eclipse Ezine

Last Updated:

In this lesson, I will assume that you are already fluent in PhotoShop, enough to know how to save a GIF. This isn't too advanced, and with a little practice, you should be a pro. This is also assuming that you understand what a transparent gif is, and what you plan to do with your gif. There is nothing as tacky as an incorrectly designed Transparent Gif. I have seen some of the Fortune 500 companies have ugly gifs on their site and I really feel sorry for the poor schmuck that paid thousands of dollars for a poorly designed image set. This is a step by step on what to do in the emergency of a transparent gif problem. Let me say first, the I don't like to use these creatures that often and not every Gif HAS to be transparent.
		Step One First, you want to develop your image in PhotoShop or a similar program. I always use Adobe Products, and I have never tried this anywhere else. You can do this in PageMill, but you have to make the Gif correctly first. Gifs should be used only in cases of a small color palate. Don't try this on a photo. If it is black and white then maybe, but stick to the simple colors!
Figure out the colors thing Let's say that we WANT it on a green background. If we don't make it on a green back ground originally, and we make it on a gray background like this image.
		NO! Bad bad bad designer! Ick! That is pretty bad. SO, to fix this problem, you have to do a different way. By creating it in your graphics program, you should begin by making it on the same or similar color you plan to use. Try this site for a list web safe colors. Even if you don't plan to use a gradient like this drop shadow, there will be pixels running around it still.
This is much better. Once you have created your image in Pshop save it as a Pshop doc. to make certain that you are not going to need to change anything. To get the best quality gif, Change your mode to Indexed Colors (Image - Mode - Indexed Color) Choose Adaptive Palate, and try to get as small of a palate as you can to reduce image size.
In PhotoShop 5.0 choose Export-GIF89a Export and a window will pop up. You are able to select more than one color that you want to make transparent, so be careful to choose which colors you want. Click okay when you are finished. Save this image as you wish, and keep an extra copy by saving the original as a different name.		Last Stuff Now you want to make your background color or table background color(check out this code to see how that is done) the same or pretty darn close to what you originally used in Pshop. You can always go back into Pshop and add more colors to the transparent list. That should pretty much do it. - Gina Menzes, Web Designer

{Hey, by putting this on the web it is Automatically Copyright Eclipse E-zine
AND THAT MEANS you can't "borrow" or take any of this text
oh, and the images are mine to. Mine. My mother never taught me to share anyway.}

{Advertising Information/Media Kit}
{Email Us | Graphics | Web 101 | Marketing | Ask Us | Links | Job Links | Humor | Home}