View Full Version : [TUTORIAL] Introduction to Animation using Photoshop Cs3

02-23-2009, 01:46 AM

Animation can be useful for making smaller graphics for your website, maybe an avatar, or even a header.

Step 1:

Open Adobe Photoshop. Press CTRL+D to reset Photoshop to the default lcolors.create a new layer, labeling it "Line." Create an additional layer, naming it "Dot."

Note: I am using 200120 pixels for the image's size, although you can use any size you wish.

Step 2:

Select the "Rectangular Marquee Tool" and create a selection, making it the size you want your animation to be.

Note: Make sure that you have the layer "Line" selected.

Now, go to Edit -> Stroke. Use the settings below and select "OK"


Step 3:

Next, select the "Dot" layer and create a small circle in the bottom corner of your square, using the "Elliptical Marquee Tool." Fill the small circle with white,Your image should look similar to below:


Step 4:

Next, click on the window on the top and select animation

Step 5:

duplicate the imported frame:


Move your dot to the next corner of your animation. After you have moved it, click on the small chain button ("Tween Button") next to the duplication button. Set the settings as follows and select "OK":


Step 6:

Repeat step five until the dot has gone around the entire line, and it is back to where it started.

Note: Remember that each time you repeat step five, you have to duplicate the last frame. For example, the first time you redo step five you duplicate frame two.

Now you are done!

PRESS alt+ctrl+shift+s

Save Optimized.