Jump to Comments

 

Animation is becoming more and more popular. And the simplest form of animation is something you can achieve in Photoshop. But although lots of people try their had at this, very few people get it right. So for this tutorial we’re going to talk about what goes into the basics of animation and I will show you how to make a simple color fade animation, like the one you see above. Please note you will need a version of Photoshop that is CS2 or higher to complete this tutorial.

First, let’s start with the basics by creating a new document 200px by 200px at 72dpi. We’re going to keep this rather small because this is just to get you started and give you a peak as to what animation is all about. Next grab your custom shape tool and pick one of your favorite shapes – doesn’t matter which one really, but I chose Floral Ornament 4. Now, draw out your shape somewhere in the middle of your document and make it any color – I’m going with red. (see below)

Now, duplicate your shape layer by clicking and dragging it to the New Layer icon at the bottom of your layers pallet. Then change the color of this shape by clicking on the Layer Thumbnail (or the color box) of the shape. This will pull up the color picker. Chose your new color and click "ok". Make sure that your new color is very different from the first because if your colors are too similar then your animation is going to fall flat. I chose to go with a blue color. (see below)

Ok, believe it or not, your file is now ready to animate. So what you first need to do is go up to the top to your Window menu and pull up your Animation pallet. (see below)

When it opens it will look something like this:

That first image you see there is called a Frame. All animation is built on a series of frames, and the frames in the Animation pallet coincide with the layers in your Layer pallet. If at any time you chose to change a color or make an adjustment in your layer, it will automatically adjust the image in your frame. Try turning your "shape 1 copy" layer on and off (by clicking the eye next to it) and watch the Frame in your Animation pallet change with your moments. Once you’re done playing, make sure the layer is turned "on" before continuing.

The Animation pallet is similar to the Layers pallet. Each frame can be moved, deleted (by dragging it to the trash), and the new frame icon is the same as the new layer icon. But instead, the images are laid out horizontally, rather than vertically, and the buttons are different. Below, is a diagram of the buttons on your Animation pallet.

You’ll notice that I am trying to call your attention to the Tween button. This is because when creating animations, this button is your best friend. What the "Tween" button does, is creates transition frames between the main frames of your animation. The more transition frames you have, the smoother your animation is going to look. So let’s put this theory to the test. On your animation pallet, click the New Frame icon. You should now have two frames of the same color side by side. (see below)

Now, go to your layers pallet and turn off your "shape 1 copy" layer. Your #2 frame should change colors while your #1 frame stays the same. (see below)

 

Now, you’ll notice when you have your Animation pallet open, your Layers pallet is going to adapt some new features. These features are there to help you made adjustments on your frames (such as alignment, visibility, and adding layer styles) when you have a ton of frames and need to make universal changes to all of them. We won’t be using them for this tutorial, but here’s a screenshot for more information.

Ok, now comes the fun part – The Tween Button! While having your number 2 frame highlighted, hold down your shift key and click on your number 1 frame. Both frames should now be selected, and if they are, then click on the Tween button to pull up the Tween menu. (see below)

You’ll see that the default number of frames to add is one. Naturally, we are going to change that. This is actually where a lot of animated GIFs fall apart. It’s hard to know just how many frames will make for a smooth transition. Sure we could put in hundreds of frames, but then our file size would no longer be web friendly. So here is where you need to take the time to experiment. Type in a number, (any one will do for now) and click ok. For whatever number you typed in, you should now see that many new transition frames between your two main frames.

Now try hitting your play button. Two things will happen. The blue highlight color of your frames will move through your frames like rapid fire, and your shape should start to change color at an alarming rate. To slow things down, you have two options. Your first option being that you can add more transition frames. To do this though, you will first need to remove your current animation by bringing up the Animation Pallet Menu and selecting "delete animation." This will remove all of the transition frames but keep your first main frame. You can then just re-add your second main frame and hit your Tween button again to change the number of frames that you want to add. (see below)

Your second option is to change the Frame Delay Time. This is the amount of time the program will spend showing each frame during the animation. The less amount of time, the faster the animation will play. The default time is set to "No Delay" or zero. You can change this to fractions of a second, full seconds or multiple seconds, by first pulling up your Animation Pallet Menu and choosing "Select All Frames" and then bringing up your Time Menu by selecting a frame delay time from one of your frames. (see below)

From here, it’s just a matter of spending the time needed to find a good balance between your times and frames.

Here is an example of what the animation would look like if I used three main frames – two blue shapes and a red one between them – and then created 20 transition frames between each main frame. (As an extra step, I then deleted the second blue shape as I knew my animation was going to loop back on itself.) The two main frames were then set to a 0.1 second delay, and the transition frames were set to No delay.

And here is an example of what 5 frames would look like.

That last one is enough to give anyone a headache if you look at it too long. So, let’s see what it would look like if we kept the amount of frames equal to 5, but slowed down the frame delay time to a delay time of half a second each.

Although the slower time doesn’t make your head spin as much, the transitions are somewhat choppy.

Now let’s try 100 transition frames between each main frame, and reset our two main frames to a 0.1 second delay, and the transition frames to No delay. You will see that because I added so many transition frames between my two main frames, I now get this nice slow and smooth fade of color.

To then save your animation, just select "Save for Web and Devices" under your file menu and change your settings to the ones you see below.

 You now know the basics and have a simple color changing animation that you can add to any web page.

And, once you really start messing with it, you can set the stage to come up with all sorts of neat effects.