Sign Up Now
Twitter Facebook Flickr Buzz
PhotoshopSociety.org
 
Search:   
 
Social Networks

LOGIN     

Go
Forgot Password? Go Join Now
Sign Up for Starter's Pack (Free)
Call (800) 223-8720
Email custserv@photoshopsociety.org
 
Need Web Solutions? Get Free Sample Issue

Library: Creative Design

 

Simplify animation with Photoshop and GoLive layers

Added on Wednesday 4th of March 2009 09:23 am EST

 
Applications > Adobe Photoshop CS/CS2, Adobe GoLive CS/CS2
Operating Systems > Macintosh, Microsoft Windows

Animation has fascinated viewers before the turn of the 20th century. One early technique involved quickly flipping through a stack of illustrated cards. Throughout the decades, the technology of animation has evolved from pasteboard cards to digital feature length films to the web. But though the means may have changed, the method is essentially the same; and even with the help of a computer, that means creating one image after another after another, as shown in Figure A. For motion picture animation the process can be long and painstaking. However, for simple web animation, with the aid of Photoshop and GoLive, you can speed the production process. Let's create an example and see how seamless the process can be.


Open a new Photoshop document
When creating an animation, there are several things you must consider, such as download times and viewing lengths. Generally, downloads should be short, and viewing lengths should be no more than a few seconds. Let's begin our animation with Photoshop. To follow along using our example, download the animation file from the URL given at the beginning of the article.
1. Launch Photoshop, choose File > Open, navigate to the animation .psd file, and click Open to display the image of a clown, as shown in Figure B.

2. Open the Layers palette, which contains three layers, as shown in Figure C. We'll use the Eyes and Mouth layers to create an animation on the Background layer.


Create the images for the Eyes animation sequence
Animation is created by producing a set of stepped drawings of an object as it changes from one form or location to another. To animate the eyes in our image, we'll roll the clown's eyes around using four individual images, each on a different layer.
1. Dr...