Creating Animated Gifs in Adobe Photoshop Elements Janet 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 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 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 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 Tool Moved Here

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

Can Place in Web Page Place.gif animation in your web page & save Preview in a Browser to be sure it is working properly 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 Same Basic Process Transparent Paint Technique Rather than moving parts of the image