Randy Krum
President of InfoNewt.
Data Visualization and Infographic Design

Infographic Design

Infographics Design | Presentations
Consulting | Data Visualizations

DFW DataViz Meetup

Join the DFW Data Visualization and Infographics Meetup Group if you're in the Dallas/Fort Worth area!

Search the Cool Infographics site

Custom Search




The Cool Infographics® Gallery:

How to add the
Cool Infographics button to your:

Cool Infographics iOS icon

- iPhone
- iPad
- iPod Touch


Read on Flipboard for iPad and iPhone

Featured in the Tech & Science category

Flipboard icon

Twitter Feed
From the Bookstore

Caffeine Poster

The Caffeine Poster infographic

« The Slow Speed of Light | Main | History of the Batmobile »

How to Make an Animated GIF Infographic

How to Make an Animated GIF Infographic Part 1

How to Make an Animated GIF Infographic Part 2

Eleanor Lutz has done some amazing design work with her company Tabletop Whale. She is known especially for her work creating animated infographics using animated GIF files. She has posted How to Make An Animated Infographic as a 2-part explanation that lays out her process in Photoshop (as an animated GIF file of course!).

Recently I’ve been getting a lot of emails asking for a tutorial on how to make animations. So this week I put together a quick explanation for anyone who’s interested. I archived it as a link on the menu bar of my website, so it’ll always be easy to find if you need it.

This is just a run-through of my own personal animation workflow, so it’s not a definitive guide or anything. There are plenty of other ways to make animations in Photoshop and other programs.

I’ve never tried making a tutorial about my own work before, so sorry in advance if it’s confusing! Let me know if there’s anything I wrote that didn’t make any sense. I’ll try to fix it if I can (though I probably don’t have room to go into detail about every single Photoshop function I mention).

I’m seeing more infographics as animated GIF image files online. Their advantage is that they are a self-contained image file that’s easy to share. No need for embed code or Javascript for readers to share the animation on other sites or social media.

I met Eleanor recently at the Malofiej Infographics World Summit, where she gave an amazing talk about her animated designs, her process, and even some discussion about when not to use animation. Check out the video interview with Eleanor by Visualoop at the conference:

Also found on VizWorld

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (7)

Thank you for this guide we have used it to create animated Infographics!
May 28, 2015 | Unregistered CommenterAaron Prowse
Your blog is really good. All the articles have details review information. Thanks to the author for this awesome blog.
June 27, 2016 | Unregistered CommenterBlake Dickerson
I'm seeing more data illustrations as energized GIF picture documents on the web. Their favorable position is that they are an independent picture document that is anything but difficult to share. No requirement for implant code or JavaScript for per users to share the liveliness on different destinations or online networking.
August 5, 2016 | Unregistered CommenterDonty Grundy
Great job, but use many time.
December 2, 2016 | Unregistered CommenterADS Digital Marketing
Awesome, and very helpful! I learned from this: http://www.paintshoppro.com/en/pages/gif-file/ how to open and edit GIFs but I couldn't figure out how to make one, so thank you very much for this, it helps a lot!
April 7, 2017 | Unregistered CommenterRon Bates
great <3
August 10, 2017 | Unregistered Commentertobias
An animated gif is created by it, so for that, I have some different tricks, for further about it you just research about it and after that, you will do it more and more.
November 9, 2018 | Unregistered Commenterepson error code 0xf1
Editor Permission Required
While we are migrating to a new site design, you must have editing permission for this entry in order to post comments.