mad in pursuit: transparent gif tutorial

solving the problem of ugly white fringe

Cosmopolitan Productions

More guides & tutorials

Mad in Pursuit

Contact

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.

Software

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

Experiments

A

B

C
D E F
G H I

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.

Success

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.

...