Update! I have changed the link - you need the Construction set professional 1 (which is shareware) not 3, which will put nasty DEMO watermark on your .gifs after the evaluation period is up.
Okay~ I am by no means an avatar making expert, but I have been asked how I made my animated avatars for "Little Miss Sunshine." This little tutorial should help understand the basics.
First, you will need a photo editing program and
the GIF Construction set. I'm sure there are other animated gif making programs, but this is the one I know how to use, so that's what I wills how below. AND moving on~
Okay, First~ Make an avatar template. It should be no larger than 100x100 and you should save it in a file format that allows layers if you plan on doing anything with borders and such.
So here is a new 100x100 image I made in Photoshop 7. This will be the starting point. Obviously, I don't want to leave it blank, so let's give it some color and flare - be creative. If you want it to have a border, be sure to create it on a new layer so you can insert your new images between the background and the border.
So here we go~ No border, but it's not too shabby. Now we want to save this and reserve it as our template for making avatars. I saved mine as a .PSD file, if it has no layers, .JPG would be fine.
Okay, so now you need to open up whatever image you want to cut out and put on the avatar. It should have a plain background that is a different color from anything the sim is wearing. It will make the sim cut out MUCH easier. Here I have a pic I took when I was working on the Next Teen Model contest. This pic is really big, so I want to crop out the stuff I don't need first. Grab the selection tool that looks like a rectangle, and make a rectangle around the area you want to keep. Then, crop out the rest.
If you are using PSP, it should look kinda like that. After cropping it, you will want to resize the image to make it approximately 100x100 like your avatar template.
Make sure that you have "Constrain Proportions" checked, or something similar if you're using a different program (It might say something like "Maintain Aspect Ratio").
You will now want to select the entire image (CTRL-A) and then copy it (CTRL-C). Next, move over to your template and paste the image on as a new layer (CTRL-V).
You should now have something that looks like this. The image is completely covering the background of the template, but don't worry!
If you look at the layers tool, you will see that it is just on the layer above the background. We now want to cut out those white parts so that the background will show through!
Grab your magic wand tool, and select any area of white space (or whatever color your plain background of your image is. If you used a nice contrasting background, it should select the white area with pretty good accuracy. After selecting an area of white, press Delete to remove it.
If all goes smoothly, it should look something like this. If your image quality was a little rough, or the background color was kinda similar to the sim's hair or clothes, it might not have turned out right. If you need to, zoom in far enough that you can clearly see the sim, and cut out the background manually with the free selection tool.
Since I'm happy with how mine turned out, I'm going to choose SAVE AS from the file menu (NOT SAVE) and then choose CompuServe GIF (*.GIF) as my file type.
After saving it as a gif, close the file (if it prompts to save, say no) and re-open the un-changed original template. You can now re-use it to make the other frames of the animation. All frames for the animation must be saved as .GIF files! See what I did below~
It is now time to jump over to the GIF Construction set. This is where you will assemble the frames you made. The program might bug you about registering when you open and close it - give it a sec to let you click ok, and you will get to the main screen.
You will want to pull up the main menu and choose "Animation Wizard." The wizard will come up and will ask you a number of questions. You will want to choose the options I show in the animation below, I will go over these in detail. The wizard goes in the order from where I put START to where I put END.
*First choose Next
*Then choose "Yes, for use with a web page" and hit Next
*Then choose "Loop Indefinitely" and hit Next- If you do not choose this, it will only animate once, and then the page will have to be refreshed before you can see it animate again.
*Now choose "Matched to first Palette" and hit next. If you choose any other option it will make your gif images look SUPER CRAPPY!!
*It will then ask you what delay you want between the animations. I think 100 is pretty good, choose a smaller number to make it faster, or a larger number to make it slower. When you have picked, choose next.
*You have now reached the selection step. Click select and it will keep prompting you to choose .GIF files. Choose your GIF files in the order you want them to appear in the animation, and when you have them all. It will keep prompting for images, so just hit cancel, it will take you back to the wizard and you will see a list of the images you selected. Choose next.
*Now you're finished! Choose "Done"
It will show you something like this~
If you want to see how it animates, click the toolbar item that looks like sunglasses. If you are satisfied, close the animation it opened, and then go to File>Save. Save it with whatever file name and you're DONE!
You now have a spiffy animated avatar. Congratulations!
I've never made a tutorial before, I hope this was easy to follow and understand. If you have a question, feel free to ask and I will clarify. Good luck!!
