Results 1 to 7 of 7
  1. #1
    Create an Animated Gif in CS3.
    MacBurg's Avatar
    Member Since
    Jan 26, 2007
    Location
    Waihi Beach, New Zealand
    Posts
    218
    Specs:
    MacBook Pro 15" 2.6Ghz | 200GB 7200 | 4GB Ram | 32GB iPod Touch 2G
    Create an Animated Gif in CS3.
    Hi all,

    Ever since the demise of imageready which was part of CS2, I have wondered how to create animated Gif images using CS3 Photoshop. I have figured it out and below is a basic tutorial, enjoy -

    First step is to load up all the seperate images in your animation as layers, in order, with the first image in the animation at the bottom.



    Next, hold down the Alt key and click on the "EyeCon" of the first image or layer at the bottom, this will show just that layer and this is our first frame of the sequence. Now go up to "Window" in the menu bar and open the "Animation" window, after the window has opened you should see your first layer you have visible loaded as the first frame. For my animation I wanted to include a white background, so throughout the sequence I will have the white background always selected, as well as another layer as I build the animation.



    Above you can see the animation window open, and the first frame of the sequence has loaded using the layers that were selected. Next we want to set the time for each frame, and this is done by clicking at the bottom of frame 1 in the animation window, this will pop up a small menu showing time in seconds, choose one or you can enter the time for the frame manually by selecting "Other". Now go to the top right of the animation window and click on the little arrow, which activates the pop up window, and select "New Frame. Next step is to head back to the layers palette and turn off the layer we just used for frame 1, by clicking on the "EyeCon" then turn on the next layer in the sequence for frame 2 by clicking on its "EyeCon". This will put the contents of the second layer in the sequence into frame 2.



    The time for this frame will be copied over from the first frame, but it can be changed individually if you like. From here you repeat the above procedure until you have a frame for each of the layers in your sequence, you can hit the "Play" button at anytime to test out the animation. Below is my animation sequence complete with all frames created.



    Once you are happy with the order and time settings of the frames, hit SHFT+ALT+CMD+S to open Save for Web, and it should have automatically changed the file type to Gif, ready to be saved.

    Thats about it, nice and simple, and without the use of Imageready, hope I have made it clear enough to understand.


  2. #2
    Create an Animated Gif in CS3.
    jotdess's Avatar
    Member Since
    May 03, 2007
    Location
    Seattle
    Posts
    724
    Very nice. Although it seems like an arduous process.
    Great spirits have always encountered violent opposition from mediocre minds.

  3. #3
    Create an Animated Gif in CS3.
    MacBurg's Avatar
    Member Since
    Jan 26, 2007
    Location
    Waihi Beach, New Zealand
    Posts
    218
    Specs:
    MacBook Pro 15" 2.6Ghz | 200GB 7200 | 4GB Ram | 32GB iPod Touch 2G
    Is there an easier way?

  4. #4
    Create an Animated Gif in CS3.
    johntalin's Avatar
    Member Since
    Dec 29, 2006
    Location
    California, the golden state
    Posts
    1,177
    Specs:
    G4 AGP 400 MHz 1.34gb RAM
    Great thread, thanks. I love step-by-step documentation. It helps a lot.
    "Do all the good you can... In all the ways you can... In all the places you can... At all the times you can... To all the people you can... As long as you ever can..." ~ Rules of Conduct

  5. #5
    MacHeadCase
    Guest
    Thumbs up
    Great tutorial! Thanks for this!

  6. #6
    Create an Animated Gif in CS3.

    Member Since
    Sep 19, 2007
    Posts
    1
    Quote Originally Posted by jotdess View Post
    Very nice. Although it seems like an arduous process.
    Quote Originally Posted by MacBurg View Post
    Is there an easier way?
    At the part where you add a new frame, instead of selecting "New Frame" select "Make Frames From Layers."

  7. #7
    Create an Animated Gif in CS3.
    MacBurg's Avatar
    Member Since
    Jan 26, 2007
    Location
    Waihi Beach, New Zealand
    Posts
    218
    Specs:
    MacBook Pro 15" 2.6Ghz | 200GB 7200 | 4GB Ram | 32GB iPod Touch 2G
    Quote Originally Posted by Gene View Post
    At the part where you add a new frame, instead of selecting "New Frame" select "Make Frames From Layers."

    Thanks, I have since noticed this feature and use it for animations where you only require one frame per layer, and you have the layers set in order. However, some of the larger animated banners I create have many layers of varying opacity, which get used many times throughout the sequence. To deal with this I simply created a quick action that creates a new frame simply by pressing f8, saves a bit of time fiddling with the menu to access "New Frame", especially when you have over 60 frames in an animation.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Animated gif for web
    By Clarencegg in forum Images, Graphic Design, and Digital Photography
    Replies: 8
    Last Post: 09-29-2011, 01:08 PM
  2. Animated gif help
    By design1 in forum Images, Graphic Design, and Digital Photography
    Replies: 2
    Last Post: 09-21-2009, 04:43 AM
  3. Animated Gif Software
    By TURK in forum Images, Graphic Design, and Digital Photography
    Replies: 2
    Last Post: 03-09-2008, 01:21 PM
  4. Animated GIF's
    By playm0de in forum Images, Graphic Design, and Digital Photography
    Replies: 12
    Last Post: 09-03-2006, 03:57 AM
  5. How do i create an animated .gif in preview?
    By shapdaddy in forum Movies and Video
    Replies: 1
    Last Post: 11-13-2005, 12:23 AM

Posting Permissions

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