PikaChan's Icon Tutorial



You're probably here because you saw some of my lovely little icons and wanted to make some for yourself, correct? You've come to the right place. ^_^ I, PikaChan, am going to show you how to make an animated avatar, or icon, or whatever you wish to call it.

These are the programs you'll need to do this:
And to make this lovely little Livejournal icon, I will be using this lovely little picture of everyone's favorite pervy priest... Miroku from Inu-Yasha!



Okay. The first thing that you want to do is make the image square, and shrink it. The size of a typical Livejournal is no larger than 100 x 100 pixels. So we've got to take a part of the pic we like, and shrink it down to this size. To do this, take the Crop tool and draw a square around the part of the picture that you want to make the icon from. The square MUST BE PERFECT if you want to have a perfect little 100 x 100 icon. The measurements of the box I've drawn around Miroku is 250 x 250, but don't worry, we'll make it smaller. Also, you'll be able to move the crop box around, so don't worry if you don't draw the box exactly how you want it ;D



Now we're going to make the image smaller. Go to Image --> Resize and this box will pop up. Click the bullet that says "Pixel size" and type 100 in the box. (The other box should automatically be filled im.) Hit OK. So now, you should have a lovely little 100 x 100 picture of Miroku.



Go to Selections --> Select All. Now go to Edit --> Copy, or press Ctrl + C. Now, open MS Paint. Hit Ctrl + V or go to Edit --> Paste. Click the little magnifying glass and click 6x. The close-up makes it easier to draw on the image.

At this point, you should have:



Now, you want to draw a border around the image. You can make it a plain square, but I like to give the border a funky shape. To do this, take the line tool and draw the border any shape you want it. I made my border twice as thick by going around the edge of it again, you do not have to do this is you don't want to.



Now that I've got my border drawn, I want to fill in the negative space with a solid color. I have chosen bright green (#00FF00), because I will not be using this color anywhere else in the image, only for filling in negative space. The bright green areas will be the areas that are transparent in the finished product. Now I have:



Once you're done drawing the border, go to Edit --> Select All or hit Ctrl + A. Now copy the image, and paste it back into PSP AS A NEW LAYER. Do this by going to Edit --> Paste --> As New Layer. Now you're ready to add text onto your icon.

Click the button that has an A on it. Type in your text, and choose the font, size, and color that you want it to be. Make sure that the Stroke box has the little (/) sign in it (you know what I'm talking about... in other words, make sure that there is NO stroke.). The color that you want your text to be goes in the Fill box. After you're happy with your text, hit OK. And make sure that the Floating bullet is selected so you can move your text into the position that you want it.



At this point, you can take the image back into MS Paint and make other modifications to the design. One thing that I particularly like to do is draw a one-pixel border around my text so it's easier to see against the background of the icon. You can do this in either MS Paint or PSP, I personally use PSP because I can see the outline of the brush.



After you've made all of the modifications that you want to your icon, you have two choices: you can either animate it (continue reading), or you can go ahead and make it transparent.

I am only going to do a simple animation. More difficult ones may be added on request, if I feel like it ;D But on this icon, I am going to make the letters and boxes blink.

To do this, I am going to take the color replacer tool. Make sure that the color you're replacing is in the box on the right, and the color you're replacing it with is on the left. To get the EXACT color of what you're replacing, hold down Ctrl to bring up the dropper tool, and right-click the color that you want to replace.

Before you replace the color, make sure that the replacer's tolerance is set at 1, unless you want to replace other colors as well. To do this, go to View --> Toolbars and check the box next to Tool Options Pallette. Click the tab with the two gears on it and set the tolerance to 1.

Now, replace the colors to your liking. What I did here was replace the color in the boxes in the bottom-left, and the colors of one letter in "Miroku". After this, I saved the image as miroku-icon01.gif. Then I undid the letter and the boxes, and moved on to the next letter, and saved it as miroku-icon02.gif", etc etc. MAKE SURE YOU ARE SAVING THESE AS .GIFS!! There have been so many times where I had to go back and re-save the images as .gifs because I wasn't paying attention and saved them as .jpgs... and as you all know, Animation Shop doesn't like .jpgs :( So save them as .gifs.

After you finish replacing colors and saving the seperate little files, open Animation Shop. Click the little icon that looks like a wand pointing to a bunch of slides. This is the Animation Wizard. Now, click the bullets next to the following, hitting Next after each step:

"Same size as the first image frame" --> "Transparent" --> "Centered in the frame", "With the canvas color" --> "yes, repeat the animation indefinitely" --> and then you will be able to choose the images to use in the animation.

Add the images that you saved to make your animation. If you used numbers in the filenames (i.e. icon01.gif, icon02.gif), MAKE SURE THAT THE NUMBERS ARE IN THE CORRECT ORDER, OR ELSE IT WILL NOT ANIMATE PROPERLY! Sometimes, Animation Shop will put the numbers out of order. If it does this, set them in the correct order with the Move Up and Move Down buttons. After you have them in the right order, hit Next, then Finish.

This is what you will have:



Now, you get to make parts of the image transparent!

If you chose NOT to animate your icon:

Open your icon in Animation Shop. Go to Animation --> Animation Properties, and select "Transparent" and hit OK. Next, go to Animation --> Replace color, and this box pops up. Under "Replace", select "Old color" and choose the color that you colored your negative space (in my case, bright green -- #00FF00) and set the tolerance to 1. MAKE SURE THAT YOU CHOOSE THE EXACT COLOR OF YOUR NEGATIVE SPACE! When you're done, hit OK, and your icon becomes transparent. Then save it, and you're done! HOORJ~

Here is your final product if you chose NOT to animate your icon:



If you chose TO animate your icon:

Follow the exact steps as above. You don't have to go to Animation Properties and choose "Transparent", because it was already done for you when you opened the Animation Wizard. This time, when the Replace Color box pops up, make sure to click the bullet under Replace color in: that says "All frames". When you're done, hit OK, and save it.

If you did this correctly, you should have:



Some Things to Know



Credits

This tutorial is © PikaChan. No material may be redistrubuted without my permission. Also, Miroku is © Rumiko Takahashi. So he's not mine (unfortunately). Don't sue me or anything, 'cause all you'll get is a couple of pennies and a lint ball. ^_~ Have fun making your icons! And if you have any questions, feel free to e-mail me or catch me on AIM as "psycho bunny XD".

Ja ne!~