Digital Image Manipulation

Adobe Photoshop Elements 2.0

Animate with layers   -   JUMPMAN

 

   
Did you know that you can convert layers to animation frames in Adobe Photoshop Elements 2.0? It's an easy way to create professional-quality animations that are viewable in your Web browser. Here's how to create and optimize a Web animation from a multilayer Photoshop Elements (PSD) file.
   
         
 
Arrange the layers in Photoshop Elements.
Click this Jumpman.psd and save to your own folder and then open it into Photoshop Elements . Open the Layers palette. Notice that the file has multiple layers with each layer thumbnail showing a figure in a different pose. When the layers are viewed as sequential animation frames the figure appears to move. The order of the layers determines how the figure appears to move. The bottom layer in the Layers palette becomes the first frame in the animation when you convert the layers to frames. You can rearrange the layers to adjust how the figure moves.
step01_int
   
 
Open the Save For Web dialog box.
Now, you'll convert the layers to an animated GIF.
Choose File > Save for Web. Under Settings, choose GIF optimization and select the Animation option.
step02_int
   
 
Set Animation options.
Select whether to loop the animation or not. Then enter a value for the Frame Delay to determine the amount of time lapsed between frames. The delay is in seconds, so a value of 0.25 is a quarter of a second.
step03_int
 
Preview your animated GIF in the Save For Web dialog box.
You can preview your animation frame-by-frame in the Save For Web dialog box. Click the Frame Select buttons to move forward or backward through the animation.
step04_int
   
 
Preview your animated GIF in a browser.
You can also preview your animation in a Web browser by choosing a browser from the Preview In pop-up menu. In addition to your animated GIF, the browser displays HTML code and information on format, size, and settings.
step05_int
   
 
Adjust your animation.
If you need to make changes to your animation frames, click Cancel to close the Save For Web dialog box. You can add, delete, change, or move the layers to create the animation effect you want.
Once you're satisfied with your changes, return to the Save For Web dialog box to finish your Web animation.
 
Save your Web animation.
To save your animation, click OK in the Save For Web dialog box. and save it into your folder
Photoshop Elements converts your layers to frames and saves a Web optimized GIF animation file. You can now view your animated GIF in a browser, or incorporate the GIF into a Web page.
   
   
   

Animation Task

1. Using the steps above to help you, create your own jumpingman gif
 
2. Create two more animations from scratch. 
Click here to see one I have just made Here is another one
To see the Photoshop Elements file Click here and save to your folder, then open it from there.