Design better experiences Get started free
InVision Enterprise Learn more
The world's smartest companies use InVision

The world's smartest companies use InVision Enterprise Edition

Design Resources

7 tips for designing awesome animated GIFs

by

on

View all posts
Updated 3/27/2016: We’ve added even more info to this post. Enjoy!

Here at InVision, animated GIFs play a powerful part in our marketing and education. Heck, at one point in time, we even opted to use GIFs on our homepage instead of fancy code-based animations.

People always ask us how we make our GIFs, so we figured it was time to spill the beans.

blogtest

Designing GIFs

1. The secret sauce

Here’s my dirty little secret: all my GIFs start as videos. I usually make them in ScreenFlow, which is also what I use for our product videos. It’s simple enough to learn quickly, but packs some pretty useful animation tools.

After I export the animation as a video file, I import it into Photoshop via File > Import > Video Frames As Layers.

gif-post_0000_Layer Comp 1
Pro tip: If ScreenFlow or After Effects aren’t in your budget, create your animation in Keynote and export it as a video. Yep, there’s finally a use for that setting.

2. Fewer colors = more fun

If you want amazing GIFs, you need to be really selective about your use of color. Not only will it play a huge part in your file size, but using less color lets you make longer, more involved GIFs that are still relatively small in file size. (For me, small is under 1MB)

“Want an amazing GIF? Be selective about your use of color.”

3. When possible, use motion blur

Programs like ScreenFlow and After Effects let you export your video with motion blur. This not only makes your animation look more professional, but it also helps you fudge things a bit if you have to drop frames from your GIF in Photoshop for the sake of file size.

no-motion-example motion-example

4. Be (kind of) lazy

Imagine all the other things I could have added to the GIF at the top of this post. Little tooltips with usernames on them, a cursor clicking the plus button, hovering over the faces, unveiling more tooltips and hover states. People don’t need to see everything to get the picture, so only show what you need to—your time and file size are limited.

Exporting GIFs

Before you stress out about following all the tips below, just try exporting your GIF. If it’s a reasonable file size, good job! Keep doing what you’re doing. If it’s too big, try these out.

1. Drop duplicate frames

Your animation most likely pauses or rests at some point. If you look closely, you’ll notice that these moments contain a bunch of duplicate frames with a duration of 0.03 seconds. If there are 10 duplicate frames, delete 9 of them, and set the duration of that one frame to something longer, like 1 second.

gif-post_0004_Layer-Comp-5

If that doesn’t help, try re-importing your video, but this time select Limit To Every 2 Frames. It should cut your file size significantly.

gif-post_0003_Layer Comp 4
Pro tip: It’s not a hard and fast rule, but if your GIF has over 150 frames, you’ll have a hard time keeping your file size down.

2. Cut down on colors

When you’re saving your GIF in Photoshop, you’ll see a “colors” drop-down on your right. Play around with this. Set it as low as possible without turning your GIF into a hunk of junk.

gif-post_0002_Layer Comp 3

3. Tweak your lossy

If I’m being honest, I don’t even know what lossy means. But I do know that if you set it somewhere between 1 and 10, you’ll shave off some kilobytes without killing your quality.

gif-post_0001_Layer Comp 2

(Psst. Andy, this is what lossy means. Ed.)

None of this is working! Help!

If you’ve tried everything above but you just can’t seem to squash that GIF down, it’s time to take a step back. Are you trying to accomplish too much? Is there another way to achieve your goal? What if you broke it into a couple different GIFs? Like most creative products, your GIF will do better if it focuses on just one thing.


Bonus video: the super-fast making of

Pick it apart: Download the video file I made this article’s animated GIF with! (You’ll need ScreenFlow 5 to open it.)


Pro Tip: Use GIFs in your prototypes to produce some amazing transitions.

Head spinning? Here are some automatic GIF making tools

If all these tips have you feeling overwhelmed, give these options a try.

GIPHY GIF Maker (free)
You can keep your GIFs private if you have an account. Otherwise all your GIFs belong to GIPHY.

EZGIF (free)
While it’s not as simple or easy on the eyes as GIPHY, it does offer some extra controls.

GifBrewery 3 ($4.99)
I don’t buy apps to make GIFs, but if I did, it’d definitely be this one.


What did I miss?

Do you have a killer tip I should add to this post? Want to talk more about GIFs? Hit me up on Twitter @andyorsow, or just ping us @InVisionApp.

CTA for those not in hs to DO UI kit
CTA for those not in hs to DO UI kit
Author

Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.