Gator,
While I have no text to accompany them, I do have a couple of files you’re welcome to download and play with, in learning about creating animated GIFs. Perhaps you already know these few particulars, but I’ll state them here just in case. First though, here are my two files:
<
http://jazzdiver.com/photoshop/animation.gif>
<
http://jazzdiver.com/photoshop/animation.psd>
The second file can be opened in Photoshop, where each frame is viewed as a layer, or in ImageReady where you’ll see both the layers and the individual frames.
Now, regarding animated GIFs:
1. The GIF format support up to 256 colors, and I’m pretty sure that for an animation, the total color depth of all frames cannot exceed that. So, if you had 10 frames each containing 1 unique color on a transparent background, you’d have a color depth of 10…no problem.
2. Animated GIFs are nothing more than a series of GIF images that are packaged as frames into a single file that calls out the order in which to play the images, and the time that elapses between each frame.
3. How do you create an animated GIF? Easy…just create and save multiple images in GIF format, then bind them together using an application such as ImageReady, where you can define the order and timing of the images. Well, at least it sounds easy enough, right? 🙂
The easiest way I know to create multiple images of the same dimension is to do so as a single, layered file in Photoshop. This is well suited for animated GIFs since each frame of an animation will likely be just a slight change from the one preceding it. What I’ll describe here is a simple process to give you the basics, while what you’ll find at Trevor’s site will dress things up a bit:
Let’s say the animation you want to create is simply a sequencing through the letters A, B, C in red, white, and blue, respectively upon a black background with 72×72 pixel dimensions. Here’s how I’d do it:
1. In Photoshop – Create a new RGB image of 72 x 72 pixel dimensions with a black background.
2. Using the type tool, insert the letter A in a red, 72-point font. Move the letter to the center of your image. Duplicate this layer and edit it to a white B, then duplicate the layer again and edit to a blue C. Hide the text layers as needed so you can see the one selected for editing.
3. At this point, you should have 4 layers comprised of a black background layer and each of the A, B, and C layers. Although it could be done later, let’s hide the B and C layers by clicking to clear the "eye" visibility icon on each layer. Meanwhile, make the black bakground and A layer visible.
4. Now, if desired, save your work-in-progress as ABC.psd
5. Jump To ImageReady by clicking the bottom icon in the Toolbox or Ctrl+Shift+M so as to transfer your working image into ImageReady.
6. If the Animation palette isn’t already open, open it in ImageReady with Window > Animation. You should see your composite image appear as the first frame of the animation with the letter A visible on the black background.
7. Now, select the Duplicate Frame icon to the left of the trash bin at the bottom of the Animation palette and create two duplicate frames.
8. Select the 2nd Frame and then go to the Layers palette. Make the B layer visible and hide A. Repeat for the 3rd frame, making C visible and hiding B.
9. Select all three frames in the Animation palette and then choose the time interval drop-down on any one of the frames, selecting a 0.5 second delay.
10. Choose File > Save Optimized and save the file as ABC.gif. Also resave the ABC.psd file.
There! You’ve just created a rather basic animation. View it in a browser and you’ll see just how dull it is. 🙂
Now, go do something fancier and enjoy!
Daryl
