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.