trintheshedevil (trintheshedevil) wrote in shedevilgraphix,

  • Mood:
  • Music:

SIMPLE animation tutorial

Tutorial for Rhonda, but I'm posting it here incase anyone else wants to know how to do animations ...

(And on a side note : this is a BASIC animation.  And I can't draw wortha crap.  So good luck, huh?)

Okay, so, as I do this I am going to hope you have a basic understanding of Photoshop.  If not, I recommend finding some PS tutorials.  K?  Now, do continue ...

Going to show you how to do a basic 3 frame animation.

Open ImageReady and click "File" > "New".  For this, I've just got a 100x100 transparent canvas.

Make sure your "Layers" and "Animation" windows are open.  To do that, just go to "Window" > "Layers" + "Animation".

For the first layer, we're going to draw a simple smiley.

After that, (for this image anyway), duplicate the layer since we're working with this image.  To Duplicate it, go to your "Layer" window, right-click on it, and press "Duplicate Layer".  Now, press the little eye thing beside the bottom layer, so it won't be visible.

Now we're going to have the smile turn into a large grin.  So on the duplicated layer, start to form a grin.

Duplicate the FIRST layer again and move it to the top.  Just duplicate it, click the layer and hold it, drag it upwards until it's at the top.  Then click the eye beside the 2nd duplicated layer so it isn't visible and the only thing you can see is the new layer.  Following me here?  I hope so!

Then, on your newly formed layer, make the grin bigger than the 2nd one.

By now your layer window should look something like this >

Now for the actual Animation!  For this, go to your Animation window.  You should see one Frame in it right now.  Duplicate the first frame twice.  (Hit the Duplicate button.)

Now, it should look like this >

Okay, click the first frame, then head back over to your Layer window.  Click the eye beside the top layer so that it isn't visible.  (It should erase it from every frame.)  Now, (while still on the first frame) click the eye beside the BOTTOM (the first one you did) layer so that it is visible.  If it makes it appear on every frame, that's ok.

Just hold down CTRL on your keyboard and click both frame 2 and 3.  Then click the eye beside the first layer so it is NOT visible on them.

Now, click FRAME 2 and then click the eye beside LAYER 2 (the middle layer).  Then click FRAME 3 and the eye beside LAYER 3 (the top layer).

Now your animation window should look like this >

Now, the animation will work as it is, but we need to set the speed.  To do that, just hold down SHIFT on the keyboard, and press FRAME 1 and FRAME 3.  This should highlight ALL the frames.  Then click the "0 sec" below any of the frames, and set how fast you want it to go.  For this we're going to make it .5 seconds.

To see your animation, press "play" on the animation window.  If it works like you want it, you can now save it!

To save it as an animation - or a moving image, haha - go to "FILE" > "Save Optimized As".  When the save window pops up, MAKE SURE the "SAVE AS TYPE" (it's a drop down window) is set to "Images Only {*.GIF)"!  And that's it!  You now have an animation.

Finished result >

Of course, there are way more complicated things one can do with this, but this is the basic know-how to animations.  Good luck! :)
  • Post a new comment


    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.