ANIMATION ON THE INTERNET

Your first moving 'GIF'

TURN THE PICNIC BASKET LOGO INTO ANIMATION

In order to turn the PSP Picnic Basket logo into animation you will need to have the logo as it was created in the PSP format with all the layers complete. You should have received this file as part of the lesson.

Steps To Start:

NOTE: Layer 2 and the background layer will always be visible in this animation.

1. SAVE this images in two separate areas (disk/folder)!! There are times you will get into a hurry and/or get distracted and you will forget to save your original image and write over it or loose it completely. It is best to always have a back up copy somewhere accessible, until you are done with the completed animation.

2. Taking the original image with all it's layers complete, open the Layers Pallet and slide the tabs to the left as in the following example, except for the basket - layer 2 and background layer.

NOTE: The following steps will be used repeatedly throughout this animation.
A. Click on the Layers tab at the top of the screen, Merge, then Merge Visible.
B. Click on the Colors tab at the top of the screen, Decrease Colors 256
C. Click on the File tab at the top of the screen, go to SAVE AS.....
D. Click the extension to a .gif extension, save using your own name coding. (It is best to keep a sequential numbered order along with your name for the animation frames. Example: I used psplogo1.gif, psplogo2.gif, etc.)

3. Reopen the original image, open the Layers Pallet, and again move the sliders on the same layers leave the 3rd layer also in the right position. Click on Layer 3. (Leave layer 2, layer 3 and background to the right)
4. Using the eraser delete all but "2001". Next move the word using the mover tool, to the lower center of the image and rotate 45 degrees to the left.(NOTE: If you loose your image "2001" undo (edit drop down list, undo) the rotation and move it again so that once it is rotated you can find it.)
5. Position the word "2001" over the basket and align it to your satisfaction.
6. Move Layer 2 above Layer 3.
Follow steps A to D.

Eraser		Rotation and Movement

7. Reopen the original image, open the Layers Pallet, and again move the sliders on the same layers except this time leave the 3rd layer also in the right position. Click on Layer 3.
8. Using the eraser delete all but "2001". Next move the word using the mover tool, to the lower center of the image and rotate 45 degrees to the left.(NOTE: If you loose your image" 2001" do an undo and move it again so that once it is rotated you can find it.)
9. Position the word "2001" above the basket and align it to your satisfaction.
10. Move Layer 2 above Layer 3.
Follow steps A to D.

11. Reopen the original image, open the Layers Pallet, and again move the sliders on the same layers except this time leave the 3rd layer also in the right position. Click on Layer 3.
12. Using the eraser delete all but February 2001. Next move the words using the mover tool, to the lower center of the image and rotate 45 degrees to the left.(NOTE: If you loose your image do an undo and move it again so that once it is rotated you can find it.)
13. Position the word above the basket and align it to your satisfaction.
14. Move Layer 2 above Layer 3.
Follow steps A to D.

15. Reopen the original image, open the Layers Pallet, and again move the sliders on the same layers except this time leave the 3rd layer also in the right position. Click on Layer 3.
16. Using the eraser delete all but "University February 2001". Next select the word University with the selection tool and create a new layer, next select none from the Selection tab at the top, then none. This moves the word University to a new layer. Move the word "University" using the mover tool, to the lower center of the image and rotate 20-45 degrees to the left.(NOTE: If you loose your image do an undo and move it again so that once it is rotated you can find it.)
17. Position the word "University" above the basket and align it to your satisfaction.
18. Move the words "February 2001" and align next to the word "University", on the same line as it was located originally. (NOTE: You might need to turn on your grid for this move.)
19. Move Layer 2 above Layer 3.
Follow steps A to D.

20. Repeat steps 15 to 19 keeping all the words and adding a new layer for the word "Virtual" as you did for the word "University" align as necessary.

(NOTE: At any time you can now take your images you have saved into the animation shop and using the wizard check your images to see that your alignment is still on the same line as the original. Set your speed to 20-30 per frame to give your eyes time to adjust to the difference in alignment. If at anytime you have mis-aligned your words, go back and undo your moves and move it again.)

21. Reopen the original image, open the Layers Pallet, and again move the sliders on the same layers except this time leave the 3rd layer also in the right position.
Follow steps A to D.

22. Reopen the original image, open the Layers Pallet, and again move the sliders on the same layers except this time leave the Background, 2nd, 3rd and 6th layers in the right position.
Follow steps A to D.

23. Reopen the original image, open the Layers Pallet, and again move the sliders on the same layers except this time leave the 2nd, 3rd, 6th and 4th layers also in the right position. Click on Layer 4.
24. Move the word "PSP" down and slightly over the top of the basket, so the bottom of the letters are below the basket line, (align it to a spot you can visibly find for step 25 see example below.) Save this image as a PSP extension. Move layer 3 above layer 4 (or erase the lower portions from the "PSP" letters.) DO NOT CLOSE THIS IMAGE.
Follow steps A to D.

Example of Alignments: Noted by basket weaving and S letter or turn on grid and or ruler to mark your alignment. This does not have to be exact on horizontal but must be on vertical or your letters will bounce up and down.

25. Go back to the image you just worked on and undo the steps A-D, next select the "PSP" letters (layer 4) and mirror them. You will need to drag them back to the original alignment or as close as possible. DO NOT CLOSE THIS IMAGE.
Follow steps A to D.

(NOTE: Steps 24 and 25 only reverse the PSP letters on the basket edge)

26. Go back to the image you just worked on and undo the steps A-D, next select the "PSP" letters (layer 4) and move them closer to the edge of the basket. DO NOT CLOSE THIS IMAGE. (Example below)
Follow steps A to D.

27. Go back to the image you just worked on and undo the steps A-D, next select the "PSP" letters (layer 4) and rotate them upward keeping your alignment as close as possible.
Follow steps A to D.

28. Reopen the original image, Make a copy of layer 4 and place it under the original layer 4, in the Layer Pallet. Open the Layers Pallet, and again move the sliders on the same layers except this time leave the background, 2nd, 3rd, 6th and 4th layers and the new copy of layer 4 also in the right position, Move the original layer 4 lever to 50 %. Click on the copy of layer 4 and "mirror the letters PSP" and drag them back to the original location. Once you have the copy of the letters in place, move the layer 4 slider all the way to the left. DO NOT CLOSE THIS IMAGE.
Follow steps A to D.

29. Undo steps A-D on the original image, move the original layer 4 slider back to the right, delete the copy of layer 4. Move all the sliders except layer 5 to the right side.
Follow steps A to D.

30. Open the original image, leave all the sliders to the right side.
Follow steps A to D.

You should now have a total of 15 images.


Below is a table listing the items visible per each image:
The numbers on the left side will be used as the order to insert them into the animation program. Some are repetitive.

Your images are now ready to take to the animation shop program.

We will insert them in the following frame order listed under the frame order is the times used per frame: (you may use your own frame names and times.)

Here is the final Image Animated:

Animation Lesson Continued