March 31, 2014

Animating GIFs

Some of you may have seen a post on the Litmus blog recently titled, A Guide to Animated GIFs in Email. In the post, I extol the virtues of the animated GIF (with a hard G), talk a bit about creating them, and show off a few of my favorite examples. While it was a fun post to write, there were a few times where I caught myself lamenting the fact that I don’t often get a chance to actually create animated GIFs for email.

So, when it came time to send out our most recent newsletter, I took the opportunity to put my (admittedly weak) animation skills to work. I wanted to use this post to talk a bit about my process, since it differs a bit from what was posted in the original article.

First, some GIFness:

Animated GIFs FTW

While, in the article, I talk about creating GIFs in Photoshop, for something like this I found myself diving into After Effects instead. There are a few reasons I chose to use After Effects over Photoshop:

  • Pulling off that bounciness in PS would be extremely hard with basic frame animation.
  • Using the graph editor and custom curves in AE cut down production time drastically.
  • I needed an excuse to become more familiar with After Effects.

While Photoshop is magnificent for churning out quick animations that largely hinge on swapping layers and photos, it’s not the ideal place to execute animation with a bit more life, like the bouncing of the GIF file icons. It’s possible to pull off, but it would be unnecessarily time-consuming. Plus, animation isn’t something I get to work on often, especially in After Effects, so I relished the opportunity to dive in, even if just for an hour.

I made the original illustration that accompanied the article in Sketch. After cracking that back open, I exported the application illustration and GIF icon separately and brought those into a new composition in After Effects. While I could also have exported the dotted arrow, it was easier to recreate that and the background using shapes in After Effects.

The Composition

After laying all of the graphics out in their final positions, I started out with some basic keyframes for things like position, opacity, and scale. These keyframes are the bulk of the animation. But, without any tweaking, the animation looked rigid and lacked any life.

A Lifeless Animation

The real magic happens when you crack open the graph editor and start adjusting curves, at least for simple animations. After Effects is an extraordinarily powerful program, but with just simple keyframe animations and adjusting the curves of those animations, you can pull off some cool, fluid-looking stuff. And it’s fun as hell to play with, too.

The wonderful graph editor

Once I felt comfortable with the animation, I rendered the composition and dumped it into Photoshop for some cleanup. Like I mentioned in the article, Photoshop is an excellent tool for cleaning up GIFs and reducing file size. Since there’s not a lot going on in the animation, cleanup was just a matter of cutting off a lot of the frames at the beginning and end and using delays to hold others. I wanted a bit of time between the last frame and restarting the GIF, so I used a delay of 5 seconds on the final frame.

If the file size was exceedingly large, I would have played around with the number of colors and settings when saving. But, the limited color palette and flat illustration style kept things reasonable and I used the default settings on the “GIF 128 Dithered” option, which resulted in a GIF weighing 38.95k.

Once saved out, I passed it over to our Email Manager, Matt, and cracked a Diet Coke. Animating things is a blast and I’m thrilled that I had the opportunity to practice a bit for a Litmus email. I had so much fun that I’m going to try to do some more animations, both for Litmus emails, and on personal projects. I’ll likely post them here and on my Dribbble account, so check for those in the future.

Have any animation tips?

Let me know.