0

I created a loader animation icon using the shape tool (ellipse). But when I export my animation, the circle has jagged edges and the quality isn't good.

What are good settings to prevent these edges and have a high-quality .gif as a result?

  • 1
    Hi bushra, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Vincent Apr 22 '15 at 8:23
  • Do you export it with a transparent background? .gifs can not display semi transparency, so you would get jagged edges. – Afterlame Apr 22 '15 at 8:40
  • "high quality gif" seems like an oxy-moron to me. – Scott Apr 22 '15 at 16:52
  • Already answered here: graphicdesign.stackexchange.com/questions/38750/… – Anil Singh Aug 3 '15 at 23:50
4

There's really no such thing as a high-quality gif. The format was developed in the early 1990s and is limited to 256 colours, one of which may be fully transparent.

Best you can do is optimize it for the current background colour, and choose fills & blends that do not involve a lot of intermediate shades.

If you want a basic spinner / throbber icon and your target is modern browsers you can get much better results with css animation and/or svg.

2

Gifs only support 1bit transparency (meaning that a pixel is either fully transparent or not at all), so depending your case you might use dithering option (old-fashioned) or match the matte color with your background color. You can find a former and complete answer in this thread: How can I remove the white pixels around the edges when exporting a transparent GIF?

Or, you can explore new and modern possibilities with SVG icons and CSS3 animation properties to obtain clean and scalable results. Take a look to this site to explore this option: http://codyhouse.co/gem/animate-svg-icons-with-css-and-snap/

  • I took the liberty to clarify a bit. Feel free to edit or rollback if I overstepped any bounds or changed things beyond your intention. – Vincent Apr 22 '15 at 13:24
0

Where are you using this GIF? On a website?

If that's the case I'd recommend using CSS3 animation as your primary loader, as these will provide the smoothest results. Here are some examples.Note that these are not images but instead are shapes rendered and transformed by the browser.

An animated file back-up isn't a bad idea though as older browsers (such as IE9 and below) don't support CSS3 animations.

Unfortunately as mentioned, GIFs aren't really all that great, so your fallback will be worse quality than native CSS3 solutions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.