How to Make Animated GIF Screencast Videos

I wanted to share with you how I made the animated GIF screencast video from our last newsletter. It only requires a few tools and is so simple, even I can do it!

First of all, I needed a video. To be more specific: a screencast, one that I could create a video from. There are quite a few tools available online, but I settled on Screencast-O-Matic because it had all the features that I was looking for.

For instance, I like the way that I can record only a part of my screen – in this case, the image I wanted to resize. It’s also very easy to shave the start and the end from the video, making it shorter and removing the “End recording” bit at the end. When I click the mouse, it also shows that I’ve clicked, which is useful to the viewer as well.

Finally, it’s easy for me to export the video. I can either export it to a MP4 file, or I can directly upload it to YouTube. If you go for the Pro version, at only $15 per year (which I did), then you can also export to Google Drive and Vimeo. There’s a ton of other editing tools available to make your video look awesome.

Choose your recording area

Once I installed Screencast-O-Matic, I went to the correct browser tab and resized the window, focusing on the area I wanted to screencast.

Recording, refining and exporting

Once that’s done, I press Record and make my screencast. After recording, I can edit the video to trim the video length down and focus on key parts.

Also, there are bits I didn’t want the viewer to see, such as when I was exiting the recorded area to turn off the recording. By adjusting the sliders, I was able to change the start and endpoints, re-playing the video to see if it looks good!

The video is 5 seconds long. Ideally, animated gifs should be short, to keep the file size down. We’ll discuss this further in the next part.

I chose “Save As Video File” and then saved with the default settings.

And there you have it, you’ve made a screencast video! Next, let’s turn it into a GIF.

Converting your video

Now that you have a video, it needs to magically turn into something that you can use in your emails. We long for video in email, but sadly, it’s not well-supported across all the various email clients. So, we have to stick to silent animated gifs.

For the gif creation, I used a site called EZGif. It has a bundle of features, which means that we can really optimize the file size. We need to keep it low, so that your site’s bandwidth doesn’t get overused AND doesn’t make people wait too long for it to load on slow connections.

Once you’ve logged onto the site, choose “Video to GIF” and select your newly created video.

You can also choose to trim your video, but as we’ve already done that, just press Convert to GIF!

Optimizing your animated GIF screencast

After conversion, you can also make changes to it, such as adding text, effects, or optimizing the file size. To do the latter, click on Optimize and from the dropdown list, choose “Remove every 2nd frame”, then click “Optimize it!”.

You should now see your file size halved! However, the video is now double the speed. So to counteract this, I created a delay between frames. I used 50, but you can try different times by pressing “Apply!” and checking the output. This doesn’t affect your file size, it just makes the GIF look better.

Ideally your file size should be maximum of 1.8Mb – the smaller the better. In addition to removing frames, you can reduce your file size by capturing a smaller area and recording for less time (my video was 5 seconds long).

Export and save

Once you’re happy with the video, just press the Save button and the dialog will pop up. You can then upload your newly created animated GIF to your next MailPoet newsletter.

Get inspired

If you’re looking for some really beautiful examples of animated gifs in emails, there’s a nice post over on the Litmus blog which also demonstrates how to create animated gifs in Photoshop along with some inspiring designs from some of the big retailers. And we also have an in-depth guide on the best practices for GIF in email.