Animated gifs are an art form.

IT’S A TRADE OFF BETWEEN ANIMATION, DESIGN AND COMPRESSION. There are specific programs you can use to output the gifs, but we’ve found that Photoshop does a pretty good job and you won’t get that much better a result in other programs. We’ve heard Fireworks is also pretty good, but we haven’t tried it yet. At the end of the day, it’s your animating craft that will dictate what you are able to squeeze out of the gif format.

       The best quality gif will only use a single color and will not change over time. The worst is when every pixel changes color in every frame. In terms of examples, we like this guy: Mathew Lucas http://www.89a.co.uk/and we really like these guys http://ztgsd.tumblr.com/. Movie posters are great examples of commercial gifs. Take note of the limited colour palettes and large static areas http://goviralnews.blogspot.com/2014/05/animated-movie-posters-in-gif.html

       Some things to consider to get the best results:

 

1. LIMIT YOUR ANIMATION AS MUCH AS POSSIBLE. Avoid full screen motion and only animate one part of the frame at any time. Leave as much of the frame as you can completely static or have entirely static frames if possible.

2. LIMIT COLOURS AND GRADIENTS AS MUCH AS POSSIBLE. Every colour you add will increase the file size, so monochrome high contrast gifs will always give better results.

3. ANIMATION COLOUR. Try to make things that animate mono-chromatically, ie: dust or rocks exploding should be black and white.

4. ANIMATION TEXTURE AND FX. Try to keep anything that animates as simple as possible, so no heavy textures or blurring, like motion blur.

5. FRAME RATE. High frame rates are a no no. Try to make your gif operate on as few frames as possible.

6. SCALE. Make sure you keep the dimensions as small as possible. Use borders or any way you can to keep the overall dimensions low.

7. DURATION. It’s an obvious one, but keep your loop as short as you can. Fewer frames equal a smaller file size.

Some examples that we like…

tumblr_mqe3c830f41r4mh0bo1_500

tumblr_mp41x5wWFC1st5y99o1_400

tumblr_mparj3VMJc1r4mh0bo1_500

Subscribe To Our Newsletter

 
Join our mailing list if you're interested in free tutorials, resources and news from the Jamdonut team.
Expect content around technology, VR, electronics and animation. You know, all the cool stuff.

We strongly advise it, there's a lot to look forward to. (We'll never spam you.)

You have Successfully Subscribed!