Making Animated Catalog Icons
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!
|