The ultimate guide to creating GIFs for email (part 1)

Card image cap

In our last blog post, we introduced the power of GIFs and showed you the coolest GIFs on the Internet. So we figured it’s only right that we teach you how to create your own amazing GIFs. After all, if you’re reading this, chances are, you already have an awesome GIF in mind but need help making that idea a reality. Well, not to worry. Here’s part 1 of our step-by-step guide on creating GIFs for email.

Creating your animated GIF

There are loads of software that you can use to create your GIF but let’s focus on the one that you’re probably most aware of and most likely to use – Adobe Photoshop. With Photoshop, you can create GIFs with videos or still images. Ready? Let’s get started.

Creating animated GIFs with video

Step 1: Download the video clip you want to use

Have a good video that you want to use as a GIF? Great! Download/upload it onto your desktop where it’s easily accessible.
(Tip: You can use any video clip you want but be sure to pick shorter clips as a longer video generally means a larger file size.)

If you feel like your video is too long, trim it down to the length you want your GIF to be.
(Tip: The magic number is 2–3 seconds. If you want to go up to 10 seconds, that’s okay too but remember, your file is going to be massive and a lot harder to work with.)

Step 2: Open your video in Photoshop

To do this, just go to File > Import > Video Frames to Layers. Select your video file and Photoshop will open it as a series of still frames. Now, you get to choose how much of your video you want to turn into a GIF. Don’t forget to check Make frame animation.
(Tip: We recommend limiting your import to every 3 frames and choosing a scene or clip from the video you’re importing.)

Step 3: Play around with your settings

Once you’re satisfied with the length of your GIF, go to File > Save for Web, or hit the shortcut key CTRL-ALT-S. That will open a window with a whole bunch of settings.

Now, you can tweak your GIF to your heart’s desire. But whatever you do, don’t forget the whole idea is to keep the file size of your GIF as small as possible.

Colors: This limits the number of colours used to create your GIF. Play around with it and see how your GIF changes.
(Tip: Aim to get this number as small as possible without sacrificing the quality of your GIF.)
Lossy: This controls the quality and size of your GIF. Increasing this will degrade the quality of your GIF but it’ll also decrease the file size. Again, see how high you can take this before your GIF looks too pixelated to work.

Step 4: Save and share

Once you’re happy with your GIF, give it one final look through to make sure everything works the way you want then hit the save button and save it to the folder of your choice. And voila! Your GIF is ready to be shared with the world.

That wasn’t so hard, was it? Don’t forget to keep practicing and creating new GIFs. Remember to look out for our next post ‘The ultimate guide to creating GIFs for email (part 2)’ where we’ll teach you how to create GIFs with still images.

Author image

Master Web Hacker. Highly proficient in the tools of coding with a particular advantage in Java, Android and iOS development.

Leave a Reply

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