How the heck do you make a nice smooth transparency? I get asked this question a lot, since I seem to have figured out the knack. First off, you should understand that I use Photoshop, so most of my tricks will be geared to that program. Stick around even if you don't have it, you still might learn something. When I first started working on this problem, half my transparent GIF's had this really strange edge effect, with little bits of white pixels showing along the edges of my images. The problem turned out to be that I was always using the same background in Photoshop, and when I made it transparent, the edge pixels, having been anti-aliased to merge with that color, did not turn transparent. Now I always use the same background color in Photoshop that I intend to use on my web page.

Sometimes I'll want to have an image floating over a textured background image. Here the trick is going to be having the shadows merge neatly with the texture. Since most of the image under the shadow is lost anyway, I can safely ignore it. For the background I'm planning to make transperent, I'll set my eyedropper tool to the widest merge, (5x5 average), and try to choose a color that seems to fit in as an average of the background. If you look under the shadow in the following images, you'll see that there is no texture to it, yet it still merges nicely. The downside is that this technique calls for either a sharp edged shadow (no more than 2 pixels of blur), or a low-contrast background for more diffuse blurs.

Now, one of the big tricks here involves the translation from RGB mode to Indexed Colors. First, make sure your Info palette is open. Note down the RGB values you've chosen for your background. Now translate to Indexed Color, choosing adaptive palette and dithering. DON'T DO ANYTHING ELSE YET! Move your cursor over your background. If you're lucky, the RGB values will stay the same, and you're ready to move on to the next step. About half the time Photoshop will have decided to dither the background on you. Note down the 2 colors it chose to dither together and hit Command-Z to undo the mode change. Now we change modes back again, this time choosing 'custom' palette and dithering. (The first abortive attempt to change mode was necessary to set the palette to the correct colors.) Click on the colors until you locate one of the 2 colors PS originally tried to dither together, and change it to the same as your original background. Click OK, and with any luck we'll now have a smooth, one color background. It's rare you'll have to do this twice, but it's always safer to have a copy of your file, in case you go too far, and can't undo the mode change. NOTE: changing *back* to RGB is not the same as un-doing the mode change. Once it's dithered, it's dithered.

Well now you've got a smooth background, in 256 color indexed mode. You're ready to save as a transparent GIF89a. There's two ways to do this from within Photoshop. First, you could use the GIF export module that Photoshop provides. You'll find it und the 'file' menu, look for 'export'. This will allow you to save as transparent, but I really don't use it too much. The second, and superior way to handle this is with Boxtop's PhotoGIF filter. PhotoGIF has several benefits over the other GIF modules. One of the least obvious, but most important, is that it discards unused colors from the colormap, and file sizes are a little smaller. Definitely a "good thing"(tm)! From a design point of view, all the necessary tools are there. You can specify transparency either by color, or by an 'alpha mask' (that's the same as a channel, more or less). If you specify a color, it *creates* a mask based on that color when you re-open the file, Which is where you can get into some close-up, pixel based editing. This is one of the *best* features of this method over the others, IMHO. Another nifty feature is that it will give you the actual size of your file, in bytes, before it closes. You'll notice that interlacing is *not* checked, for transparent images it is not a good thing at all. Sometimes on a slow connection it will not clean up the edges properly, and it won't go away until the screen is re-drawn.

Well, that's it for now. In a future update I hope to explain some techniques utilizing Boxtop's nifty 'view the alpha filter' thing on re-opening the file. (Hint, you can *paste* that channel back into your original PS document, and then save the shadowed area with a background included!) Hmph! Kinda blew *that* one, eh? Maybe I won't do that update after all. Check out the "transparency" title image, it's been done this way, as opposed to the "hands-on" logo. Look close, you'll see it! Drop me a line if you want to see it with screen shots, but it's really kind of self-explanatory. Later! Your pal, -doc-