How to create animated GIFs for your blog, website, email and messages

Animated GIFs have been around since the early days of the web, but they are still used today and they can be funny, interesting, and sometimes irritating. Create your own with these tools.

Animated GIFs are those images that display a short animation lasting a few seconds, often repeating in a never-ending loop. They were once very popular because they were an easy way to add animation and movement to an otherwise static and boring web page.

They became over-used and when a web page had several of them they could be irritating instead of entertaining. Their popularity waned and websites used fewer of them. They almost disappeared completely.

However, with the rise of social networks and messaging, the animated GIF has made a comeback. These days you can create an animated GIF that goes viral – in other words gets shared and linked to by thousands or tens of thousands of people.

That can bring a lot of traffic to your website or massively increase exposure of your blog or business brand. They can be a great marketing tool when done in the right way. They can also be used to brighten up a dull web page on a blog.

Another use for them is as a replacement for a web page slider gadget. If you have several images that you want to show in sequence, it is possible to turn them into an animated GIF that shows each image automatically.

Giphy Cat

An animated GIF can be used to show how to perform some action or task. For example, screen shots of using software on the computer or phone, a time lapse video of a painting, drawing, construction, renovation and so on.

There are lots of uses for animated GIFs, so how are they made?

It is possible to create them with some photo editors and other image editing tools on the computer, but there are simpler solutions on the web. There are several websites that enable you to make animated GIFs for you and they are mostly easy to use.

Let’s take a look at some of them, they work on a Windows PC or Apple Mac in a web browser.

Make animated GIFs with GIFMaker.me

1 Use GIFMaker.me

Create animated GIFs at the GIFMaker.me website

Go to GIFMaker.me and there is an easy to use online tool for making animated GIFs. Click the Upload Images button to begin.

2 Select the images

Select images to turn into a GIF

A GIF is made up of two or more images and you must have these ready. I loaded an image of a cat into GIMP photo editor and then added some hearts, a star and Meow! text. Every time I added something to the image, it was saved with a new name. Cat1.jpg . . . Cat5.jpg.

Select the images and click Open to upload them to GIFMaker.me

3 Customise the settings

Create animated GIFs at the GIFMaker.me website

If the images are not in the right order for the animation, click and drag them to rearrange them. In the panel on the right, set the size of the image in percentage or pixels.

The set animation speed (the length of time each image is displayed), and the number of times to repeat it. A value of zero repeats forever.

4 Save the animated GIF

Save the animated GIF created at the GIFMaker.me site

Down at the bottom of the right hand panel is the link to download the GIF. Save it to disk and it is ready to be used on your blog, Facebook, email or message.

Make animated GIFs with Giphy

1 Use Giphy GIF Maker

Giphy GIF Maker

You may have heard of Giphy and it is one of the most popular sources of animated GIFs. Go to the home page and you can browse them – there are some excellent ones.

The site also has a GIF Maker and this online tool enables you to create your own animated GIFs. It is a powerful tool and it enables GIFs to be made from a series of photos, a video or from YouTube and Vimeo videos.

Click a button to select and upload photos or a video.

2 Slideshow settings

Giphy GIF Maker

Any number of images can be uploaded, but for this GIF I uploaded just one. The length of time each image is displayed can be set.

3 Add text

Add animated text to images to create GIFs using Giphy

Text can be added to the image and there is an option to animated it. You can’t see this, but the text here is wavy, rainbow, typed and so on – all animated. This means you can start with a static image and make it into an animated GIF with these text effects.

4 Upload to Giphy

Create an animated GIF using GIphy GIF Maker

The image must be uploaded to Giphy. Enter the URL of your blog and then click the button.

5 Download the GIF

Download the animated GIF from Giphy

The animated GIF is displayed and there are options to copy a link, download it, or get code to embed it. Click Download and save it to disk. Then it can be used wherever you want.

The download options include the original size and sizes optimised for different uses, such as sharing on social media.

Make animated GIFs with Motionbox

At first sight, Motionbox looks like an online video editor and it is. However, you can also create short videos and the output file format can be set to GIF. The result is an animated GIF that loops automatically. Free accounts are available, which limits the number of GIFs you can create each month to five. If you want to create more, you must pay.

1 Select a template

Motionbox web based video and animated GIF maker

You can start with a blank canvas if you want, but there is a library of ready-made templates that you can browse and select to get you started fast. Add a template and then just tweak the elements in it, like the image or text, and add extra objects of your own.

2 Add images

Motionbox web based video and animated GIF maker

Select Photos on the left and a library of free photos can be browsed and search. They can be added to the template or used to replace the image in the template. There is also an Uploads button in the left toolbar and you can add your own photos or videos.

Down at the bottom is a timeline that is similar to the sort found in video editors. There are photo and text elements and you can position them to choose when they are displayed and for how long. Building the animated GIF is very similar to creating a short video. There is a play position indicator and a play button that previews the animation.

3 Add plain or animated text

Motionbox web based video and animated GIF maker

Select Text in the toolbar and either plain, static text can be added or one of the animated text effects can be added. You can have both. What you can’t see in the cropped screenshot above are the text formatting options. There is selection of fonts and the size can be set.

4 Export the animated GIF

Motionbox web based video and animated GIF maker

When you are happy with the result, it can be exported to either a video or animated GIF. The resolution and quality can be selected and this gives you some control over the file size. Higher quality results in bigger files, lower quality produces smaller files.

Motionbox GIF creator has the most features of the GIF editors here and it is a powerful web app. The first time I used it to create an animated GIF, I found it confusing and getting things done seemed to be a battle with the interface. It just didn’t seem to work the way I expected and it was a bit frustrating. However, it does get easier to use after playing around with it for some time. I recommend you try this GIF animation tool.

Should you use animated GIFs?

There are some disadvantages to using GIFs, for example:

  • Large file sizes: Animated GIFs contain several images for the frames of the animation, so they can be several times the size of a single static image. This makes them slow to load.
  • Irritation: Too many animated GIFs can be irritating and distracting. Keep them to a minimum
  • Small size: To keep the file size reasonably small, image dimensions are usually small. Animated GIFs are rarely more than 300 or 400 pixels square.
Related articles

Leave a Reply