GIF in Adobe Photoshop CS3

Remember a few weeks ago when I posted this and promised a tutorial on creating an animated GIF? Betcha thought I forgot, didn’t you? I didn’t forget, but creating a tutorial is pretty time intensive, and lately it’s been tough to get a nice uninterrupted chunk of computer time. If only you could see my to-do list…it ranges from really cool art projects, to price updates for my Etsy shop to reminders to clean the bathroom. Seriously. I have a list making problem. But you’re here for a tutorial, and I digress…

Creating an animated GIF is easy.

It is. I wouldn’t lie to you.

1. Create a new file in Photoshop.

I made my file 630 x 630 to match the main content area of my site. You can make it any size you want, but I have a thing for symmetry and squares and balance. Just remember that the bigger you make your animated GIF, the larger your file will be, and the slower it will cause your site to load.

2. Go to your “windows” option at the top of your Photoshop menu bar.

Select “Animations.” You will see the window below appear.
{In this tutorial, I’m animating artwork that I previously created, so it was already saved in separate files. If you don’t already have artwork files ready, you’re going to create a layer in Photoshop for each frame of your animated movie. Layer one will be your original image. Layer two will show how the second frame will look, so you’ll be changing the size/color/location of your elements.}

3. Go to File–>Place in your Photoshop menu bar

Each file that you place will be a new layer, and a different frame in your movie. After placing the file, be sure to click back onto your image to get the prompt asking “Place this file?” Say yes, then repeat this process for each image to be included in your animated GIF. It’s also important to mention that your images all need to be the same size.

4. Go back to your Animation palette
Make sure you select the tab that says “animated frames”. Click on the right to select “Make frames from layers” from the drop-down menu.
(screen shot)

5. Each of your layers should now be represented as a square in your animation menu

Beneath each image you’ll see a time that tells you how many seconds the image will play on the screen before transitioning to the next image. Your choices range from .1 seconds (barely enough time for your eyes to register it) to 10 (which feels  like an eternity) and the length of time you select for each frame can be different. To see how your animation looks, press the “play” button at the bottom of the animation palette.
Let your sequence play through, then adjust your times accordingly. You might want some frames to be on the screen longer than others so that your movie “pauses” in certain places. If you want to change the timing of all of your frames at once, simply click on the first image while holding down the shift key and selecting your last frame. Every frame will now be highlighted, and will all be changed to whatever length of time you select.

6. If you want to smooth the transition between frames, you’ll use the “tween” button.

The tween button is located at the bottom of your animation palette, and it looks like three diagonal circles. When you click it, a window will pop up asking how many “tween” frames you want to add. The more frames you add the smoother your transition will be, but it will also increase your file size. If you’re creating a continuously looping animation (instead of one that plays once and stops) make sure you tween the last frame with the first frame, instead of the next frame. When you’re finished, hit “ok.”

7. Hit the play button again to test out your movie.
You might have to adjust your play times on your frames again.

8. Now decide how many times you want your animated GIF to play through.
If you select “continuous” looping, your movie will continue to play for as long as it;s on the screen. You can also choose to have the sequence play only once, or select “other” to repeat a predetermined number of times.

9. Now you’re ready to save your file
This part is important, so read closely. Go to File–> Save for Web and Devices. A window will appear  showing how your files will look saved at different sizes and resolutions. I normally view mine on “four-up” (you’ll find the tabs at the top left corner of the screen). On the right side of the screen, choose “GIF” from the drop-down menu. If you need to reduce your file size (remember, if you have a lot of frames, your file will be large) you can choose one of the lower quality options. One trick I learned in design school is to select a resolution that looks good, and then slide the “quality” slider until you see start seeing a degradation in image quality, then stop there.

10. If you need to shrink your file size even further, try using the “colors” option on the right sidebar to reduce the number of colors saved to your file.
Because I didn’t use very many colors in my art, I was able to reduce the number of colors in my file from 256 to 8 without seeing any reduction in image quality. This reduced my file size by over 70%. Play around with this option and see how it affects your image. If your image is going on the web (like I’m assuming it will) you want to reduce the size as much as possible to speed up it’s loading time. When everything is adjusted to your liking, hit save.

11. Now you test your image outside of Photoshop!
With your web browser open, drag the file icon into your window. Watch it do it’s thing, in all it’s GIF-y glory. Congrats…you created your first anim