Easy Way to Create an Animated Gif in Photoshop

Currently Photoshop provides many tools for web design, apart from imaging software for this medium. In the tutorial today we will see how to create or make an animated GIF in Photoshop, for this tutorial we are using version CS3, but you can do it too without problems in versions CS4 and CS5.

Below is given the Step by Step method of creating Animated Gif in Photoshop:

Step 1

Create a document with each frame of the animation in a separate layer.

Step 2

Select the layers to be used in the animation.

Note: To select a group of layers, select the layer on top of the group. Then press the Shift key and click on the bottom layer and this will highlight all layers. Open the animation palette in the window menu bar and select “Animation”.

Step 3

When you open the Animation palette should look like this. Failure to do so means that opened in the timeline view.

Step 4

Change the view frame of the animation by clicking the flyout menu in the upper right corner of the animation palette and select “Convert to Frame Animation” or “convert to frame animation.”

Step 5

Change each layer shown in a table showing each layer in its own frame, clicking the menu in the Animation palette and choosing “make frames from layers”

Note: All layers need not be selected, to select a few layers using the copy button layer at the bottom right of the animation palette to add layers.

Step 6

Modify each frame by selecting the frame in the animation window and change what you want in the main window of Photoshop.

Note: To add or remove a chart from another layer to any frame, select the frame and in the Layers palette, click the “eye” to toggle the visibility of the layer.

Step 7

In each frame there is an arrowhead pointing down. Click the arrowhead to display the time and select the display time for each image.

Step 8

From the File menu select Export to export the document as a movie or in the Save As, save the file as a Gif. Sure to select Save for Web & Devices (Gif in this option).

Note: If you want to loop a continuous animation can select that option in the window that appears after selecting “Save for Web & Devices”. In the color chart shown is “Looping options” select “Always” and save it. You can also choose “other” and select the number of times you want the animation to repeat.

Author Bio: This article has been written by Mohd Aktar a freelance writer working for GO-Globe.com, a Dubai Web Design company that provides web design solution in Shanghai, Sharjah, Hong Kong and Middle East.

Leave a Reply

Your email address will not be published. Required fields are marked *