Make your own free website on

Tutorial Connector

~Gimp~Animation~Catalog Icon

Creating A Banner
Developing ~101~
Creating a Sticker
The Opacity Book
Contact Us

Making Animated Catalog Icons :D

first take a screenshot of your product,the easiest way is to make your chatscreen as big as possible , having clicked the hide text tab. hit ctl bb to remove the bubbles. Then just hit print screen. On some keyboards you have to hit two keys to accomplish this but it works on everyones comp, vista or not. Now lets open GIMP. make a new image with a tansparent background sized 500x400. I am useing my skintight leather v1 outfit for this tutorial.

Next just right click the new image, got to edit, and click paste. Now we need to scale it down to fit. Just scale and move the pic till you get something that fits for the screenshot you took. Make sure you go up to layers and click ancher layer before moving on.

Next use the fuzzy select tool and remove the solid background from around your avatar so that you can add a background. Once thats done make a new layer for another screenshot of your avi. We follow the same steps as before for the next shot. If done correctly it should look like the pic below.

Next we add a new layer and do a bucketfill on it with the color of your choice. I will be useing white. Then we reorder the layers by going over to the layer dock (tab on the gimp bar) clicking the new layer and dragging it down below the very first layer.

Next we duplicate the white layer and move it up so that it is below our second avi pic.
Next add a new layer above the white layer and add your designs for a background. The duplicate and move to above the other white layer. For the purposes of this tut I am not doing a background and just leaving it white. Now merge the background into the white layers and then the avatar pic onto your background so that you are left with 2 layers with backgrounds.Now lets animate this bad boy! First we re name the layers in the layer dock the items in parenthaseis is the speed of the frame. You can change these numbers to speed up or slow down the icon further if you wish.

Now go up to Filters-Animate-playback, a new window will open, just click play and see if you like the settings you inputted. If not either raise them for slower and lower them for faster. Now that, all of that is done we will make our image the correct size. So lets select frame1 in our layers menu and then go to image-scale image it will open a scale tool just input 100x80 and apply it.

now lets go back to filters-animation but this time click optimize for gif. It will open a new untitled image just close the one we were working on and dont save. We are going to save the new open that has been optimized. Now go to save as, then type in your filename.gif and follow the settings in the pictures below.

And here is our finished Icon! 

Enter supporting content here


New Interactive site

Want to see your tutorial on this site. You can post it below and We will add it to the site. And Thank You for Supporting Our Developing Community!!!!

Avi Name:
Tutorial Name:
Program Used:
Post Your Banner Code Here:
Tutorial Please use HTML Format Or Text :