Creating animated gifs in adobe photoshop elements
1 / 12

Creating Animated Gifs in Adobe Photoshop Elements - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Creating Animated Gifs in Adobe Photoshop Elements' - yale

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Launch photoshop elements
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
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 Backgroundlayer in italics and rename the layer so it becomes unlocked to allow image editing

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

Tool Moved Here

Double click to rename each layer
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
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
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
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
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
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

Can place in web page
Can 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
Another Example of an Animated .gif

  • Same Basic Process

  • Transparent

    Paint Technique Rather than moving parts of the image