Lowter

Introduction to Animation

Published on the 16th of November 2005

By Daniel Malmqvist

As the name suggest, today we will look into some simple animation. Animation can be useful for making smaller graphics for your website, maybe an avatar, or even a header. Today's lesson will teach you the basics of animation, while making it all too easy.

Step 1

Open Adobe Photoshop. Press CTRL+D to reset Photoshop to the default colors. Fill the background layer with black (#000000). Create a new layer, labeling it "Line." Create an additional layer, naming it "Dot."

Note: I am using 200×120 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 (#FFFFFF). Your image should look similar to below:

Step 4

You are done with Photoshop. Next, click on the Photoshop to Image Ready button, toward the bottom of the side-menu.

Step 5

When Image Ready has opened, 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! Go to File -> Save Optimized. Next time we shall start working on more difficult animation.

Opera 9. Innovation delivered. Download Now (external link)