Sunday, August 29, 2010

You asked for it, so....

Here is the tutorial you wanted! I will try my best to make it as simple as I can :)

STEP 1: Find the graphic that you want to animate. I wanted to animate the one below:

I SUGGEST USING A GRAPHIC THAT IS EITHER 100px, 200px, 300px, or 400px wide!

STEP 2: Find out WHAT you want to animate. In this example I am going to animate the eyes and the sparkles.

STEP 3: Make another graphic, identical to the first one except this one will look like your end product.

This is the confusing part. Do you see how I drew eyelids and more sparkles? You want to make your animation simple if you are a beginner. Start with making your medoll blink.

STEP 4: Once you have your two pictures, save them into your computer as a PNG file (for better quality).

STEP 5: Go to

STEP 6: As shown in the picture below, Hit choose file, and for #1 use the graphic of your medoll with their eyes open. For File 2, upload the graphic of the one with your medoll's eyes closed.

STEP 7: Once you have uploaded them, go down to where you see a dropdown menu for size. You should know how many PIXELS your graphic is wide. Select the option that works for you.

*IMPORTANT! If your image is not on the dropdown menu, you can go to advanced. I have tried setting my own width, but pictures will not upload. You may try, but it may not work*

STEP 8: Choose how fast you want your medoll to blink in the "Speed" Dropdown menu. A good speed is Normal.

STEP 9: When you are done filling out the options, it should look something like this:

STEP 10: Hit "create animation"

STEP 11: Go to they grey sidebar where you should find your EMBED code. Copy this code and paste it into a word document and save it. Or, save the picture to your computer. I suggest doing both.

STEP 12: Now that you have your animation saved in your computer! You can upload this GIF file wherever you want, such as a blog sidebar, or even your banner for posting!

Your end product should look something like this:

gif animator

Soon you will get the hang of this.


If you want to link your picture to your suite, here is how.

Step 1: Get back out your EMBED code. It should look something like this:

Step 2: You will notice that when you scroll (not click) over your animation, something will pop up saying GIF animator. You can change what it says when you scroll over it. See where I underlined below, replace that area with what you want it to say when you scroll over it.

Step 3: Now to link it. In the picture BELOW, see where I underlined. Replace that link with whatever link you want. I will link mine to my Stardoll suite.


Do you like these tutorials? Do you want more? What would you like tutorials on? (Making poses, creating clothes, blog tips, etc...)

If I get positive feedback I will make another one on animation thats more in depth :)


  1. Nice tutorial! :D
    I tried it, and I thought mine came out well...except my doll looks a little weird since my eyeshadow is solid black! :D

  2. @Maddy- Maybe try some white eyeliner on the lids, or make the black a little bit opaque

  3. Post-almost fail.

    But it can be useful maybe :)

  4. Great, I was wondering how to do this.Thanks a lot :)

  5. WOW. You don't even do it properly.
    You get a website to do it for you. Not the correct HTML coding way.