How to Make Animation in PhotoShop CS2
Sometimes we'd like to create a simple animation for our website. You can create an animation in PhotoShop CS2, and save the file as a GIF. Follow these directions to create a simple animation of a moving arrow. Once you learn the basics, you can try something more elaborate.
Other People Are Reading
Instructions
-
-
1
Go to FILE > NEW > in the menu bar. A new menu will pop up.
-
2
Set the width and height to 600 pixels (in the menu that opened) and set the color mode to RGB Color. Then click OK and the menu will close.
-
-
3
Click to select the CUSTOM SHAPE TOOL, on the left hand side of the screen, to add an arrow shape to the image.
-
4
Go to the pallet in the lower right hand corner, and click on the PATHS tab, so that the PATHS PALLET appears.
-
5
Click on the small circle with the triangle arrow, in the PATHS PALLET, located to the right of the PATHS tab.
-
6
Click on MAKE SELECTION in the new menu that opened.
-
7
Click OK on the window that opens. That menu will close, and now the line around your arrow should be a dotted line that appears to be moving around the arrow.
-
8
Use your PAINT BUCKET in the left menu, to add color to the arrow.
-
9
Click SELECT > DESELECT > in the menu bar and the dotted line should disappear.
-
10
Go to the pallet in the lower right hand corner, and click on the LAYERS tab, so that the LAYERS PALLET appears.
-
11
Right click on the actual thumbnail image in the LAYERS Pallet, and a new menu will pop up. Click on DUPLICATE LAYER. Another menu will pop up, click OK, and it will close.
-
12
Repeat the previous instruction. You should then have three identical layers.
-
13
Highlight the thumbnail in the first layer.
-
14
Use the MOVE TOOL in the left hand menu to move the arrow in your image to the far left.
-
15
Highlight the thumbnail in the second layer.
-
16
Use the MOVE TOOL in the left hand menu to move the arrow in your image to the center of the image.
-
17
Highlight the thumbnail in the third layer.
-
18
Use the MOVE TOOL in the left hand menu to move the arrow in your image to the far right. The three arrows will appear overlapped, stretched across your image, but they should all be of the same height from the bottom and top of the image.
-
19
In the LAYER PALLET, click the eye next to the thumbnail next to Layer 2 and Layer 3. Your main image should now show just one arrow.
-
20
In the menu bar go to WINDOW > ANIMATION > A new menu will open, showing your animation story board.
-
21
Click on the icon that is DUPLICATES SELECTED FRAMES, which is located directly to the left of the trash can icon, in your animation story board window. A second thumbnail will appear on your story board.
-
22
In the LAYERS PALLET, click on the eye next to LAYER 1, so it disappears. Click on the eye next to LAYER 2, so the eye will appear. (You will notice, your second thumbnail in the story board has changed, to reflect the layer with the visible eye.)
-
23
Click on the icon that is DUPLICATES SELECTED FRAMES, which is located directly to the left of the trash can icon, in your animation story board window. A third thumbnail will appear on your story board.
-
24
In the LAYERS PALLET, click on the eye next to LAYER 2, so it disappears. Click on the eye next to LAYER 3, so the eye will appear. (You will notice, your third thumbnail in the story board has changed, to reflect the layer with the visible eye.)
-
25
Go to FILE > SAVE FOR WEB > A new, larger window menu will open, showing one screen of your image.
-
26
Click on the icon at the bottom of the new menu, which looks like a globe with a question mark. A new window will open, showing what your animation looks like.
-
27
Close menu after previewing your animation and return to the previous window with the globe-like icon.
-
28
Click on the SAVE button in that open window, and save animation on your computer as a GIF.
-
1
Tips & Warnings
To change the speed of your animation, go to the animation storyboard and click where is says "sec" on each thumbnail. There you will set the seconds or fraction of second desired.
To set your animation to run continually or for a set number of rotations, go to the animation storyboard and click where is says "forever" and a drop down menu will appear.
