How To

How to Make Animation in PhotoShop CS2

By Bobbi Holmes, eHow Member Rating
How to Make Animation in PhotoShop CS2
Rate: (10 Ratings)

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.

Difficulty: Moderate
Instructions

Things You'll Need:

  • PhotoShop CS2
  • Computer
  1. Step 1

    Go to FILE > NEW > in the menu bar. A new menu will pop up.

  2. Step 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. Step 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. Step 4

    Go to the pallet in the lower right hand corner, and click on the PATHS tab, so that the PATHS PALLET appears.

  5. Step 5

    Click on the small circle with the triangle arrow, in the PATHS PALLET, located to the right of the PATHS tab.

  6. Step 6

    Click on MAKE SELECTION in the new menu that opened.

  7. Step 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. Step 8

    Use your PAINT BUCKET in the left menu, to add color to the arrow.

  9. Step 9

    Click SELECT > DESELECT > in the menu bar and the dotted line should disappear.

  10. Step 10

    Go to the pallet in the lower right hand corner, and click on the LAYERS tab, so that the LAYERS PALLET appears.

  11. Step 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. Step 12

    Repeat the previous instruction. You should then have three identical layers.

  13. Step 13

    Highlight the thumbnail in the first layer.

  14. Step 14

    Use the MOVE TOOL in the left hand menu to move the arrow in your image to the far left.

  15. Step 15

    Highlight the thumbnail in the second layer.

  16. Step 16

    Use the MOVE TOOL in the left hand menu to move the arrow in your image to the center of the image.

  17. Step 17

    Highlight the thumbnail in the third layer.

  18. Step 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. Step 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. Step 20

    In the menu bar go to WINDOW > ANIMATION > A new menu will open, showing your animation story board.

  21. Step 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. Step 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. Step 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. Step 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. Step 25

    Go to FILE > SAVE FOR WEB > A new, larger window menu will open, showing one screen of your image.

  26. Step 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. Step 27

    Close menu after previewing your animation and return to the previous window with the globe-like icon.

  28. Step 28

    Click on the SAVE button in that open window, and save animation on your computer as a GIF.

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.

Post a Comment

Post a Comment

Have you done this? Click here to let us know.

I Did This

Related Ads

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.

eHow Computers
eHow_eHow Technology and Electronics