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 post 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.
|
 100 x 100 Default (Ugly White Halo)
|
 1672 x 1672 Shrunk to 100 x 100 (Click for Full-Size)
|
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.
Matte color is same as background (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.
 |
 Matte color is changed to an inconspicuous gray.
|
https://www.youtube.com/watch?v=c6z4emQDukU
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!
