How to Make simple animations (1)Have you seen any blog posts recently with animation videos that play automatically?

Did you notice that Twitter recently started supporting animated GIFs?

These kinds of animations are a great way of capturing attention, and also an effective way of explaining something, simply, in a few seconds.

In this article, we are going to outline how you can make simple animations for social media.

What is an Animated GIF?

GIF is an acronymn for Graphics Interchange Format.  An animated GIF is basically a graphic image that moves!

When you create an animated GIF, a series of images is replayed back to back, so it looks like a video recording.

Of course, you can do a video recording instead, but if you want something simple then the animated GIF is simple to create and will generally be small in size.

How Do You Create an Animated GIF?

The program we use is called LICEcap. It is completely free and is available for both Mac and Windows.

The first thing you need to do is download LICEcap to your local machine.

If you’re on a Mac, you may need to set the permissions for this application in System Preferences (security and privacy -> general -> allow apps downloaded from -> allow LICEcap).

When you open up LICEcap, you’ll probably be confused because it opens up a frame with nothing in it! This makes it looks like the software wasn’t installed correctly…..

….but don’t be fooled: this is the window that you use to specify what you want to record.

You can see, in the example below, that I’ve put an orange box around the LICEcap window.  It’s transparent so that you can see the area you want to record (in this case Hootsuite) within the application box.

 

Animiated gif
You highlight the area of the screen you want to record

 

You can change the size of this box to cover the area you want to record.

When you are ready to record, hit the record button in the bottom right-hand corner.  Next, you will be asked to pick a file name and then you’re ready.

 

Hootsuite animated recording
These are the configuration settings

 

The configuration settings are as follows:

  • Title frame –  Before the recording is shown, you can display a title explaining the GIF.  You can select the length of time the title should be on the screen for
  • Title – You can display text within your title frame or leave it blank
  • Elapsed time – Enable this if you want to display in the recording how much time has elapsed
  • Mouse button press – do you want to record the pressing of the mouse button?
  • GIF repeat count (0=infinite) – when you arrive on the post, the GIF will keep replaying. If you want it to stop after a certain number of times, you can specify that number here
  • Control+Alt+P – To pause and restart the recording.

 

Scheduling in Hootsuite
An animated GIF on how to schedule content in Hootsuite

How to Add other Effects to Animated GIFs

LICEcap does what it does very well, but it is not great for adding effects. If you want something basic that you’ll have up and running quickly, then LICEcap is probably the most suitable tool for you.  But if you want to add other effects, you can use a tool such as Ezgif. This provides you with functionality such as the following:

  • Resize your GIF – You may need to do this at times.  For example, WordPress doesn’t automatically resize your GIF, so will display it at the size it was recorded at (or resized to)
  • Crop – If you want to cut bits off around the edges
  • Optimize – This will attempt to reduce the file size
  • Effects – You can add various effects, for example changing it to sepia, or even displaying it upside down!
  • Speed – You can speed it up or slow it down
  • Split – This splits up the GIF into single frames so you can edit each one individually
  • Text – You can add text to the top, middle or bottom of the GIF.

 

Which Social Media Platforms Can you Embed Animated GIFs On?

You can embed them on your website and on Google+, Pinterest and Twitter.  They are currently not supported on channels such as Facebook or Instagram.

In January 2014, Twitter started to support animated GIFs so, if you attach a GIF to a tweet, it gets played when someone clicks on the play button within the image.

 

When to use animated GIFs

If you want to explain something in a video that only takes a few seconds, or if you want to capture something short that is not worth doing any editing for, animated GIFs can be ideal.  Having the GIF play automatically on social media channels does catch the eye, so this alone is worth trying out.  People generally don’t want a really long animated GIF playing in a blog post, but a short, snappy one works.

Summary

Animated GIFs are just another way of displaying content within social media that attracts attention.  It’s not suitable for every occasion but for brief, eye-catching videos they can be very useful.

When you share your blog post on the social media sites that support it, you can also post the animated GIF. This will attract attention on Twitter and encourage people back to your blog post.

Would you use animated GIFs?   Do you find them annoying or useful?

 

Clapper image by Shutterstock


Similar Posts You Might Also Like...
[wpforms id="21612" title="false" description="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-21612"><form id="wpforms-form-21612" class="wpforms-validate wpforms-form" data-formid="21612" method="post" enctype="multipart/form-data" action="/how-to-make-simple-animations/" data-token="1d802b3cc8a04908f101cd60377e855e"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-field-container"><div id="wpforms-21612-field_1-container" class="wpforms-field wpforms-field-name" data-field-id="1"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_1">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-21612-field_1" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][1]" placeholder="Name" required></div><div id="wpforms-21612-field_2-container" class="wpforms-field wpforms-field-email" data-field-id="2"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_2">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-21612-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" placeholder="Email Address" required></div><div id="wpforms-21612-field_6-container" class="wpforms-field wpforms-field-text" data-field-id="6"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_6">Website</label><input type="text" id="wpforms-21612-field_6" class="wpforms-field-large" name="wpforms[fields][6]" placeholder="Website" ></div><div id="wpforms-21612-field_5-container" class="wpforms-field wpforms-field-textarea" data-field-id="5"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-21612-field_5">Enquiry <span class="wpforms-required-label">*</span></label><textarea id="wpforms-21612-field_5" class="wpforms-field-medium wpforms-field-required" name="wpforms[fields][5]" placeholder="Enquiry" required></textarea></div><div id="wpforms-21612-field_11-container" class="wpforms-field wpforms-field-captcha" data-field-id="11"><label class="wpforms-field-label" for="wpforms-21612-field_11">Custom Captcha <span class="wpforms-required-label">*</span></label> <div class="wpforms-captcha-math"> <span class="wpforms-captcha-equation"> <span class="n1"></span> <span class="cal"></span> <span class="n2"></span> <span class="e">=</span> </span> <input type="text" id="wpforms-21612-field_11" class="wpforms-field-medium wpforms-field-required a" data-rule-wpf-captcha="math" name="wpforms[fields][11][a]" required> <input type="hidden" name="wpforms[fields][11][cal]" class="cal"> <input type="hidden" name="wpforms[fields][11][n2]" class="n2"> <input type="hidden" name="wpforms[fields][11][n1]" class="n1"> </div> </div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-21612-field-hp" class="wpforms-field-label">Website</label><input type="text" name="wpforms[hp]" id="wpforms-21612-field-hp" class="wpforms-field-medium"></div><div class="wpforms-recaptcha-container wpforms-is-recaptcha"><div class="g-recaptcha" data-sitekey="6LeM6ZgUAAAAAEkxPMgcFFoPipPfMkqzgcGXJioV" data-size="invisible"></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="21612"><input type="hidden" name="wpforms[author]" value="5"><input type="hidden" name="wpforms[post_id]" value="5470"><button type="submit" name="wpforms[submit]" id="wpforms-submit-21612" class="wpforms-submit bc-form-button-blue" data-alt-text="Sending..." data-submit-text="Send" aria-live="assertive" value="wpforms-submit">Send</button></div></form></div> <!-- .wpforms-container -->