?

Log in

 
 
22 August 2006 @ 09:13 pm
Tutorial - Animated Icons  
Making an Animated Icon with Adobe ImageReady CS

This is an image heavy step-by-step tutorial

We'll be turning these:



To this:



THESE IMAGES ARE ONLY FOR THE TUTORIAL AND 'TRY FOR YOURSELF' SESSION. DO NOT CREDIT THE FINAL PRODUCT (using these images) TO YOURSELF BUT TO papayacrazy

You may not duplicate this tutorial in any way, shape, or form. I will come and eat you!!! Gr... *scarey face*



First of all, go ahead and save the first three images onto your computer.

Now, open up Adobe ImageReady CS.

Open all three pictures (File => Open) so they're on screen like this:



Then go to File => New and this should pop up:



Make sure all the things circled in red matches the one on your screen. Then click ok.

A window should pop up like this:



Make sure to name this box Animated Icon because I'll be referring to this window later on.

Activate the window with this icon:

To active, just click the title bar at the top.

You should get this:



Notice that the title bar on top of the image is darker than the rest. That means you did it right.

Now click on the rectangular marquee tool:



Notice that the button is kind of indented.

Then at the top of the screen (by default, for other users yours might be at another location on the screen) you have a gray bar. Change the settings so it matches the one in the image:



Click at the center of the activated image (the one with four little blobs) and a moving dashed line should surround the image:



Go up to Edit => Copy:



Then activate the Animated Icon window you created a few steps ago. It should be blank:



Go up to Edit => Paste:



Notice that the image is no longer blank:



Also notice the little box at the bottom right of your screen This is what I call the "Layers Box". Also, notice layer one and the mini sized image.:



If you don't see that box ANYWHERE on your screen, then go to Window => Layers



Go to Layer => New => Layer



A box should pop up:



Click Okay.

Notice in the "Layers Box":



There's a new strip called Layer 2 with a checkered box.

Now activate this image:

It should look like this on your screen:



Click on the little rectangular marquee box if it isn't selected already.

Now click on the center of the activated image. It should look like this:



Go to File => Copy:



Activate the Animated Icon window once again. Then go to File => Paste



It should change to this:



Notice the Layers Box:



Besides Layer 2, it's no longer checkered. Instead, it's a mini version of the image you just pasted.

Go to Layer => New => Layer



A box should pop up:



Besides Name, instead of Layer 2, it now says Layer 3 (this is automatic). Click Okay.

Notice in the Layers Box:



There's a new strip called Layer 3 with a checkered box.

Now activate the last image. It should be this one:

Click on the little rectangular marquee box if it isn't selected already.

Now click on the center of the activated image. It should look like this:



Go to File => Copy:



Activate the Animated Icon window once again.



Then go to File => Paste



Your screen should look something like this:





Go to Windows => Animation



A box should pop up on the bottom left corner of your screen. It should look like this:



Notice this button:



This button indicates if the animated icon will loop forever or just once. You want to keep the setting on Forever so don't mess with it.

Also notice this button:



This tells the computer/program how much delay time you want until it changes to the next image. Right now it's on 0 seconds.

We don't want that so click on the words/tab and select 0.5 seconds:



Notice how it changes on the screen:



Now, I'll explain a handy and very important button to you called the Duplicate Current Frame.



I want you to click that button (ONCE).

Ooo! Look! It changes again:



Leave it for now.

We shall go back to the handy "Layers Box". Remember that?

I want you to notice the little eye button beside each layer.



As the image says, this button indicates layer visibility!

I want you to click that button (ONCE). The one by LAYER 1.

Now go back to the animations box and notice that the 2nd box has changed!



Click this button again:



Ooo! Another duplicate!



And now go back to the handy dandy Layers Box. Click the eye again by LAYER 2.



The animations box has changed again.



See 3 different images? Good! We're almost done.

To view the now animated icon in action, click the play button:



Now look at the Animated Icon window. It moves!

Now press stop located where the play button was.

You can save it right now if you want, but I still have more to teach you (optional but good steps).

Go to File => Save Optimized. If you go to File => Save I will have to come over and hit you on the head:



Now... for the optional stuff. You can choose to actually optimize your animated icon.

Click this little button:



Select Optimize Animation:



A box should pop up like this:



Just click okay.

There. It's over. If you experience any loss in quality of graphic then feel free to skip this optimize option.

Save:

Go to File => Save Optimized. If you go to File => Save I will have to come over and take away your computer:



Final product either way should be this:



Please give me your opinions on my tutorial so I can improve (also any suggestions). If you see any spelling/grammar errors, tell me! If you get stuck somewhere, tell me that too.

I created this tutorial with broken down steps and images because I remember when I was just a beginner with Photoshop and I tried the tutorials and got SO lost. I hope this was easy for you and easy to follow.
Tags: