09web Twirl Animation

ImageReady Version: 7

 

The aim of the tutorial is to learn how to create a simple twirling animation using PhotoShop and ImageReady.

  1. Open PhotoShop.
  2. Create a new file:

    • Width: 200px
    • Height: 80px
    • Resolution: 72 pixels/inch
    • Background: White
  3. Type the text.


  4. Select any colour for the text.
  5. Select a bold typeface such as Arial Black.
  6. Go to the Move tool:
  7. In the Options pallet select: Show Bounding Box
  8. Re-size the text.
  9. When the text is the correct size click and in the correct position click back on the Move tool and click: Apply
  10. Deselect: Show Bounding Box
  11. Go to: Layer > Rasterize > Type
  12. Make four layer copies of the original layer. You will get the following layer structure:


  13. In the Layers pallet use the eye to switch off all the layers except for: Twirl Copy
  14. In the Layers pallet select the layer: TWIRL copy
  15. Go to Filter > Distort > Twirl (angle 50).
  16. Apply Twirl for rest of the three layers with different amounts. Use the eye button to switch on and off the appropriate Layers as you go.
  17. When you have finished save your PhotoShop file.
  18. Open ImageReady by clicking on the Jump to ImageReady button:
  19. In the Layers pallet use the eye button to switch off all the twirls except the original text.
  20. Go to: Window > Animation
  21. Click on the Duplicate current Frame button until you have five frames.


  22. Select Frame two by clicking on it.
  23. In the Layers Pallet make the original twirl layer invisible by clicking on the eye .
  24. In the Layers pallet use the eye button to make the next twirl visible.
  25. Select frame three in the Animation pallet.
  26. In the Layers Pallet use the eye to switch off the visibility of the original Twirl.
  27. Switch on the visibility of the next twirl layer.
  28. Continue this until all the frames in the Animation pallet look different.


  29. Set the timings for frames.
  30. Check the performance in the browser. Go to: File > Preview In > Internet Explorer.

  31. Add more frames and change the visibility of the layers until you are happy with the result.
  32. Go to: Window > Optimize
  33. Select Gif, 32 colours


  34. Save the file: File > Save Optimized As
    This creates the gif animation that you place on your web page.

    Note: You have already saved the original PhotoShop file (psd).

Back to PhotoShop Home Page