mad in pursuit: transparent gif tutorial

solving the problem of ugly white fringe

Cosmopolitan Productions

More guides & tutorials

Mad in Pursuit


The Problem

Grrr... why do .GIFs drive me crazy? I'm usually a .JPG girl, but I've gotten interested in tiny animations and, of course, I always love transparencies. I've used this caricature of myself on my journal pages. After getting frustrated with the ugliness of my .gif attempts, I reverted to a .jpg file on a color coordinated background -- ok, but a pain when I change backgrounds.

But now I've decided to make a blinking version of myself and can't avoid the transparency issue any longer. I took an experimental approach.


Photoshop CS2 or other applications that produce .gif files with customizable settings.





My original Photoshop image had the background turned off so that my drawing is on a "transparency." I "Save For Web..." and pick the GIF format, with the Transparency box checked. Then I play with the other variables like so:

A. Photoshop Restrictive (Web) preset: about 16 colors were generated, without dithering. The matte is white and very visible. (File size 5.6K)

B. 32-color (Selective color reduction algorithm), dithered (Diffusion dithering algorithm, set to 88%). Matte: none. Result: Ick! (3.3K)

C. How about the same as B, but with a black matte? Worse! (3.6K)

D. What if I boost the ante to 128 colors? Back with the default white matte, the results are hardly better than A, with a larger file size (14.6K). I fooled around with both the color reduction algorithms and the dither algorithms. Nothing seemed to make a difference, except for the matte setting.

E. Brainstorm! If mattes are the problem, and if white mattes are too striking and black mattes too gross, why not pick a neutral gray matte? Like color #cccccc. Hey, it looks great! This version is with 32 colors (Selective with Diffusion Dithering 88%). (9.8K)

F. Another try at 128 colors (14.6K). No discernible improvement, so why not save the bandwidth?

G, H, I: Version E on different backgrounds, still ok.


I discovered that the problem with ugly lines lay with the matte color. A neutral gray matte did the trick with my black lines.

Links to other tutorials and resources

A comprehensive problem-solving tutorial developed for Photoshop 5.5. Makiko Itoh at Wise-Women

Transparent gif tutorial by Absolute Cross


Visit our STORE.