Making Animated GIFs

An animation is a series of slightly different images played at a high speed, giving the appearance of fluid motion. With this in mind, all you need to create your own animated GIFs are:

1. A series of GIF images with small changes to them
2. A program that will combine them into a repeating loop

Drawing your images

You can draw your images using any drawing app. For this example, I will use two pictures of Smooth Jazz as a cowboy.

You could either right click and save these images for yourself or draw your own images using a program such as paint or paintbrush. When you are saving your images, it is important that you are making sure you select the "save as GIF" option. Unlike HTML and CSS files, just writing ".gif" after the name WILL NOT save the file as a GIF.

Remember that in order for an animated GIF to work, all of the images creating it must be saved as GIFs. If they are not, you will get an error.

Animating the GIF

We will use the website https://ezgif.com/maker for animating our images.

There are a number of options for creating GIFs here, but we will focus on the "GIF Maker" section.

1. Click "Browse" under "Select Images"




2. Select all the files that will be part of your gif. You can hold ctrl on Windows or command on Mac and click to select multiple files at once




3. Click "Upload and make a GIF!"
4. This will take you to a screen that presents a number of options. You can add delays to the frames to slow the GIF down if it plays too fast, but you don't need to toggle any of these settings for the assignment requirements



5. Click "Make a GIF!"
   If this step gives you an error, please make sure that your pictures are actually saved as GIF images
6. In order to use this GIF, you will need to save it to your computer, as EZGif deletes new gifs after a short time. Click the save option and save your gif (it will go into your downloads folder by default). with the rest of your HTML files.