Creating Animated Gifs in Adobe Photoshop Elements

1
Creating Animated Gifs in Adobe Photoshop Elements

• Janet Holland

2
Launch Photoshop Elements

• FileOpen Locate the graphic image you wish to
  animate
  
• ImageMode RGB to be able to edit
• ImageResize Canvas if you need to add more area
  around the image to work on your animation

3
Preparing the Layers

• WindowsLayers 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

4
Duplicate Layers

• 2 ways to duplicate layers to animate
• Select the layer to duplicate
• LayerDuplicate 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

Tool Moved Here
5
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

6
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

7
Edit the Graphic

• Lasso Tools to Capture Image Areas
• ImageTransformFree 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

8
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

9
Saving Animations

• When all animation effects are complete
• Eye icon turned on for the top bottom layer
  only
  
• FileSave for Web

10
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

11
Can Place in Web Page

• Place .gif animation in your web page save
• Preview in a Browser to be sure it is working
  properly

12
Another Example of an Animated .gif

• Same Basic Process
• Transparent
• Paint Technique Rather than moving parts of
  the image