Be Transparent

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.

Author: Gina Hutchings
Copyright Lunar Media Inc
Chicago Web Design