Tutorial Volume 9: Animated AIM Buddy Icon
-sponsor- -sponsor- This tutorial will attempt to show you how easy it is to create an animated image which can be used for multiple graphics such as AIM's buddy icon. This Tutorial uses adobe photoshop and adobe imageready.

- open up a new canvas 50x50 by pressing the ctrl+N keys on your keyboard, or just go to FILE>new.

- under the LAYER tab you see right now we have only one layer and it is called BACKGROUND. double click that layer and rename it to layer 0.

- now come up with a theme you want your buddy icon to have. Since it is now 2006, i will make a simple animation in which 2005 will be erased and 2006 redrawn in. (this tutorial is only to show you have to go about designing a custom buddy icon for AOL Instant Messenger. it is not to show you how to design a complicated piece of work! the creative design is left up to you, the graphic designer!)

- i will begin by selecting an interesting font to use for 2005. select the "T" icon button on the left toolbar, this is the tool to input text into our canvas. after you select the T icon, look at the top toolbar, and select your font face, font color, and font size.


- press shift+ctrl+N to create a new layer, "Layer 1". on Layer 1, we will once again enter in some text, this time instead of 2005, we will put 2006 in a different font style to make it stand out. also i will make the 2006 text larger too, so when we input this image over to imageready, we can make it scroll.


- we should turn off the layer visibility for both the 2005 and 2006 layers so it will be easier for us to work on other features of the icon without the text getting in the way. to do this, just click on the "eyeball" next to each layer so it disappears which inturn will make the layer disappear.


- i want to have an eraser rub out the old 2005 text which will make way for the new 2006 scrolling text. to do this i will create a very simple pencil with an eraser tip. select the line tool on the toolbar on the left. make sure to give it a yellow (ffff00) coloring and a thickness of 10. draw out a vertical line and then a smaller line on top of the yellow line but in the color grey (696969) that will be the eraser tip.


- now switch from the line tool to the rectange tool. make a large rectangle in the color white, to the left of the pencil and stretch it large so it goes out of the white canvas. notice the outline of the large rectangle. the reason for this is, later when we add the animation, the white rectangle will overlap the 2005 text, and make it seems as though the text has been erased as we move the pencil from left to right. we will cover this in later steps.


- now on your layers tab on the right, you have 3 shapes, a white, grey, and yellow. link these 3 together by checking the empty box to the immediate left of the layer like how i have done.


- next, we will rotate this pencil to the side a little so it is slanted and not so straight. press ctrl+T, the free transform tool.


- we are finished in photoshop, lets jump to imageready, press shft+ctrl+M

- once in imageready, click on the eyeballs again for all the remaining layers EXCEPT LAYER 0 to make them disappear. you should have a blank canvas now.

- bring back the 2005 text layer, by clicking the space where the eyeball once was.


- duplicate the frame by clicking on the little notepad icon on the animation toolbar. also bring back the pencil layers (white rectangle, yellow and grey shapes), by again clicking on the area where the eyeball once was. you will see that part of the 2005 text has disappeared as if magically erased.


- drag the pencil so its to the far left and duplicate this frame. we should have 3 frames at this point.


- on frame 3, drag the pencil so its all the way to the far right and in turn erasing the entire 2005 text.


- select frame 2 and click on the TWEEN option and set you settings to how i have it in the screen shot.


- go to the final frame and duplicate it. you should have a total of 8 frames and the last two being the same. bring back the final layer which is 2006 text by once again clicking on the eyeball. you won't see nothing because the 2006 layer is hidden beneath the other layers, just drag it to the very top. then move the text all the way off the page to the left.


- duplicate frame 8. on the the last frame, frame 9, move the eraser off the page, and also move the 2006 text to the center of the page.


- go back to frame 8, and tween it but this time with 3 frames.

- go to frame 12, and duplicate it. drag the 2006 text another halfway. go back to the previous frame and tween it 3 frames.

- go to the last frame again and drag it off the page. go back to the previous frame and tween it 3 frames.

- you are done, you might want to go back and optimize it a little, take out unneeded frames to make the file size smaller. this is what i finished with.



TUTORIAL CREATED BY: CONCEPTVISIONZ.NET

*Return to Tutorial(s)*