Home Web Development Creating an animated .gif in Photoshop CS5, CS6
Creating an animated .gif in Photoshop CS5, CS6 PDF Print E-mail
Written by Administrator   

1. Collect all the images you want to animate into one folder


2. Open Photoshop: click File > Scripts > Load Files into Stack



In the “Load Layers” window browse and  select all the desired image files and then click OK. This will import the files selected into individual layers. Note if necessary rearrange the layers into the correct order this is important as animation will be sequenced from each layer.




3. This next step differs depending on what version of Photoshop:

For Photoshop CS5: Open the Animation palette (Window > Animation)





For Photoshop CS6: Open the Timeline palette (Window > Timeline )


For Photoshop CC (Creative Cloud): Open the Timeline palette (Window > Timeline ). In the middle of the palette, you will see a button with a drop-down allowing you to choose either “Create Video Timeline” or “Create Frame Animation.” You want to choose & then click the Create Frame Animation button.


4. The Animation (Frames) palette will now be visible on bottom section.



5. In the Animation/Timeline palette menu (found under this button at the top right corner of the palette and click Make Frames From Layers.




This will take each layer in the document and set it as an individual frame in the animation. You can now view each layer in individual frames in the Animation palette.



6. Now we can change the duration of each frame. Make sure you are in frame view, not timeline view.



Note if you do not see thumbnail icons of all your layers in the Animation/Timeline palette, click the icon in the lower right corner (the hover text will say “Convert to Frame Animation”). Now back in the Animation/Timeline palette menu click Select All Frames.


7. The button "Forever" under the image frames  shows how many times the animation will loop. Set it to "Forever" to loop continuously.



8. Once the frame order and timing as been set up, it is time to save the image! Note you can preview GIF animation by clicking the play button.



Click File > Save for Web & Devices, make sure the file format is set to GIF, change any other options if needed, and save the image.




You will now have an animated GIF from a set of individual frames. Note the GIF animation can only be viewed in a browser.