MAKING PERFECT GIF TITLES
Excerpted from a more comprehensive article in the forthcoming issue of Scriptorium Magazine.
There seem to be an amazing number of web designers who have mastered
HTML, but haven't mastered some of the basic image processing techniques which will
make their pages look like more than just formatted text. The use of textured backgrounds
and transparent GIFs can add color and style to your pages without an excessive cost in
speed, providing they are used intelligently.
Transparent GIFs are a valuable tool in adding graphics to a web page,
because they are quick to load and give the appearance of being integrated into the background
of the page. One of the challenges for a lot of designers appears to be learning
how to generate transparent GIFs for titles and decorations that look decent on colored or textured backgrounds.
This is actually a fairly simple process and following a few steps can make it come out
right almost every time.
Aside from choosing attractive colors, which is a talent which some have
and others may never develop, there are two main effects you want to achieve. The first
is making sure that the lines of your image are cleanly defined without jaggies and the
second is a smooth transition from the background color to your image avoiding a halo
effect.
In the example above you will notice that the curved lines in each
character are made up of a series of somewhat jagged angles. This is probably the most
common mistake made when designing transparent GIF images for use online. Just because
your final image is going to be a 72dpi screen image, that does not mean that it should
start out that way. If you create the image at 72dpi then you are working with large
pixels from the very start, and your image program (we're assuming you use Photoshop or
an equivalent) will treat each pixel as a single, distinct color. This means that a
curved line will be made up of a series of square pixels, resulting in a jagged looking
line. In actuality a pixel can effectively be made to display more than one color, doing away
with this jagged effect. All you have to do is start with your image at a higher
resolution (at least 200dpi) and then as your last step before converting it to a
transparent GIF you reduce the resolution to 72dpi, which produces a smoothing effect
which makes the jaggies go away. This technique will not work in an 8-bit editor mode,
so you should be working with a 'RGB' image. To make it into a GIF you will need to
convet it to indexed color or 8-bit color, but when you do that the smoothing will be
preserved.
Another mistake which is easy to make when creating transparent GIFs is
not to take into consideration the color of the background the GIF will be shown against
when creating the GIF. The smoothing process mentioned above creates an area at the edge
of the image where the background and image colors mix. This can produce a kind of halo
effect where the image has a surrounding halo of the background color which is supposed
to be transparent, but actually shows up a little bit anyway. You can see this in
the example above, where the lines are smooth, but there's a hideous green area around
each letter. The easiest way to get rid of this halo is to pick a color for your
background which either matches the background color exactly, or is very close to the
dominant color in the background. With a texture the easiest way to do this is to
sample the most prominent color out of the texture and use that as your background
color. It's also possible to use this halo to your benefit. If you're concerned that
your image may not stand out enough, perhaps because it is a dark color on a dark
background, you can use a halo of a contrasting color to outline and separate the
image from the background.
If you follow these techniques, the end result should be something
like the clean, clear image shown below:

Transparent GIFs can be very compact and load quickly. Each of these
images is less than 4k in size despite looking nice and big. Remember that to make a transparent
GIF your image must be an 8-bit image and saved as a GIF89a type file. Some utilities
like the PhotoGIF plug-in for Photoshop let you pick which color is transparent. If you
don't have this feature in your image processing program look for one which does.