Start Here

Guide entry section:

Image:

Guide Entry Text:

poster image:

Image:

Guide Entry Text:

Wait, what is this, again?

The purpose of this guide is to show you how to design and create an animated GIF that explains an idea. It will teach you about the strengths and weaknesses of the GIF format and how to maximize it for your goals.

Who is this for?

The guide is designed for communicators and educators who need better ways to get their message to their audience.

This guide is not focused on designers and does not rely on expensive tools like Photoshop (you can learn that process here or here). The goal of this guide is creating useful, educational animated GIFs using common tools.

I'm ready to get started creating GIFs. Can I skip to that section?

Of course. The sections labeled "Skill:" contain the specific tools and processes. The first skill focuses on finding or creating visuals. Go there now. The "Background" sections are designed to help you understand the GIF format, its strengths and weaknesses and how GIFs have evolved.

What tools do I need to create an ExplainerGIF?

We've worked to make this DIY process as accessible as possible by using common and relatively inexpensive tools. The tools we recommend are:

Please note that the guide provides links and descriptions to a wide variety of free and paid tools that could work for you.

Why would I want to create an ExplainerGIF?

Animated GIFs are a standard part of the Web and often used for entertainment. This version, the ExplainerGIF, is focused on communicating ideas. This guide exists for two big reasons:

Increased Shareability - Unlike online video, GIF animations play everywhere, including email. No plug-ins or embed codes are required. They just work.

New DIY Production Tools - We now have easy access to tools for creating our own GIFs.

Are you selling something? Is this an ad?

This guide is a free service of Common Craft and contains information about our Cut-outs, which are useful in creating ExplainerGIFs. The guide also serves as a preview for our Explainer Academy, which is currently in development. We are not affiliates for any of the products we recommend in the guide and no company has influenced our recommendations. There is no paid third-party advertising.

How long does this take?

You can consume the content in the guide in less than 30 minutes. Once you've learned the basics, you should be able to create an original ExplainerGIF in 15 minutes, depending on your design.

How do you pronounce "GIF"

This is a touchy subject. We say GIF like "Gift". Other's say GIF like "jif" the peanut butter. Please don't judge us.

A Note on the "Play GIF" Button

This guide includes a number of animated GIFs and you'll see them take two forms.

1. Constant Looping - This is the standard format for animated GIFs. They play over-and-over. This constant looping can be distracting but can be really useful, too. Here's an example:

2. GIF Player - Instead of the constant looping, we've added a blue play button that gives you control of when the GIF starts.

One click starts the animation, a second click stops it. Try it!

poster image:

Guide Entry Text:

Please note that the guide does not cover how to publish animated GIFs with a play button. That requires technical know-how that is unique to your usage and beyond the scope of the guide.

Let's Get Started! Our first step is learning more about animated GIFs.