How to Make Animated GIFs for Social Media

If you are trying to boost your social media presence then you need to make animated GIFs. It really is that simple. Dynamic visual content is absolutely essential to boosting your engagement on Twitter (as much as 313%) and Facebook (130%). The animated GIF is one the most commonly used video forms on social media.

The good news is that GIFs are incredibly easy to make, and the right idea could help you go viral easily.

Video guide to GIFs

We’ve also created a video version of this guide:

Why make animated GIFs?

There’s a whole lot of giffing going on. The GIF is the lingua fraca of social media: Facebook revealed that people sent 13 billion GIFs in the last year, or nearly 25,000 GIFs every minute. Twitter users love GIFs and they sent 100 million of them in 2015 alone. If you are looking to cultivate a personal touch to your business profile then engaging with popular communication tools can be quite helpful.

The other good news is that all of these Facebook and Twitter GIFs come from a library, usually Giphy’s, which offers you an opportunity to have your content spread across the internet. Brands that create a GIF can upload it to Giphy’s library, add a couple of interesting tags and then it becomes available to the audiences using Facebook Messenger and Live, WhatsApp, Tinder, Twitter, Slack, Telegram, Viber among others.

• See it in action if you search for “Good morning” – 2.1 million people end up selecting a Starbucks-branded GIF as a result. Netflix are all over GIFs too, with fans using “sad” 6 million times a month to find videos of shows and characters from the global video streaming service. Finally, there are 12.9 million searches for “dance” that lead to users clicking on a Coca-Cola GIF (data).

GIFs can give you an easy way to spice up your Facebook ads with a video. Video is among the most shareable content and boosts your reach by an astonishing 135% over photos.

You can also cross post them in emails. Email marketers make animated GIFs all the time and their results have been great. Dell tested the power of GIF in their email campaign for the launch of the XPS 12 Convertible Ultrabook. This is the GIF:

The GIF is nice. However, the results were beautiful: 6% increase in open rate; 42% increase in click rate; 103% increase in conversion rate; 109% increase in revenue.

Are you ready to get started?

Key guidelines when making animated GIFs

We’d argue that the most important guideline is to know your audience. If you don’t know your audience and you start giffing like a teenager, you could find yourself in real trouble. Get an idea for what your audience will find acceptable and then play by these rules. Once you are comfortable with your audience and the boundaries you can start making some GIFs.

• Timing is crucial. Don’t write a novel on these. Give your audience a positive experience and don’t tell them 10 ways to improve their copy.
• Avoid gradients. Gradients will lead to color banding when used in GIFs.
• Title then text. Don’t try and squeeze all of the information into one frame.
• Make good font choices and avoid script fonts. They are especially hard to read on mobile and Twitter.
• A GIF should be short and sweet. The format does not compress well, so you are best keeping it under 30 seconds so your file size is low.

How to make animated GIFs for free

You can throw your images into a free web app and have your GIF in a few minutes, or you can use existing video.

Make animated GIFs for free with Giphy

The best free tool is Giphy. Their GIF library is used to send over 1 billion GIFs and they are seen by more than 100 million DAU. You can easily create and upload your GIF to their library which is attached to the biggest social media apps available.

The first thing you need is some video or images. If you need some stock photos then luckily there are some great places to find them for free.

Once you have your content jump over the Giphy and get busy.

Click Create → Slideshow:

Select your photos and then drag and drop onto the screen:

You can caption your GIF and set the speed of the transitions:

Side note: it is very difficult to control the time with Giphy. If you have a lot of images you would like to use then you will receive an error message when you try to change the speed. You can see what happens when I tried to minimize the speed when using 6 images:

You can order your shots according to how you would like them to appear.

Click Create Slideshow:

You will then see the completed GIF with options to Favorite, Copy Link, Download or get the embed code:

Download –
will give you multiple options. You can download a full size source file, or you can download an optimized version. The social download will restrict the GIF to 10MB and the small will restrict the GIF to 2MB:

In my case, the source file was just 180KB. Social was 178 and small was 29.5KB. Obviously – with a simple GIF – when using still images then size is not such a problem.

Other options:

If you would like to pimp your gif then you can use GIF caption to add animated text, subtitle and captions.

The GIF editor will help you add stickers and other effects to your GIF. You can add your pre-made GIF, but you will not be able to select when the stickers pop up. They will be over the entire GIF and the speed is not very good. It is also not possible to remove stickers once they have been added to your GIF.

Best of the rest

Gifs.com will allow you to make GIFs from existing videos. It is free but you will have a watermark on any GIF you create. You can remove the watermark for $7.99 a month. Sign-up is required to create the free GIF.

If you are going to create a GIF from a screen recording then the best option is Recordit. You can download the app from here: http://recordit.co/. To make animated GIFs, simply drag the frame over the section of the screen you would like to record, and it will upload it and give you a shareable link.

Paid options to help you make animated GIFs

The best paid option is Photoshop because you will have full control over your images/GIF. If you don’t have access then it might be worth asking someone to try and put this together for you.

The steps are fairly simple.

Upload your images.

The first step is to place all of the images in one folder and click File Scripts Load Files into stack. Select all of the images you would like to include and click OK. Photoshop will create a separate layer for each image.

First open a new art board and click Layer → New Layer:

Give your layer a descriptive name to help organize everything. Create all of your layers and organize them as you see fit:

Click Window → Timeline  to open the video timeline. It will appear along the bottom of the screen, but you must be sure to select ‘Frame Animation’:

Return to the Layer menu and Select All layers.

Then click the menu option on the timeline and select Create new layer for each new frame.

Open the menu again and select Make Frames From Layers.

This will populate the timeline with each of the layers as a separate frame. The problem is that each of the layers will be present in every frame. If you need to have the layers revealed then you need to select a frame and leave only the information you want visible:

Once you have selected the correct visibility for each of the frames, you can set the delay. If you have a lot of text in the frames then you must make sure the time delay is long enough for users to read the text. I selected 3 seconds, which is plenty of time (maybe too much) for users to read a sentence.

To set the time delay simply click the time value below each frame and set the time:

You can also set the looping at the bottom of the timeline, which can be customised also. I set it to forever, but you can experiment with the number of loops according to the GIF:

Preview with the play button and adjust as necessary.

Save and export your animated GIF.

Click File → Export → Save for Web (legacy).

To open up the save options. It will select GIF by default, but depending on your background, you might need to make some changes. If you have a flat background then you should be able to set the GIF with the standard options:

If you selected a gradient for the background then you have to select dithering. Dithering will ensure you don’t have color banding in the GIF which looks awful, just awful:

In order to keep your file size down, you can avoid dithering. If you use a gradient then you will need to experiment with the dithering to see which number gives a good balance between quality and file size.

Click save and then check out the results:

My To-Do GIF ended up downloading at 38KB with full dithering. However, it is important to understand that the requirements here are quite low. There is no gradient, no animation and it is a simple GIF with text.

In order to make the most resource-effective GIF, you will need to consider the best practices from the very beginning. Manipulating the file size via reduction of digital elements will hurt the quality. Aim for a simple GIF which can tell the story, and you will be able to have a more effective GIF at the end.

Level up and make animated GIFs like cinemagraphs

This is a special option for anyone who wants to make animated GIFs that are more unusual. Cinemagraphs are still photographs with small repetitive movements that form a video clip. The first thing you will need is a good video clip with repetitive motion. Aim for something with a natural loop.

Open the video file with Photoshop and find the point you would like to use for the static image. Align the timebar with the image and select it via Shift+A → Ctrl+Shift+A → Ctrl+V. Photoshop will create a new layer with this image. You will see it added to the timeline at the end of the video clip:

When you make animated GIFs regularly, you learn to make things as easy as possible. So, the best tip to make life easier is renaming layers. I call them image and video. Kind of hard to get confused with these names. Just double click on “Layer 1” to get the option to rename:

It is also a good idea to reduce the size of the image. I always make it 800 wide. This will help us keep the file size managable. To change the image size simply click Image → Image Size and adjust the width. When you’re asked to convert the image to a smart object please select convert:

The image will form the bulk of the screen display and we need it to sit over the video. Select the Layer and move it above Video Group to create a new track on the timeline:

Align the image with the point you would like the video to start. Now we will cut the video to make things easy. Select the video layer and place the marker at the cut point. Then simply click on the scissors to make the cut and delete the clip you don’t need:

Grab the right edge of the image and then drag it to the end of the video clip to align the static image with the entire video:

Now we will create a mask on the image layer. This will allow us to reveal the video clip beneath it. Essentially, we are erasing part of the image to show the video. To create the mask just click on the image layer and then click the icon that looks like a circle in a rectangle:

The white box that appears is the mask and painting black on this layer will remove part of the image to reveal the video beneath. To get started, click the mask that is next to the image layer:

Select the brush tool and start painting the parts of the image you don’t need. If you remove visibility of the video layer you will see the background:

Once you have removed the parts of the image you don’t need, you can watch the GIF to ensure the animation is smooth and the masking is effective.

Now to export as a GIF. Click File → Export → Save for Web and wait for Photoshop to render your clip:

Bam! Done and ready for Facebook.

How to create a Split-Depth GIF

The final and arguably coolest of the GIFs will look like a 3D video with about 10% of the work. You need to find a clip where the subject comes close to the camera. The split-depth GIF works through occlusion to create depth. Two white bars superimposed over a video create the illusion of depth. The eye sees the white bars as in front of the video image, when the image is broken, it appears that the image has moved closer to you.

This tutorial requires After Effects.

The first thing you need is a clip with a moment of close-up. I used a dog clip that I found on Pexels free stock video site.

Open your clip in After Effects, scrub it and find the point you would like to use. Grab the ends of the clip and drag them in to shorten the clip:

We need to create the white bars that will create the illusion of depth. To do this, right-click beneath the clip and select New and then Solid.:

You can choose to lay the white lines horizontally or vertically. It depends on the path of the object. If the object moves left-right then vertical lines are needed. If the object path is up-down, then you will need horizontal lines. Depending on your needs, you should set the dimensions to 10px and 800px. Name the line accordingly:

Once you have the line on the screen you can duplicate it with CTRL+D or CMD+D. Rename and move the line. Set the lines so that the screen is broken into rough thirds:

We will again use masking for this project. The mask will go over the white lines to allow the dog to ‘break’ through. The mask will be automatically created when you draw a rectangle on the screen. Draw the rectangle to the side of the line and change the mask from ‘Add’ to ‘Subtract’:

Set the position as the key frame by clicking the Stop Watch next to Mask Path:

When you reach the “break” point, where you would like the line to be broken, then you need to move the mask over the line. To move the mask, you need to ALT click and drag it. Th animation will take care of itself and you will see new keyframes created. You can contour the mask to your object by SHIFT clicking the mask corners. This will allow you to move the mask around the object. You should also add feathering of about 2px to soften the edge:

Advance the video frame by frame and SHIFT click the corners of the mask to continue the contouring. Slowly skipping through the clip frame by frame is tedious, which is why the clip selection is so important.

Once you are finished with the masking, you can export the file. Select Composition and then Pre-render. In the render queue, select Output Module to open the settings. You can output as either PNG Sequence or Quicktime mov:

Almost there. When the file has been rendered, you will need to open Photoshop and import the saved file through the file menu → import → video frames to layers:

Make any final edits you would like when you get the range to import box. I select beginning to end:

From here the process is the same as for making animated GIFs in Photoshop. Click File:→ Export → Save for web:

Click save and wait for the file to finish. When you make animated GIFs for social media, the file sizes are an important consideration. I exported twice; one at 128 colors and full dithering which gave me a 15.9MB file:

The second file I exported at 64 colors and no dithering for 9.61MB:

Can you see the difference?

The first one is ready to be posted.

Final thoughts

It is actually pretty easy to make animated GIFs and you can increase your dynamic content with a minimum amount of effort. The idea of an animated GIF might be old but has not shown any signs of disappearing, indeed it has proven quite adaptable with cinemagraphs and other forms emerging.

With the continued integration of GIF libraries into social media apps, it is a perfect time to up your GIF game. If you take the time to make the higher level GIFs then you will be able to create impressions.

By Chris Fitzgerald

I put words into pleasing arrangements for ThemeIsle, CodeinWP, and ReviveSocial.