• home
  • forum
  • my
  • kt
  • download
  • Animated Icons

    Author: 2007-09-13 10:05:36 From:

    This tutorial will show you how to animate any type of icon using PhotoShop & ImageReady.



    Lets get started, open a new document, 50 x 50 px with white background.

    Double Click on the layer to unlock it.

    Give that layer a cool black stroke, use the following settings:



    Now use the Erase Tool on Block mode, start slowly erasing the middle of the document until you get a nice double layer like this:



    Now use the Custom shape tool, pick your favorite shape, and draw the shape [with black] inside your document. Remember to leave some whitespace on the sides.



    Now copy the shape layer 4 times. So you should have a total of 5 identical shapes [each within a different layer].
    Change the Fill of each of the layers like so:

    Layer 1 [original]: 100%
    Layer 2: 85%
    Layer 3: 70%
    Layer 4: 55%
    Layer 5: 40%

    Now you should have 5 shape layers, each one with different fill [the numbers above]. Lets go ahead and Jump to ImageReady [bottom of the toolbar button].

    Once you get to ImageReady, dupplicate the first frame 7 additional frames.



    Set each frame like below:
    Frame 1: Layer - Shape1; 0.5sec
    Frame 2: Layer - Shape2; 0 sec
    Frame 3: Layer - Shape3; 0 sec
    Frame 4: Layer - Shape4; 0 sec
    Frame 5: Layer - Shape5; 0 sec
    Frame 6: Layer - Shape4; 0 sec
    Frame 7: Layer - Shape3; 0 sec
    Frame 8: Layer - Shape2; 0 sec

    Thats about it, now just save it!

    Here are a few examples:
    Here are a few examples:
    -

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      Abstracts (88)
      Effects (498)
      Animation (220)
      Photo Effects (823)
      Automation (20)
      Photo Retouch (316)
      Basics (411)
      Photography (302)
      Brushes (49)
      Scripting (5)
      Buttons (187)
      Text Effects (731)
      Color (77)
      Textures and Patterns (172)
      Digital Art (147)
      Web Graphics (692)
      Drawing (735)
      Web Layouts (175)

    New

    Hot