Create Animated GIFs for your Blog (portrait)What captures your attention when you are reading someone else’s blog?

Images and video are great for breaking up lots of content and they add some color to your blog posts.

But what about adding some moving images and animations to your blog?

An animated GIF is a series of images put together to give the appearance of movement.  An animated GIF can play automatically so it captures the attention of your user.  They are really popular on the web in a variety of formats, and well-known sites like BuzzFeed are famous for their use of animated GIFs.

These animations can be very quick to create and they can also be really useful, for example, creating a short GIF to demonstrate a tool that you like using online.

We recently wrote a post on how to make an animated GIF for social media and it was so popular we have researched more tools for you.

Here are five animated GIF tools worth taking a look at if you want to create some mini animations for your website:

1. Create a Quick, Free Screenshot Animation with LICEcap

LICEcap is a free, downloadable tool that allows you to record actions that take place on your screen and save them as an animated GIF.

It is very simple but its results are impressive.

When you have downloaded the software and launch the tool, it can look quite confusing, because it just looks like an empty box.

But, in fact, this is the outline of the area of the screen that LICEcap is going to capture. This means you can resize the LICEcap capture box to make sure you are only recording the part of the screen you want.

The recording can be paused (by clicking ‘pause’ or by using the keyboard shortcut ctrl+alt+P) and the frames per second (FPS) can be chosen – a higher number will give a smoother gif, but the file size will increase and this could slow your website down.

typing4

2. Create a GIF from Photos for Free with Giffysnap

Giffysnap

Giffysnap is a website where you can upload a series of image files and create an animated GIF from them.  It is free to use and you don’t even need to register to use the service.

GIFs like this can be especially good to show transformations. Perhaps your real-life store has undergone renovations and you want to show before-and-after pictures, or you have updated your website design and want a GIF to scroll through screenshots showing the changes that have been made.

You can decide the order your images should appear in, how quickly they should scroll and what size the final GIF should be.

When the GIF has been created, you can download it to your computer or get code to paste it onto your site.  There is a tiny logo on the bottom right-hand side of the final GIF, but this is a really quick-and-easy tool to use.

3. Optimize and Edit GIFs with Ezgif

LICEcap and Giffysnap are great tools for quickly creating animations for your blog posts or website.  They do what they do very well but, if you are looking for more advanced features, Ezgif could help.

With Ezgif, you can edit the GIFs you have made in a range of ways. For example, you can:

  • Resize the GIF
  • Crop it
  • Upload a video file and transform it into a GIF file
  • Optimize a GIF by reducing the number of colors in a frame or omitting certain frames, which reduces file size
  • Apply color filters
  • Rotate or reverse the image
  • Change the speed
  • Add text to the GIF
  • Convert GIF images back into individual frames so you can edit them one by one, change the order, or remove a frame.
Ezgif offers different functionality options to edit and optimize GIFs
Ezgif offers different functionality options to edit and optimize GIFs

For each of these features, you go to the Ezgif website and choose which functionality you want from the toolbar at the top of the page.

In this example, we will use the GIF speed changer functionality.

You start by uploading your GIF to the site or adding the direct link URL.  At the top of the next page, you will see your GIF as it is.  Select a new delay time and click ‘apply’, then scroll down to see the GIF at its new speed.

Choose the speed you want, then click 'apply'
Choose the speed you want, then click ‘apply’

If you like what you see, right click the new GIF and save it to your computer.  By changing the time delay on the GIF above to five, you can see how much more quickly it scrolls through the images:

ezgif-3055478718
GIF from Giffysnap speeded up with Ezgif

 

4. Create Screenflow GIFs and Upload Them to the Web with Recordit

Recordit is downloadable software for Windows and Mac computers.  Like LICEcap, it records the action that takes place on your computer screen but, instead of creating a GIF file on your computer, it uploads it to the Recordit.io website and creates a shareable link.

When Recordit has been installed on your computer, an icon appears in the bottom right of the taskbar. When you click this icon, horizontal and vertical lines appear that you drag across the screen to select the area of your screen you want to record.

When you have chosen the recording screen area, a ‘record’ button appears.

Select are and Record
When you have selected the area of your screen, press Record

When you press ‘record’, Recordit then records everything that happens on your screen, within the scope of the box.  The ‘record’ button turns into a ‘stop’ button, which you press when your recording is complete.

A few seconds later, a clickable screen pop-up takes you to your recording, hosted on the Recordit.io site.  You can see an example of a GIF I made here.  There are social sharing buttons in the top right-hand corner and, if you want to download your GIF to your computer, you can click ‘GIF’ below the recording, then right click and save the file.

5. Create and Share Animated GIFs on iOS devices with Gifit App

Gifit is a free app for iPhone and iPad devices with two main capabilities.  The first one is its massive, searchable library of animated GIFs, which contains millions of GIFs in 40 categories.  Handy for text messages and Twitter, this part of the app is particularly suited to reaction-style GIFs like ‘happy’ or ‘confused’.

The second capability is probably more useful for businesses and blogs.  It allows users to create animated GIFs from images stored on their phone or tablet.  This could be screenshots of mobile-optimized sites or photos you have taken at a conference or behind the scenes in your office, and the GIFs can be shared, linked to, or saved to your iOS device.

What’s next?

Do you use animated GIFs on your website? If so, what are your favorite tools? Tell us in the comments!

 


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-create-animated-gifs/" data-token="db5ef66018c23239977514ed7dbf96f8"><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">Message</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="5960"><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 -->