How Did You Do That? Creating An Animation Gif in Photoshop CS3

Yesterday's post resulted in quite a few emails from readers saying "How did you do that?" with that cute animated gif I created in Photoshop CS3.  It isn't difficult, although it took me a good 3 hours to figure out how to do after reading numerous tutorials and viewing numerous videos from others who tried to explain it.  Why did it take so much time?  Probably because whoever was writing the tutorials would either skip a step entirely or start talking about something else altogether.  Plus, I'm full of determination.  When I want to learn something, daggonit I buckle down the hatches until I've figured it out.  I was so proud of myself.  As I've said before, if I learn something new that I think you all might be interested in learning, I'll share it with you here.  It's fun!

Now, I have Photoshop CS3, so if you have another version, I can't be sure if this tutorial will work for you, but you can try.  I will say this, though, that in the numerous (about 10+) tutorials I read yesterday, I did learn that Photoshop CS3 and beyond is actually just a combination of the older version of Photoshop and ImageReady.  They just combined the two programs so that now everything you used to create in ImageReady can now be created in Photoshop CS3 and above.  Sound good so far?  Duh, I haven't explained anything yet.

Note: By the way, if you need to see the original larger image of my screenshots, a few of the images below can be clicked on and you can see its original size.

Alright, let's get started ...

Click on the image above for a Larger view

First step is easy, you will want to open up all of the images in Photoshop that you want to use in your animated gif.  So, for instance, if you have taken multiple photos of the same scene, as I did here with Hannah, then you will want to open them all up in Photoshop.  Make sure that each image is corrected for White Balance (the lighting) and that they all look consistent in hue, saturation, and corrections that you have made.

As you can see, I have 4 images that I am going to use to create a new animation of Hannah looking adorable. 

Click on the image above for a Larger view

Next step is to choose the photo that is going to be the first photo in the animation (or the "Background").  It doesn't matter what you call it, it will just be the image that will be on the bottom of all the layers we are going to create in Photoshop for this animation.  So, choose your first picture.  I am going to choose this one - DSC_3984. 

If you look to your right, you will see a panel that has 3 tabs: Layers - Channels - Paths.  Make sure your "Layers" tab is the one that is selected and you will see your first image in the panel that reads "Background."  Good so far?

I chose this first image of Hannah because it was "numerically" the first image I took of her.  The number of the images I will be using are: DSC_3984, DSC_3985, DSC_3986, and DSC_3987, so it just seems logical that I would start with the first picture in the sequence as my Background and the first image in the animation.

Click on the image above for a Larger view

The next step is to create "layers" of all the images you want to put in the animation.  You want your layers to be in order as well.  In other words, the first image (Background image) is DSC_3984, so the next image and layer I will place on top of this will be DSC_3985 and so on.  Just create the layers in the order you want your animation to move.

So, I am going to take these images that I have open in Photoshop and use the  "Move Tool" to move them on top of the first image DSC_3984.  This will create the "layers" I need to create my animation. Go ahead and do this on your own images if you are following along in Photoshop.  It's like putting cards on top of each other.  The card on the bottom here is DSC_3984. 

If you look at the screenshot above, this is what you see:

1. This is image DSC_3986.  I already put DSC_3985 on top of DSC_3984 and created Layer 1.  Now I am moving this next image in the sequence (DSC_3986) on top of the other 2 images and I will be creating a Layer 2.  I'll show you that screenshot in a moment. What you see here is that the image you have in your "Layers" panel is the one you are moving.  In this case it is image DSC_3986 that I am moving.

2.  Click on the "Move Tool" in the top left corner of your tool panel.

3. Hold down your right mouse button and move your image on top of the other images in your animation sequence.

Click on the image above for a Larger view

If you look in the panel on the right, you will now see that my layers are showing up in the "Layers" panel.  Take a look.  All of the images that I placed on top of the first image (DSC_3984) are in the "Layers" panel.  The last image I placed on top is the large image you now see in Photoshop.  If I were to click on any of the other layers here, that particular image is what you would see. 

Note: When you move your images one on top of the other to create layers, make sure that they are placed perfectly on top of each other like a perfectly stacked pile of cards, otherwise the animation won't look as good as you like.  Just be neat when you stack your layers.

Click on the image above for a Larger view

Now that we have created our layers for our animation, we want to create the animation!  How fun is this!!
So, in Photoshop, click on "Window" in the top toolbar, then you will get a drop-down panel and you want to click on "Animation."  I'll bet you didn't even know that was there did you?  Don't you just love these little discoveries in Photoshop?

Click on the image above for a Larger view

1. When I click on "Animation," a new panel will open at the bottom of my screen in Photoshop.

2. If you look in your "Layers" panel on the right you will see all the layers of images that will be your animation.  Highlight the first image (the one on the bottom that says "Background") and that is the large image you will see in Photoshop and the image that you will see in the first Frame of the Animation panel.

To start, in the "Layers" panel, you will notice that the 4 images all have an eye next to them.  "De-select" all but the first image, the "Background" image.  This will be the first image in our animation.

Next, click the button next to the trash can, the one that will duplicate the frames.  Because I will have 4 frames to my animation, I have created 4 frames in my Animation Panel. Click, Click, Click - done.

All of the images in the frames will be the same original "Background" image, but don't worry, we're going to change that.

Now, click on and highlight the image in Frame 2 ...

 

And de-select the "Background" image.  So, the 2nd image in your animation (Layer 1) will have the eye next to it and the "Background" image will not.  All of the frames will have eyes next to them too.  You can ignore them and leave them as they are. 

All you are doing here is highlighting each Frame in the Animation Panel and then telling it what image to put in that frame.  Select the image from the Layers Panel and de-select all the other images in your animation, and so on - Frame by Frame, do this until you are done.

Next step is to tell your animation how many seconds there will be between each image.  I selected 0.2 seconds.

If you look at the bottom of your Animation Panel, you will see the "Play" arrow in the middle.  Click that on and you've got yourself a spiffy animation.  Cool eh?  But wait, we want to save it.  So here's what you do.  

To save your animation, you click on "File" and in the drop-down menu you want to click on "Save for Web & Devices."  If you click on "Save" or "Save As" you will just have an image, even if you do save it as a Gif.  By saving it with the "Save for Web & Devices" it will save as a Gif Animation.

Click on the image above for a Larger view

A window will pop up with your Animation in the center - click "Save" in the top right corner.

Click on the image above for a Larger view

Give your Animation a name making sure it is saving as a Gif and there you go, you now have an Animation of your own created entirely in Photoshop.  And, just to show you what we did here ...

There you go, isn't she cute?  Now this obviously isn't the best animation, but you get the picture, right?  Just think of all the things you can do with this tool in Photoshop?  Remember when you were a kid and you would take a stack of white cards and draw a different sketch on each one to make it look like it was moving?  Well, this is the same thing.  Hope you enjoyed this tutorial!