Making the animated GIF below
Animated 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:
- 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
Most important: Maximum dimension is 500 pixels.
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:
- Too many colours. Animated GIFs are designed to have a maximum of 256 colours.
- Corruption in your Mac computer.
- File too large. The animated GIFs work for me every time if neither of the dimensions are greater than 500 pixels.
- 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 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+.
A supernova is an explosion of a star into oblivion. Here is an animated GIF released by the European Southern Observatory.
See this example of a flag continuously flying on a web page.
Spinning around the north pole
See this spinning world from above.
Make your own Christmas tree animation.
Click on it
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.