Animations 
for Web pages

 Back to 'Images' Index

Creating first image or frame:
  1. open ‘Paintshop Pro 5.0’
  2. click on FILE then NEW
    • change dimensions to 100 pixels x 100 pixels 
    • (to make a small image like critter)
    • select Image Type - 256 colours 
    • select Background Colour - WHITE 
    • click OK
  3. click on ZOOM tool then double click inside drawing frame
  4. click on PAINT BRUSH TOOL
  5. in CONTROLS palette click on BRUSH TIP
    • change size to 2 (type it in)
  6. draw critter
  7. to erase elements of drawing use WHITE for the BRUSH
  8. to fill with colour 
    • click on FLOOD FILL tool then a colour
    • click inside shape to be filled with colour

Created by Emily 

Created by David

Created by Zac
Saving and creating 4 images:
  1. click on FILE then SAVE
    • check YOUR WEBPAGES folder is at the top
    • call it CRITTER1 
    • save as TYPE . GIF (compuserve..) <ENTER>
  2. click on FILE then SAVE AS
    • change the filename to CRITTER2 <ENTER>
    • file open is now CRITTER2
  3. click on FILE then OPEN
    • double click on CRITTER1
    • select ZOOM tool and double click on this image to increase appearance
    • reposition this next to CRITTER2
  4. use WHITE coloured BRUSH to erase
    • parts that could move (eg legs, arms, eyes, mouth)
    • redraw these parts
  5. REPEAT STEP 1, 2, 3 
    • as finish each image, reduce back to 1:1 in CONTROL palette
    • then REPEAT STEP 4 (continue cycle)
Putting it all together in Animation:
  1. minimise ‘Paintshop Pro’ OR just click on APPLICATION folder at bottom to bring it up
  2. double click on ‘ANIMATION’ icon to open it
  3. click on FILE then ANIMATION WIZARD
  4. keep clicking on NEXT, keeping defaults UNTIL...
  5. change timing from, say, 10 (1/100ths of a sec) to 4 (can experiment with this)
    • the bigger the number the slower the animation
  6. click on ADD IMAGE when white blank box appears
  7. select the first image CRITTER1
  8. hold SHIFT and click on CRITTER4
  9. all 4 should now be highlighted
    • when all frames are listed, can change order
  10. click OPEN, NEXT and FINISH
  11. click on ANIMATION button to see animation 
    • or VIEW menu then ANIMATION
  12. SAVE with a name using ‘ani’ for animation (eg CRITTER-ANI)
  13. NEXT, NEXT, FINISH

Animated scene 
created by a Year 7 student


Animation by a Year 7 student

© Erica Shadiac