How to make an Animated Infographic

Here’s a how-to on creating animation from TabletopWhale, utilizing Photoshop to build repeating cycle style art. This example applies this type of animation to scientific processes, but it could easily work to visualize any process that is repetitive, from seasonal activity to a manufacturing process.

The organization of the graphic launches you into the technical method way before it talks about planning the project, which might not be the idea method of starting, but it does give you the underlying technique right up front. This will be helpful if you’ve never created animated GIFs before, or if you aren’t familiar with cell frame animation, the most basic kind of 2D animation technique.

The author takes the classic “bouncing ball” animation, (usually taught either with or after a “walking cycle” as animation 101), and makes it a bouncing heart instead, to keep the theme related to biological science–although bouncing hearts are more in the realm of animated cartoons than scientific animations.

The content itself is quite carefully laid out to show you examples and tackle organization of the content as you go, something that is often pushed aside or not covered in many how-to’s. When it comes to working with editing film, animation, or anything with many small parts that have to be tracked, this is often where it’s easy to get lost when a change is necessary and you have to tunnel through the forest of folders and hierarchies where that single element is buried. Congratulations to the author of this guide for putting structure in place as part of the process (look at Part 2 for “how I organize a Photoshop file with many animated parts”.

The highly functional design gets high marks for clarity and condensing visually thick information in a non-intrusive format. Using a simple grid keeps it all in order and a simple color palette holds it all together neatly.

Does this instructional infographic inspire you to create some animated GIFs? Comments are welcome below.