How to Make Your Animated GIF Lose That Ugly White Border or Halo

From eLearning Brothers by

animated gif-02

The GIF image format was developed by CompuServe in 1987 and has been a mainstay since the infancy of the internet. From cats and batman, to falls and the ice bucket challenge, GIFs have been used to entertain us. But as soon as you make it with a transparent background, it falls apart. It gets ugly and you get weird white edges. How can you fix that?

This blog will go over what you can do to make your GIFs lose that ugly halo. This blog assumes you know how to make an animated GIF in fireworks, and focuses solely on removing the white border. For this tutorial I remade the click GIF we use in a lot of our courses.

Make it bigger

When I re-animated it I wanted it scalable so I made it huge. A whopping 1672 pixels! Way more than it will ever need. I exported 2 different versions below, one at full resolution, the other at 100 x 100 pixels. I then shrunk the 1672 x 1672 by using HTML code. So, not really shrunk, just displayed smaller.

As you notice the 100 x 100 pixel one has ugly white edges. But the 1672 x 1672 one doesn’t. The problem with this solution is it’s not really optimized. And if you used the big cursor 10 times it would add 1 MB to your file. Not the best choice if you want to keep your course small.

100x100_default 1672x1672

Place your background image inside with the GIF

Put it on a non-white background so the halo is showing. It is possible to get away with it by taking the hex number of the color of your background and place it in the animated GIF. But you would have to do this for every possible background you might use. And it would get harder when you run into a complicated background. In my opinion, this choice is dead on arrival. 


Choose a Matte color

GIFs do not support full transparency. They support 1bit transparency. What this means is you can choose 1 color to replace the default halo white. This is how you do it in Fireworks. In the export options under the tab named options, you can change the Matte color from that white to something a little less noticeable in your image. I chose a grey that matched the right side of the GIF.

matteSolution 100x100_Matted

In other software such as Adobe Photoshop or Xara Xone, the process is similar in choosing a Matte color. Out of these 3 choices, this one is considered best practice.

Happy GIF-ing!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s