[TUTORIAL] Introduction to Animation using Photoshop Cs3

[Banki]

TUT FOR NOOBS


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

http://i183.photobucket.com/albums/x60/nabeelali/step_2.png



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:

http://i183.photobucket.com/albums/x60/nabeelali/step_3.png


Step 4:

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

Step 5:

duplicate the imported frame:

http://i183.photobucket.com/albums/x60/nabeelali/step_5.png



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

http://i183.photobucket.com/albums/x60/nabeelali/step_5_2.png



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.

http://i183.photobucket.com/albums/x60/nabeelali/result.gif


NjoY!!!