Today, you will build a looping frame-by-frame animation.
Introduction
Any media that shows movement does so by displaying a collection of static images in series at a rate that allows the brain of the viewer to imagine movement. There is no movement. The movement is an illusion, it comes from you, from your brain.
Frame-by-frame animation is the oldest animation technique. This is how the first animations were created. An artist draws a series of images containing slightly different position of elements. When the images are shown quickly one after the other, it looks like the stuff in the images moves.
This is a Japanese film from 1907 known as Katsudō Shashin (活動写真). In the rendition below, which shows the loop a few times, you can clearly see how it is built from multiple static images or frames. This animation has 50 frames meant to be played at 16 frames per second. (Each loop lasts a little over 3 seconds, if you count.) If you’re curious.
So, you will build an animation like this. Actually, you will create this animation:
This tutorial uses Photoshop to create a simple animated GIF file. (I assume you know Photoshop.) You can use any other tool. If you know and prefer another software or file format, go ahead. The only requirement for the assignment is that the animation is built using frames, and that it loops.
Read the whole thing once before you start creating the animation. If you have issues with certain parts, don’t hesitate to contact me.
Part 1 — A simple storyboard
To represent movement, you need to break it down into separate static ‘moments’. A storyboard helps you do this. It is a series of static images that show the changes that will be represented in your animation. It’s like a cartoon before it becomes anime.
The storyboard can be super simple, as we will do here. But you need a storyboard to make an animation, especially a frame-by-frame animation. It allows you to determine the elements that need to be animated. In the case of frame-by-frame animation, the storyboard also serves as the prelude to the frames (or images) we will need to draw. It does not contain all the frames, but it gives a sense of the motion we want to represent. This storyboard contains 4 frames, our finished animation will have 8.
For our animation, we will draw a ball that bounces. The ball will be a simple circle. To add a bit of realism, when the ball hits the ‘ground’, it will be squashed by gravity before it bounces back up. (This is one of the twelve basic principles of animation according to Frank Thomas and Ollie Johnston. Please look it up.You might want to apply these principles in your showcase animations.)
I drew this storyboard quickly in my notebook. Notice the elements: the circle ball, the squashed ball, the varying positions, etc. The storyboard is not perfect, but it shows what needs to be in your mind while you design the animation.
Key elements
When you design an animation that is meant to loop, there are things you need to consider to assure the continuity of your animation’s story or narrative. Think about this while drawing your storyboard.
Firstly, you need to design the last frame of the animation as if it was the frame just before the first frame. For a loop to work properly, any two consecutive frames can be the first and last. The motion must be continuous across all the frames. I will discuss this a bit further in the instructions below. But keep that in mind right away.
Another thing to think about is that everything visible in your first frame should be visible in your last frame, and nothing else. During the course of your narrative, if you introduce an object, you must remove it before your last frame. Same thing if an object is removed, it must be brought back. This is to assure continuity and to avoid a break in the animation. Look at the examples below (past students animations). On the first one, notice how the beer can appears when the arm pulls it and drops it on the table. If the beer stayed on the table, it would suddenly disappear when the loop happens. So the student had to remove the can from the frame before the end of the loop; that’s why it falls down and rolls out. The same idea applies to the cow in the second example.
There are other such details to take into consideration. I will discuss them when they become relevant throughout these tutorials.
Part 2 — The elements of the animation
The Photoshop file
In Photoshop, create a new file with the following dimensions. It does not matter what resolution, and you can leave the background white. I made mine black. You should not make the background transparent for this exercise.
Width: 400px
Height: 400px
So our file is a square, like each frame on the storyboard. We will design the animation in this square. You should save your file right away.
The first ball: circle
If we return to the storyboard, we notice that to create our bouncing ball animation, we need two different shapes: the circle ball, and the squashed ball. We will create each of these on separate layers.
The animation we will create uses layers to constitute the frames. We will not create one whole image for each frame, we will create the frames by showing and hiding layers as well as changing the position of shapes on the layers.
Use the Ellipse tool to create a circle in your image. This will create a shape layer. You can give it a colour. Mine is green.
Place the circle on the canvas, in the centre horizontally, and toward the top vertically.
The second ball: squashed
Duplicate the circle shape layer. (Cmd+J | Ctrl+J)
With the Move tool active, use the handles on the duplicate shape to transform its shape so it looks pressed down. Make sure the Show Transform Controls is checked. In newer versions of Photoshop, pressing Shift while you manipulate the handles will distort your shape (that’s what we want). So take the top handle, and move it down while pressing Shift on the keyboard. To make it more realistic, you should also make the squashed ball slightly wider. Grab one of the side handles, and move it while holding Alt (or Option). (This will effect the transform symmetrically on both sides of the shape.)
Place the squashed ball shape toward the bottom of the canvas.
You should also rename your layers.
Save your file.
Part 3 — The frames
Now that we have all the elements of our animation in the file, we will create the animation.
Photoshop has tools to make animations in the Timeline panel. If you don’t see it at the bottom of your screen, find it in the Window menu.
Note that the interface of this thing is not great. Make sure you follow all the steps.
Create a frame animation
Before you start, in the middle of the Timeline panel, there should be a button. If this button does not say Create Frame Animation, you need to click the little arrow next to it, and select the Frame Animation option.
Now the button should say Create Frame Animation. You can click on it. Note how the panel should look. If your panel does not look like the top picture below, you are not in the right mode and you will not be able to make the animation. (It is easy to switch mode, just click the button at the very bottom-left edge of the panel (yellow arrow in screenshot). But avoid this by selecting the correct option right away.)
Save your file.
The first frame
Using the Timeline panel adds a whole new dimension to Photoshop. Not only do you have layers which let you stack visual elements on top of each other, now you can change the properties of these elements along a time dimension.
When you activate the animation, you get a first frame. You see it in the panel. Each frame saves the position and other parameters of each layer in your file. So we will set the first frame the way we want it.
Hide the squashed layer. Make sure the circle on the visible layer is placed toward the top. This will be the first image, or frame, of our animation.
Set the delay time of the frame to 0.1 second (just below the frame thumbnail). This will determine how long the animation stays on this frame. We want this to be short. (You can also select No delay. Your animation will be smoother, but faster. We make a low frame count animation, so a bit of delay is tolerable.)
Set the loop factor to Forever (see image). This will make your animation loop constantly once we export it.
The second frame
Now, we need to create a second frame. Click the + icon at the bottom of the Timeline panel. This adds a frame to your animation.
With the second frame selected, you can move the ball layer toward the bottom. Don’t worry about exactly where you place the ball on this frame, but keep in mind that the more distance there is between the positions, the faster the movement will be. Look at where I’ve put mine, and place yours at a similar position.
Notice that the squashed layer is still hidden. We will show this layer only when we get to this part in the animation.
Now, if you press the play button, you should see your ball go up and down. Not much of an animation, but we will get there. :-)
Third and fourth frames
Create two more frames, one after the other. Each time moving your ball closer to the bottom. Don’t go all the way down though. Remember that we have a special version of the ball once it hits the bottom.
Your animation should look like the image below.
Save your file.
The middle frame
The ball has reached the bottom of the canvas in our animation. It is time to squash it with gravity.
Create frame 5.
On this frame, hide the circle ball layer, and show the squashed ball. Make sure the squashed ball is on the bottom of the square.
Save your file.
The last three frames
At this stage, we have everything we need to finish the animation. For the last three frames, we will use three of the frames we already have, and we will reverse them. For this very simple animation, we really do not need to use this feature. We could easily create the three last frames ourselves. But I wanted to show you that this copy–paste–reverse is possible.
Select frames 2 to 4. Click on frame 2, and Shift-Click on frame 4. Make sure you do not select the first and fifth frames.
With those three frames selected, open the panel menu and select Copy Frames.
Next, you need to click on frame 5 because we will paste those frames at the end of the animation. So click on frame 5. Then open the panel menu again, and select Paste Frames….
A dialogue box appears. The option you want to select is Paste After Selection. It’s the last option. Then click OK. Your animation should look like this.
The new frames should already be selected. If they are not, make sure the last three frames are selected for the last step: we will reverse them. The ball going down and the ball going back up is basically the same motion. (If we wanted to be super strict and do a great animation job, we should not make the two motions symmetrical. Remember the principles. But this is just an exercise.)
So with the last three frames selected, open the panel menu again, and select Reverse Frames. The order of last three frames has been reversed. Your file should look like this.
Try your animation now with the play button.
Important Note We did not duplicate the first frame (ball at the very top) at the end our animation. This is to make sure the animation performs as a loop. If we had the first frame repeated at the end, the animation would stall on this frame as it would be played twice: once at the end, and again at the start. It is important that your last frame is designed to be the frame just before the first frame. This is what makes the animation loop.
Save your file.
Part 4 — Exporting the animation
For this tutorial, we will generate a GIF. This is not a super great animation format, but it is simple, light, and it is still broadly used on the web. Most, if not all, animated memes are GIFs.
Photoshop has a strange relationship with animated GIFs. I am not sure why, but at some point the developers of Photoshop decided to completely change the file export dialogue. And when they did, they also decided not to keep the animated GIF export options. So in order to let people make GIFs, they kept a version of the old save for web dialogue. Adobe people make strange decisions sometimes. (They probably had good reasons.)
To export an animated GIF, you need to use the legacy tool. You find it in the File menu. My screenshot was done on a Mac, but it is the same on Windows.
The Save for web dialogue
The options here are pretty straight forward.
Select GIF as the file format. Make sure the animation section is set to loop forever. You can play with colour options later.
Note that it is possible to make transparent GIF animations. But they are not nice because of the way GIF saves transparency. I will not get into the details of this here. You will see that the Transparency option is checked here, but there are no transparent pixel in the image.
Final full-size animation!
This animation is a ridiculously simple product. It is meant as an exercise to show you the basic elements of building an animation using a frame-by-frame approach. The animation you will create for your showcase should be more elaborate.
There are also different techniques you can use to animate using the Timeline panel in Photoshop. Here is a tutorial from Adobe using a series of distinct photos to create an animation. There are other options.
On this page, you will find plenty of examples of loops created by students in my classes in the past. These show the diversity of styles and approaches you can use.
It is now up to you to create an animation that works with your concept!
