Professional Web Applications Themes

Animated GIFs - Adobe Photoshop 7, CS, CS2 & CS3

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

Sponsored Links
  1. #1

    Default Animated GIFs

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

    Sponsored Links
    Gator Gamer Guest

  2. #2

    Default Re: Animated GIFs

    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.

    YrbkMgr Guest

  3. #3

    Default Re: Animated GIFs


    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:


    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 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 Pritchard Guest

  4. Moderated Post

    Default Animated Gifs

    Removed by Administrator
    Grant Dixon Guest

  5. #5

    Default Re: Animated Gifs

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

  6. #6

    Default Animated GIFS

    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.
    Burdette Page Guest

  7. #7

    Default Re: Animated GIFS


    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).

    Raymond Robillard Guest

  8. #8

    Default Re: Animated GIFS

    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.

    bethC Guest

Similar Threads

  1. Messed up animated GIFs
    By Joshfree in forum Macromedia Flash Ad Development
    Replies: 6
    Last Post: December 31st, 05:43 PM
  2. Animated Gifs?????
    By JJEK in forum Macromedia Dynamic HTML
    Replies: 0
    Last Post: July 18th, 11:45 PM
  3. Animated GIFs keep running
    By mikez93 in forum Macromedia Director Basics
    Replies: 0
    Last Post: November 4th, 02:48 AM
  4. More Animated Gifs - a bug?
    By Rastermon in forum Macromedia Fireworks
    Replies: 0
    Last Post: September 15th, 10:28 PM
  5. .JPGs-to-animated .GIFs. How, says I?
    By Jonah Schwartz in forum Adobe Photoshop 7, CS, CS2 & CS3
    Replies: 5
    Last Post: August 27th, 05:44 PM


Posting Permissions

  • You may not post new threads
  • You may post replies
  • You may not post attachments
  • You may not edit your posts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139