Breadcrumbs

Introduction to Animation

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":

Creating the stroke

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:

Creating the dot that will be animated

Step 4

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

ImageReady icon in Photoshop

Step 5

When Image Ready has opened, duplicate the imported frame:

Duplicating 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":

Setting up the tween animation

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.

Resulting animated image

Now you are done! Go to File -> Save Optimized. Next time we shall start working on more difficult animation.

Comments

  • very nice, so easy to follow

    Posted by Matt Oakes (external link) on Thu 17 Nov 2005 at 8:48

  • I think this blog needs to be updated more frequentl

    Posted by Karl-Sebastian on Sun 20 Nov 2005 at 6:56

  • Thanks Matt. And Sebastian it would be updated more if I had access to a computer, which I don't at the moment.

    Posted by Daniel Malmqvist (external link) on Sun 20 Nov 2005 at 14:11