Animated GIFs

The Graphics Interchange Format, better known by its acronym gif, is a bitmap image format. What sets a gif apart from other bitmap image formats is that it loops smoothly. 

For this project, I chose an 800x600 pixel new document. I'll be building a room, so using the rectangle tool, I create the back wall. From the corners of the wall, using the pen tool, I show the ceiling and floor. For the walls, I created a large rectangle to cover the canvas and then send it to the back of the image with ("Shift+[").

For this gif, I will have a ball falling from the ceiling through a hole in the floor and reseting, so it will be a continuous loop. I create the holes using the pen tool to attempt to give some perspective, and I use the circle tool to create the ball. (I hold shift to scale it equally.) There only need to be two layers -- the background and the ball. This will let After Effects import them separately so I can animate them individually.

Once the After Effects composition is open, under the file tab, there is the import button (or right click on the project window). When importing an illustrator file into After Effects, there are two options -- composition and footage. With footage, you can choose to take a single image from the file, or with composition, it will load the different layers in. Grab the ball layer and move it to the starting location, then open the properties tab for the layer. In the transform tab, clicking on the stop watch beside the position property activates key framing, which will do most of the animating work. Once activated, it creates a keyframe at the current position, then move to when the animation will end. Now wherever the ball's position is when the next keyframe is placed will be animated from the original position. I duplicated the ball so that it will be seen through the hole. I used rulers to keep track of the starting and ending positions. (Shift-R and drag down from the ruler to create a guide.) Once the animation looks smooth, I take the grey bar on the timeline back to only include the actual animation. Then I take it one frame back, so that it will loop perfectly without any stuttering from duplicate frames.


After Effects Video Demonstration


After the animation is smooth, I will make it look as though the ball is falling from inside of the hole. To do this, I will look to the bottom left corner where there are three buttons. The middle button for the Transfer Control Panel which will let us hide parts of the screen. Turning it on reveals the TrkMat tab, and I use the rectangle tool to create a cover over the part I want to hide. Once I create one for both holes, I duplicate them for each of the ball layers. On each of the ball layers for the TrkMat setting they will be changed to Alpha Inverted Matte to subtract where the rectangles are from the ball. That should finish up the animation on the gif, and I'll need to render it out as a video to import into Photoshop. Change the render settings from Lossless to H.264. Lossless is extremely high quality that will take up a large amount of space, whereas H.264 can be 1080p while taking up much less space.


Photoshop Video Demonstration


In Photoshop, under file, I will go to import, then video frames to layers. Once it has imported all of the frames, under the window tab there will be animation or motion. I change the delay on all of the frames to no delay, and then file, save for web, and change the file type to .gif, which can be set to run once or loop. Once the gif is exported, it can then be uploaded to sites such as  where it will host the gif and provide an easy link to share.


For some great examples of looping gifs, check out Perfect Loops and Loading Icons.