Photoshop Tutorial: How to Animate Pictures

Many message boards now utilize a custom signature function. This allows you to have a permanent signature every time you post something. It can be fun to post up pictures of your family, pets, vacation shots, or anything else that you can think of into your signature. In this tutorial, I am going to show you how to create an animated signature picture that rotates several photos. This is a really neat effect that will have everyone wondering how you did that! We will be using Photoshop and Image Ready to create this effect. Image Ready is a program comes standard with Photoshop.

To begin, we need to open the pictures that we want to use. You can use as many pictures as you like, but keep in mind that the more you use, the larger the file size will become. Many message boards limit the file sizes, plus if your file is too big it will be very difficult for users with a dial-up connection to see. I generally use 4-5 photos. Open up your photos into Photoshop. Go to File, Open, and then browse to find the photo. Once you have opened them, minimize all but one to start with.

We need to crop our photos to the right size. You can vary this to your own liking, but a good size signature picture is not bigger then 250 pixels. Select the Crop tool located on the left tool bar and adjust your settings. I used 250x250 pixels at 72 dpi. This makes for a nice size signature picture. Crop each of your pictures (see picture: 1).

Once you have all of your pictures cropped, we are going to open a new image to work on. Go to File, New, and select the size to match your photos, in this case it is 250x250 pixels at 72 dpi. The background color does not matter as we will not be using it, this is just a starting board for your signature picture (see picture: 2).

Now we are going to drag each of our photos onto the new background. Use the Move tool and drag each picture over. Use that Move tool to adjust them to the right position (see picture: 3). Notice that each time we drag a picture over, it creates a new layer for it. If you do not have your layer palette open, do so that you can see what you are working with. Go to Window (up top) and check the Layer tab to open the palette.

After you have all of your pictures layered onto the new picture and positioned right, you can close all of the others except for our new signature photo. We won't need them anymore. Now we are going to import our photo into Image Ready so that we can animate the picture. Click the Image Ready icon (see picture: 4).

Image Ready animates your photos layer by layer. At the bottom you will see a timeline. This is what we will use to animate the picture frame by frame. First we need to set how long each photo will display. You can use any time that you like but my personal favorite is about 2 seconds (see picture: 5). Set the time and then click the little icon that will duplicate your current frame. Next, go to your layer palette and click the "Eye" icon on the top picture to make that layer invisible so that the photo below it shows up (see picture: 6). Each layer will have it's own separate frame in the timeline.

Continue to duplicate each frame and then make the next layer invisible until you have one frame for each layer. For this tutorial, since I used 5 photos, we have 5 frames. Each one is two seconds long. You do not need to make the last picture invisible as the background layer will show up and we do not want that. You can hit the play button to get a preview of how your animated signature picture will look (see picture: 7).

Once you are satisfied with how your picture looks, you will want to save it. Go to File, and then choose Save Optimized to save this as a .gif file for animating. And there you have it! Now you can load up your picture into your signature and it will rotate the pictures and amaze your friends.