Animation Station - Photoshop CS3

Every so often at work I have the steamy pleasure of creating animated banner ads. I am going to learn you how to make one. I learned to make them in photoshop, so that's how I'm going to teach you. An animated gif is basically a way to cheat out of having to use flash (strictly my opinion). Also gifs have a lot less compatibility problems than flash and it's way quicker, easier and more practical. The vast varieties of animation are pretty limited in photoshop though. Here is an example of an animated gif:




In this post I am going to show you how I made this animation. Feel free to to take your hand out of your pants and follow along!

1. First, you create your objects. For this animation, the only thing I created was the sky as the background, and my little balloon man. You just make sure the balloon man is on it's own layer, like so.



2. Next you have to open up your Animation window. You go to Window, then Animation.



3. Then, once it's open, I typically do frame animation rather than using a time line. At the bottom right hand corner there is a button to switch it to frame animation.



It should then look like this, with your first and only frame highlighted in blue:



4. Then while the first frame is highlighted, and with the move tool selected, move the balloon man straight down until he is completely off the canvas.


5. You then click the "duplicate selected frame" button in the animation window to create a second frame. The button is along the bottom of the window and looks the same as the "new layer" button in your layer palette.


6. Next, highlight the new second frame and move the balloon man straight up until again he is completely off the canvas.


7. Now, to quote MTV cribs, this is where the magic happens. You highlight both of your frames, then click the menu button at the top right of the animation window, and choose tween from the list.



8. The tween window will now pop up and it asks you how many frames you would like to tween for. Depending on how smooth you'd like the animation to be, you could either put a lot or a little. But keep in mind, the more frames, the larger the file is going to be. I chose 20 frames for my example. Once you hit ok, you will see that photoshop automatically makes all the frames that carry your balloon man from the starting frame to the ending frame.


9. Now there's just a few steps left and you're finished. You now want to change the length of time each frame is displayed, else it will stay on each frame for 2 or 5 or 10 seconds or whatever it's currently set on and your animation will lag worse than me trying to play World of Warcraft on my mom's desktop computer. For my example, the first and last frame are 2 seconds long, and every frame in between is .1 of a second. To change all of your middle frames at once, highlight all the frames between the first and last frame. Do this by click the first frame, then while holding in the "shift" button, click the last frame you want highlighted. It will then highlight both frames you clicked and all the frames between those two. While all these frames are highlighted, click on the area at the bottom of one of the highlighted frames that displats the time. A little menu will open that has default intervals of time for you to choose from; 0 seconds, .1 seconds, .2, .5, 1, etc. Again, I went with .1 of a second for my example but feel free to try different ones out and see what effect it has on your animation. Next, you would choose the times for your first frame, and last frame as well, and set them to whatever you would like. You can have all the frames be the same amount of time if you'd like. I have the first and last frame longer so there's a short pause before you see the balloon man again. You can also specify whether you would like the animation to just play through once, or repeat forever, like re-runs of I Love Lucy. The button is in the bottom left of the animation window and is usually set at "once" by default. I have mine set to forever so it constantly repeats.


10. Now it's time to see if all your hard work paid off. Just press the play button along the bottom of the Animation window, grab some popcorn and a nice hot cup of tea, take a lengthy hot bath, maybe brush your teeth and you're ready to watch this thing.


Enjoy and feel free to mess around with this now that you have a feel for it. You can do things like on one frame have the opacity of an object set at 0%, then on the next frame have it at 100%, and watch that son of a B blink into existence right before your precious eyes. Or, put a tween between those two layers and now watch the object fade into view like a creepy vampire. It's a lot of fun, and you can take this as far as making frame by frame animations like in the olden days, for those of you who want to pretend you're 80 and don't know what technology is. For those people, might I suggest learning flash you lazy holes. But anyhow, this is how you make an animated gif in photoshop. I hope this was helpful! If not, then why the hell did you read all the way to the end? In any case, another helpful tutorial on this subject can be found here. Now go on and make small animated shorts that demoralize your co-workers and/or members of your family, go for it.