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

Inside Photoshop: Search Articles

  Search Library:  
 
2018 |  2017 |  2016 |  2015 |  2014 |  2013 |  2012 |  2011 |  2010 |  2009 |  2008 |  2007 |  2006 |  2005 | 
 

Wow your audience with believable animated graphics

Added on Friday 27th of April 2007 01:38 am EST
 

Application:

Adobe Photoshop 7/CS/CS2

Operating Systems:

Macintosh, Microsoft Windows

Download:

 

It’s easy to throw together a quick five-frame sequence for an animated graphic; the tricky part is making it look convincing. But it’s not as tricky as you may think. We’ll show you how to incorporate a key animation principle into all of your animated graphics, so you’ll be sure to wow even the biggest skeptic.

 

To show you how to make your animations look more believable and convincing, we’ll:

     Set up the layers in Photoshop for the foundation of this technique.

     Explain the squash and stretch animation principle so you understand how gravity affects your moving subject.

     Tweak the necessary layers to follow the squash and stretch principle.

     Compile the animation for the final product.

 

When you’re creating an animation for a website or other multimedia presentation, you want to captivate your audience’s attention. The fact is, if you put any three images together and display them quickly enough, they’ll appear to move. But in order to make your audience believe they’re moving in the proper fashion, you need to get back to the basics. We’ll explore the primary animation principle of squash and stretch so you can animate like the pros and be sure to please your audience.

 

Determine the sequence

For our demonstration we’ll animate the soccer ball to follow the path shown in Figure A. We’ll animate the ball from left to right, but we’ll lay the ball layers down from right to left. This way, the balls will be in an intuitive layer stacking order when it’s time to compile the animation. To follow along with our example, download the file animation.zip from the URL given at the beginning of this article, and extract the file soccer.psd. Then, launch Photoshop and open the file.

 

A

 

Set the stage

Since layers are a very important element in Photoshop animation, we’ll set up all of our layers first. In preparation for a five-frame animation, we’ll add four additional layers in the document, placing the soccer ball at various points on the canvas. This will provide the illusion of movement when we compile and play the animation.

 

To set the additional layers in place:

1.       Press [option] ([Alt] in Windows) and click and drag the Top Right Ball layer to the Create A New Layer button create_new located at the base of the Layers palette.

2.      Enter Mid Right Ball in the As text box in the resulting Duplicate Layer dialog box, and click OK.

3.      Choose the Move tool move from the Toolbox and move the ball in the Mid Right Ball layer midway down the right side of the canvas, as shown in Figure B.

B

 

4.      Repeat steps 1 and 2 but duplicate the Mid Right Ball layer and rename it Bottom Ball.

5.      Select the Move tool and move the ball in the Bottom Ball layer to the bottom middle of the canvas, as shown in Figure C.

 

C

 

6.      Repeat steps 1 and 2 but duplicate the Bottom Ball layer and rename it Mid Left Ball.

7.      Select the Move tool and move the ball in the Mid Left Ball layer to the middle left side of the canvas, as shown in Figure D.

D

 

8.      Repeat steps 1 and 2 but duplicate the Mid Left Ball layer and rename it Top Left Ball.

9.      Select the Move tool and move the ball in the Top Left Ball layer to the top left corner of the canvas, as shown in Figure E.

E

 

Squash and stretch

Before we compile the animation, we need to consider one of the fundamental principles of animation: squash and stretch. The principle of squash and stretch states that when an object with flexibility—such as (but not limited to) a person, a balloon, or a ball—is in motion, its weight is distributed to comply with and exaggerate the force of gravity.