Animated GIFs

[Gator Gamer]

Can anybody give me an explanation or link me to a tutorial on how to create animated GIFs?

Thanks!

[YrbkMgr]

Trevor Morris has a treasure trove of information; I think there's a nice little tut on Animated Gifs that will help get you started.

<http://user.fundy.net/morris/redirect.html?photoshop.shtml>

[Daryl Pritchard]

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 72x72 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

[Grant Dixon]

I was sent this URL and these animated Gifs really blow me away.

[url]http://www18.big.or.jp/~mnaka/home.index.html[/url]


--
Grant

Home Pages [url]http://home.cogeco.ca/~grant.dixon/index.htm[/url]

************************************************** *******

Creativity is so delicate a flower that praise tends to make it bloom, while
discouragement often nips it in the bud. Any of us will put out more and
better ideas if our efforts are appreciated.

Alexander Osborn (1888 - 1966)

************************************************** *******

[Jane Carter]

Hi Grant, Neat! My husband loves stuff like this too. The puzzle is fun.
Thanks, Jane

[Burdette Page]

just got a new computer HP 746 with Windows 6.0 XP I have not been able to view any animated gifs in the browser or open them up in photoshop. Is there a setting I need to change? Never had this problem before and can't find anything useful about it on the net.

[Raymond Robillard]

Burdette,

In Internet Explorer, check under Tools / Advanced / Multimedia. The fifth choice should be something like "activate animations" (I have the French version on my computer, so I can only guess how they call this option in English).

Ray

[bethC]

Burdette
I’m using Windows XP. I have the multimedia setting checked off “play animations in web pages” but I think that just allows animations on a web page to play. I know in Windows 2000 – you would associate a file such as .gif with a program. So I always had Internet Explorer open the gif files and let Adobe PhotoShop open the .jpeg files. With Windows XP if you click on the file (to highlight it) and right click with your mouse and go to “open with” you should see a menu of the available programs that could open a gif file. For example, one of the choices is Internet Explorer. I can also open the .gif file in Adobe Image Ready or Windows Picture and Fax Viewer. While exploring the gif files, which, you may be looking at in a file folder you, created – look to the left and you might see a column ‘Picture Tasks’. . . this would allow you the option of opening the .gif file in “view as a slideshow”.
Maybe you can associate a file with XP but this works okay for me.

beth