How to Create Animated GIFs Using

Photoshop
Photoshop CS6Photoshop CS3, 4, and 5 Extended
Edited by Eng3050fe, Jack Herrick, Maluniu, Viral and 37 others

Animated GIFs allow a designer to inject movement into webpage

graphics or avatars. Using Photoshop CS3 Extended—and now
Photoshop CS6—you can create and edit movie clips and turn them
into animated GIFs with no problem! We'll show you how to do it for
the latest version of Photoshop, and earlier versions of Photoshop CS
Extended.

Method 1 of 2: Photoshop CS6

1. 1

Launch Photoshop. To create animation with Photoshop, you will need to have at least
Photoshop CS3 Extended. Versions of Photohop starting with CS6 includes animation
in all versions.
Ad
2.

2
Open a video. From the File menu, choose Import > Video Frames to Layers...

 Select a movie file. Be aware that Photoshop will only import a maximum of 500 frames.
If the movie file you've selected is longer than that, you will need to trim it.
3.

3
Adjust import settings. In the Import Video to Layers window, make any adjustments
necessary.

 Range To Import
 "From Beginning To End" is the most straightforward. Photoshop will attempt to import
every frame of the movie. If there are more than 500 frames, the movie will be truncated
at that point.
 "Selected Range Only" lets you choose the in and out points using the controls at the
bottom. Use the scroll thumb to quickly look through the movie, and drag the bookends
below that to set the range of frames to import.
 "Limit To Every [n] Frames" will cut your frames by at least half, at the expense of
choppier animation.
 "Make Frame Animation" enables both the conversion of the movie into layers, and
turns the layers into an animation. Deselecting it will still import the movie into layers,
but does not then create an animation. For this tutorial, we will leave it selected.
 When you're set up, click OK to import your movie. It will take a couple seconds, then
you will see all the individual frames in the Layer menu, and each individual frame
spread out across the timeline.
4.

4
Apply adjustments. You can use Photoshop's adjustment layers to add effects, color
correction, brightness and contrast, and more. Adjustment layers are, by default,
applied to all layers below them.

 You can apply a wide variety of built-in adjustments. You can also add a new layer
using an overlay to change the character of the video, or a new base layer to add a
background.
 For example, you could have a short video of somebody just standing there looking
around. On the lowest layer, you might add a picture of the city—or the country—to
place them in a particular environment. You could then add adjustment layer on top of
everything, to give it a sepia tone. You could even recreate the look of the animated
newspapers in the Harry Potter movies.
5.

5
Edit individual layers. Click on a frame in the Timeline window, and find the matching
layer. By default, the frame number is the same as the layer's name, i.e., frame 18 can
be found on Layer 18.

 You can modify any individual layer, either to add effects, or clean up glitches, or
whatever strikes your fancy. If you do this over several frames, you can even animate
your effects.
 For example, if you add a lens flare to one frame, in the next frame you could type
Control-Alt-F (Command-Option-F on Mac) to bring up the same filter. Reduce the effect
by 10%, then move to the next frame and repeat the process. Continue until you've
reduced the effect to 0, and it will look like the lens flare is animated.
6.

6
Save your animated GIF. From the File menu, select Save for Web... This will let you
set the size and output options for the GIF, as needed to fit your requirements.

Method 2 of 2: Photoshop CS3, 4, and 5 Extended

1. 1

Create a document. Put each frame of the animation on a different layer.

 Alternately, open an existing video. From the File menu, choose Import > Video
Frames to Layers...

2. 2

Select the layers to be used in the animation from the Layers window.

 Note: To select a group of layers, select the layer at the top of the group. Then hold the
shift key and click on the bottom layer. This will highlight every layer in between.

3. 3

Open the Animation window. From the Window menu, choose Animation. When the

Animation window opens, it should look like the photo below. If it doesn’t, that means it
opened in the Timeline view.

4. 4
 Change to Frame Animation. Click on the "Flyout" menu in the upper right hand
corner of the Animation window and select “Convert to Frame Animation.”

 Create frames for each individual layer. Click the "Flyout" menu on the Animation
window and choose “Make Frames From Layers.”
 Note: All layers don’t have to be selected. To select a few layers, use the copy layer
button at the bottom right of the animation palette to add layers.

5.

5
Modify each frame as desired. Select the frame on the Animation window and change
it as desired in the main Photoshop window.

 Note: To add or remove a graphic from another layer to any frame, select the frame and
in the layers palette. Click the “eye” to toggle the visibility for that layer either on or off.

6. 6

Click on the arrow head under each frame to display the timing menu. Select the
display time for each frame.
7. 7
Save your GIF. From the File menu, choose "Save for Web and Devices" and choose
GIF from the drop-down menu.

 To save as a movie, select Export > Render Video from the File menu to export the

document as a movie.

Ad

Video

Tips
 Because Adobe ImageReady is no longer being developed, most of
the features from ImageReady are available on Photoshop CS3.
Those which are not will be available on Adobe Fireworks.
 Note: To loop your animation continuously, choose "Save For Web
and Devices" under the Save option. Under "Looping Options, select
"Forever" and save the animation. You can also pick "Others" and
select the number of times that you want your animation to loop.
 If you save an animated GIF file from Photoshop CS3, the animation
frames are lost. To solve this, open the animated GIF file in Adobe
Fireworks, which provides editable layers and timelines for GIF files.