How to make a GIF: Master this Animated Art

A tale by

Cody Green

The GIF. We’ve all seen them! GIFs all over blogs and social media and people love them. You’re probably thinking about your favourite memes or fun animations as you hear the word GIF. But there is so much more you can do with these little files, and branding is one of them! So let’s get started. Let’s learn how to make a GIF.

It’s “GIF” not “JIF”

So, what is a GIF? An animated GIF is a file format that allows you to use a series of separated frames and put them together in order to create a type of animation. A simple GIF can convey a message in a few split seconds.

A world of GIF design

We live in a world where our lives and our communication increasingly takes place online. GIFs are on the rise! They are used for everything, from popular culture to ad campaigns. For the next generation of designers and developers, knowing your way around motion graphics and having a good understanding of the basics of how to make a GIF is essential!

A good GIF can be playful and full of dynamism, or it can be slow and smooth; whatever describes the feeling behind the moving images. The key is to understand what makes for an eye-catching GIF and create a language that fits the mood of the message. However, there are some rules to learn and tools that can help you on your way to make really engaging, fun and clever GIFs! Read more on how to plan content for your GIFs and other social posts here.

So, why have GIFs become so popular?

For many designers, GIFs offer a new outlet for creative expression. This is partly because the core audience is younger and people are more interested in off-beat content. For whatever reason, brands seem more open to allowing creators to get creative with GIFs – more so than they would be with more conventional content. Because GIFs are smaller projects with generally smaller budgets, it’s less of a risk for brands to use this format to try something different.

As for what makes a great GIF, intuition has something to do with it. It’s about having an understanding of basic animation principles, a sense of rhythm, and being able to think of an idea.

Here, are a few tips for mastering the art of how to make a GIF:

How to make a GIF for the Social side

With social media usage hitting an all-time high it’s perhaps no surprise that the trend for GIFs in advertising is rising rapidly. Using GIFs in social content can be really powerful if executed right. GIFs are often seen as the ultimate attention-seeking device, bringing what would be a flat, static post to life!

For designers, there are a few rules to making effective GIFs for social platforms.
One of the biggest challenges is keeping your GIF below the file size limitations of each social platform. Shortening loops is an effective way of reducing the file size. There are also some particular rules for creating GIFs that will be compressed: first off, stick to a limited colour palette. Avoiding gradients is essential, as you’ll end up with either grubby shading or huge file sizes. Semi-transparent pixels are also a no-no, as the transparency is either fully on or fully off – something to keep in mind to avoid those jagged edges.

On display

It’s good to keep in mind the kind of devices your GIF is going to be viewed on. So, design with a small screen in mind. Keep everything simple and bold, so it works well on ANY device. Try designing in a square, you tend to scroll social sites in portrait on your phone, so it’s better to have a design closer to a square as narrower images will look smaller.

In the loop

Think about GIFs as being continuous, rather than having a definite start and end point. Try to tell a story that works within the loop – this helps to keep people watching GIFs for longer.

If the animation is short in length, it’s good practice to limit the loops to no more than three times before halting the animation completely. However, if you’re designing the GIF to go on social media platforms such as Twitter you don’t need to worry so much, as built-in functions only play GIFs when they are in view.
Finally, it’s essential to get your loops nice and smooth. There’s one particular pitfall to avoid – having the last frame of your animation the same as your start, this results in a tiny little hole where you see the same frame twice. Uh-oh! We’ve got an un-smooth loop on our hands. Make sure you remove that one at the end to avoid this.

Tooling up

For the majority of designers, mastering Photoshop is pretty much key when it comes to making your own GIFs. YouTube is a good go-to resource for online tutorials to pick up software basics: Once you’ve got a good understanding you can figure out how to adapt those principles to the style of work you want to create.

For more complex GIFs, After Effects is a designer’s tool of choice. There is much greater control over the movement and timing functions, as well as some extra tools to create really powerful animations.

Just Keep It Simple

With all these different options, it’s easy to get overwhelmed. There are many variables to consider, there is a lot of testing and technical know-how required to know how to make a GIF.
Some advice for beginners is to keep things simple: Start with a few elements to understand how things move, and slowly build up to more complicated animation. Soon enough, making GIFs will become second nature!

Share this: