Smooth lines in transparent GIFs

Since I have had little experience until now in working with animated GIFs, I was horrified when I discovered that the “transparent” areas of my GIFs had terrible pixelated edges when placed over a background image. Now, I needed to use GIFs instead of PNGs because I needed the animation, and I also needed a background image instead of a solid background colour. So I started hunting on Google for a solution.

Initial searches for a solution were fruitless: Most people recommended having a solid background colour for GIFs. After rooting around a few more sites, I was beginning to wonder whether I should just add back those semi-transparent pixels from the PNG file that were lost…manually. As in, whipping out the hard-edged pencil tool and dotting in the gray dots along the image.

Thankfully, I was rescued from pixel torture by the marvels of Semi-Flattening.

Semi-flattening is a function in The GIMP (an open source alternative to Adobe Photoshop), accessible by going to Layer > Transparency > Semi-Flatten. What Semi-Flatten does is make a white layer beneath your image, merge the two layers (so that your image is now set against a white background), then delete the excess white area around your image. Semi-Flatten thus makes semi-transparent pixels opaque by layering them over a solid white background. The resulting transparent GIF has smooth edges, and you would be hard-pressed to find an obvious discrepancy between it and the original PNG.

Here is the original tutorial at GIMP Chat. It also has a link to a very useful script which

1. allows you to choose a background colour against which you want to flatten your frames against (good for when the background of the webpage you’re showing the GIF on is not white); and
2. can apply Semi-Flatten to all frames of an animated GIF automatically (good for when your GIF has 50 frames).