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.

ani_image1.gif
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.

image7.gif

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.

image5.gif

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.

image6.gif

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.

1 Basket and Border - original 2 Basket, Border, partial 2001
coming out of basket
3 Basket, Border, 2001 coming out of the basket 4 Basket, Border, partial February 2001
coming out of the basket
5 Basket, Border, partial University February 2001 coming out of basket 6 Basket, Border, partial Virtual University February 2001 coming out of basket
7 Basket, Border, University February 2001 - Original locations 8 Basket, Border, University February 2001, Tips and Tricks Original locations
9

Basket, Border, University February 2001, Tips and Tricks - Original locations PSP letters on center edge of basket facing right

10 Basket, Border, University February 2001, Tips and Tricks - Original locations
PSP letters on center edge of basket - facing left
11 Basket, Border, University February 2001, Tips and Tricks - Original locations. PSP letters on left edge of basket - facing left 12 Basket, Border, University February 2001, Tips and Tricks - Original locations.
PSP letters on left edge headed upward - of basket - facing left
13 Basket, Border, University February 2001, Tips and Tricks - Original locations. PSP original position - facing left 14 Basket, Border, Virtual University February 2001, Tips and Tricks, PSP - Original locations.
15 Basket, Border, University February 2001, Tips and Tricks, PSP letters, Picnic Basket letters, all Original locations.    

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.)

Frame 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
Image Number 1 2 3 4 5 6 7 8 9 10 9 10 11 12 11 12 13 14 15 14 15
Time 10 30 20 20 10 10 10 40 30 30 20 20 20 20 10 10 40 50 20 30 100

Here is the final Image Animated:

PSP Animation Logo

Animation Lesson Continued


Copyright

*Copyright 1997-2003 Granny-Wicked & Ralph
*All Rights Reserved
This page was last updated on April, 2003

1