How to create animated gifs for email

Mar 17, 2021 | Email marketing, Email production

Animation is a highly effective way of drawing a reader into your content, sadly email offers limited support for animation! The safest format to use is gif. Here's how to create an animated gif for email.

Rob Tarlton

Senior Digital Designer

Although it’s a highly effective way of drawing a reader into a piece of communication, email offers limited support for animation. And because of these limitations, it’s important that we have maximum control over the animations we produce and use in email. This is so we can keep the file size down and stick to the most supported format – gif.

There are many tools available to create animated gifs. Even Canva, a favourite among social media marketers, has some animation options to bring extra depth to simple designs. Unfortunately, the platform offers minimal control. Resulting files are too large for email, and edits are difficult.

Our tool of choice is good old Adobe Photoshop. Adobe has a plethora of film and animation tools and applications. Simplicity is seldom key when power is paramount. But when it comes to email marketing, simplicity can often be most powerful. Bells and whistles destroy braincells.

Now let’s take a detailed look at one of the little animations we created for our campaign…

How to create animated gifs for email

 

Firstly, select Timeline from the Window menu.

Next, click on the Create Video Timeline button.
Click on the “Convert to frame animation” icon.
Now you can select how long you want the frame to display for. You can do this for each frame that you create, and you can change it at any time. You can also select how many times you want the animation to loop, or if you want it to loop forever ????.
For each frame, add the next piece of your story. In the example, we move the bird and make sure his wings flap in each frame – this produces a typical stop-frame animation. You usually need to play a lot with timing and sequence. Keep replaying to see if you’re achieving what you want. And since file size is so important here, you’d typically start with more frames than you need. Then you’d delete some of them and see if fewer frames will work. Fewer frames will always reduce file size.
Our animation uses flat colour, so we got away with 24 frames. When you use more colours and shading, the file size will drastically increase.

Simplicity is key. Make sure other graphic elements in your mailer are saved optimally as separate images.  

In email HTML, CSS animations are possible in some email readers. But they’re better suited for user interaction rather than keyframe animations, which draw attention without initiation from the user. CSS animation is not supported in Outlook on a Windows machine, so it’s difficult to justify the effort to create it.

Important tip

Changing anything on frame 1 will change it on all frames. This is the default setting in the Layers panel, and it can be unchecked.

We hope you enjoyed our tutorial! You’re welcome to download our final PSD file to see more clearly what each of the frames contain.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recommended reading