Creating Animated Gifs in Adobe Photoshop

Elements 2.0Janet Holland

Launch Photoshop Elements• File>Open & Locate

the graphic image you wish to animate

• Image>Mode RGB to be able to edit

• Image>Resize Canvas if you need to add more area around the image to work on your animation

Preparing the Layers

• Windows>Layers needs to be selected as indicated by a check mark

• In the top right palette well click on the Layer Tab and drag the palette down onto the desktop so it stays visible

• Double click on the Background layer in italics and rename the layer so it becomes unlocked to allow image editing

Duplicate Layers• 2 ways to duplicate layers to

animate• Select the layer to duplicate• Layer>Duplicate Layer• Or Drag the layer to be

copied on top of the new layer icon near the bottom right corner of the layer palette

• Repeat until the desired number of layers are created for each movement to be animated

Double Click to Rename Each Layer

• Last Layer at the Top Where the Animation Loop Ends

• Layer at the Bottom where the Animation Loop Begins

• Layer 5• Layer 4• Layer 3• Layer 2• Layer 1

Prepare Layers Palette• Select the next to the

bottom layer to begin editing the animation

• In the Layer Palette the eye icon should only be turned on for the layer you are working on

• You can paint/draw changes or lasso and move parts of the image

• Zoom in if needed

Edit the Graphic• Lasso Tools to Capture

Image Areas• Image>Transform>Free

Transform• When placing the cursor

outside the corner you see a curved arrow and are able to drag rotate the image

• Place the curser inside of the image to drag to another location

Continue to Edit All Layers• Repair as needed with the

paintbrush, clone stamp tool, etc.

• Repeat the process for each layer

• Select the layer you wish to change

• Turn the eye icon on for the active layer and turn the other layers off

Saving Animations

• When all animation effects are complete

• Eye icon turned on for the top & bottom layer only

• File>Save for Web

Save Animation Settings

• Select .gif• Check top

Animation Box• If you want a

continuous play check Animation loop box

• Set the Delay time as desired (0.5)

• Save to your folder

Place in Web Page• Place .gif

animation in your web page & save

• Preview in a Browser to be sure it is working properly

Another Example of an Animated .gif

• Same Basic Process

• Transparent Paint

Technique Rather than moving parts of the image