How to Make an Animated GIF

(Last Updated On: July 4, 2017)

Making the above animated GIF

Animated GIFAnimated GIFs are becoming more popular in the websites of major companies. As long as it is subtle and does not distract the reader, it is a good way to get a website visitor to notice something.

(The above GIF keeps repeating itself every 9 seconds or so.)

Create an animated GIF in 4 steps

1. Write your script

2. Gather pictures

  • I went online and got the amazing stock photo with the yellow affiliate key.
  • Used GIMP to edit several pictures.  The YouTube video below explains how I did it.

3. Create animations with Keynote

First of all, look at your script and decide which pictures you need. Create them using GIMP.

This is so complicated that I am explaining it with a YouTube video.  Pause the video frequently to take notes.  There are lots of steps.

Click on the Keynote link above to find out how to turn your still pictures into animations.

(Note that you may have problems unless your maximum dimension is 500 pixels.)

4. Edit and upload with ScreenFlow

Using ScreenFlow 6.0 or greater:

Animated GIF

  • Start by making the dimensions 500 x 500 px.
  • Keep reducing one of those dimensions so that the animation is as large as possible without having a white border.
  • File > Export
  • Select animated GIF
  • Export

Most important: Maximum dimension is 500 pixels.

 

Troubleshooting

If you are having trouble making animated GIFs with ScreenFlow 6.0+, it may have nothing to do with your ScreenFlow program. Four other alternatives:

    1. Too many colours.  Animated GIFs are designed to have a maximum of 256 colours.
    2. Corruption in your Mac computer.
    3. File too large.  The animated GIFs work for me every time if neither of the dimensions are greater than 500 pixels.
    4. After you have finished the above steps, close your computer down and start up again. Then you should be able to make animated GIFs to your heart’s content.

Solving my animated GIF problem

I suddenly was unable to successfully make even simple animated GIFs. So, I

    • Deleted lots of pictures
    • Emptied my trash
    • “Disk”, Enter into spotlight (magnifying glass in upper right-hand corner of screen)
    • Waited several seconds and then click the First Aid icon
    • Closed all programs and click Apple icon > Restart

As soon as the computer started, I was able to make animated GIFs.

animated-gif-final-pinterest

 

 

Related pages

Animated GIF on Google +

To get an animated GIF on Google+, have the animated GIF at the top of your web post. Link to that post from Google+. Your GIF will automatically be posted on Google+.

See example.

 

Supernova animation

A supernova is an explosion of a star into oblivion.  Here is an animated GIF released by the European Southern Observatory.

Australian flag

See this example of a flag continuously flying on a web page.

Spinning around the north pole

See this spinning world from above.

Christmas tree

Make your own Christmas tree animation.

 

Click on it

Animated GIF

 

 

 

 

 

 


Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

tweets

Leave a Reply

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