Animated gifs have been used since basically the dawning of the internet. GIF(Graphical Interchange Format) are image files that move. The gif format is so widely used because it can be easily loaded on just about any device. They can be used for a wide variety of things from showing you how the gears in a clock function, to a funny clip from a television show. Here I will be showing you how to make a simple animated gif with the use of Photoshop.
For the gif I am making today you will need 3 things; an image file, a video file and Photoshop. If you have access to Adobe Premiere Pro you may find this program to also be useful for cutting up your video clip into the exact segments you want. However it is not a necessary step so I won’t go into that any further.
My Goal is to animate the iris of an eye. To do this, import the original image of an eye.
Next use the background eraser tool and erase the iris so that it is transparent.
Now you will need to import your video file, go to File > Import > Video frames to layers
This will allow you to edit every single frame of your video clip.
After you import your video frames to layers, change your workspace for animation. Go to Window > Workspace > Motion
Now go back to the eye we edited earlier, right click on the layer and “Duplicate Layer”, for the destination choose the name you have chosen for your video layers. For this demonstration my video layers are titled “Untitled-1”
Next take the image of the eye and stretch it to fit the size of the video layer. After you do this make sure you have every single frame/layer highlighted in your horizontal motion layer workspace. Then on your right take the layer for the eye and bring it to the very top so it is on top of every single frame and layer.
After you have done this it is time to save this as a gif. Go to file > Save for Web. If you have a large file this may take some time to load. My gif was quite large so I dropped my image size percentage down to 25%
Once you have done this you can click preview, to see how your gif will look in a browser. If you are pleased with the end result click save and now you have created your first animated gif!
