HOME | DD

12hc12 — GIMP Animation Tutorial

Published: 2008-07-22 17:04:20 +0000 UTC; Views: 79354; Favourites: 1579; Downloads: 1384
Redirect to original
Description Attention!
Considering the great amount of time since I have thought about emotes or animations, never mind the neglect I've put on my digital editing programs, I can no longer truly provide satisfactory advice for all you budding emoticonists and animators. I still love to see a new emote now and then, and the comments on both my tutorials are very uplifting. However, the flood of questions must come to an end.
But, I won't just leave you in the dark. There are many resources out there in the deviantART community that can really help.
Be sure to check out #Emotication for other tutorials and a long list of resources for all aspects of emoticon creation. If you need a mentor, they have a program set up to give you the kind of help you need.
If you have a specific question about emoticons or emoticon creation (including animation), head over to #WeEmote . The group there are sure to have an answer for you, or at least point you in the right direction.

For those of you that use this tutorial for non-emoticon art forms, I can't guarantee that either of those resources will be helpful. Check out the Groups page and search for a group that can help; there's bound to be one out there for you. And of course, dA has a massive section on tutorials for some of the most popular programs (as well as general tutorials) that can be easily found in the Resources and Stock Images > Tutorials gallery.

If you comment or send me a note, please don't be offended if I direct you elsewhere. I really can't provide you with the help you deserve.

-----

READ THIS BEFORE GETTING HELP.
I have had countless eager animators ask me the same question countless times, so here's hoping this can reduce the amount of repetition.
Many people have explained a situation in which the layers "stack" on top of each other when the animation is played. In other words, instead of showing one frame at a time, the previous frame (layer) does not go away. If you are having this problem, please be sure that your layers ALL look like the example below before contacting me for assistance.
Layer B (200 ms)(replace)
Layer A (100 ms)(replace)
etc.

If you do not use the replace method, or do not indicate that you want to use this method, GIMP may automatically assume things it should not assume. Ensure all frames have the (replace) indicator in them. As well, make sure all layers have a unique name.
Examples of unique names:
Layer 1, Layer 2, Layer 3
Start, blink, close
Frame A, Frame B, Frame C

Layers CANNOT include any of the following at the end of its name, which are created by duplicating layers:
copy, copy #1, #2, etc.

If you are still having issues, but you have ensured that all layers are named properly, you can comment and ask for assistance. I should be able to point you in the right direction, but I don't know everything. If I can't answer your question, feel free to do a google search. They're useful, trust me.

-------

Forgot to mention: steal my lighting style, and I'll have to give you a kick in the pants. Oh, and I'll bitch at you. Stealing styles is the same as stealing art; not only does it show a lack in originality, it's just pathetic.

To see the final result of the emote used in this tutorial,
click here .

(The emote is using the Combine method, though it would look the same if it was using the Replace method. Note that the times of the layers are 2000ms and 70ms.)

`CookiemagiK said that he wasn't sure how to animate in GIMP, so I figured I should make a tutorial.
Yes, I know, it's ugly as hell, but it's the information that counts.
Cut me some slack, it's my first tutorial.

The tutorial starts AFTER you have created something to animate, so this is useless for those of you who can't make emotes or pixel art. Maybe I'll make a tutorial for that later.
This goes through the process of animating, including both methods of animating, layer naming, and the final touches.

Keep in mind:
This is a basic tutorial; build and learn off of it. If you want your emote to move, then each new layer would be shifted up, down, left or right.
If you want the emote to talk, you need to animate the mouth closing, then opening.
Walking consists of diagonal movements.
Et cetera, et cetera, et cetera.


Programs used: GIMP (pixel art and screenshots), Paint.NET (tutorial).


Requested by ~aicaz : Advanced Animation tutorial at the GIMP website, using the GIMP GAP tool, easily found and downloaded around the GIMP site.


Permission given to explosivegfx.com to use this tutorial.
Related content
Comments: 633

DarkAncientLight [2012-08-12 15:31:51 +0000 UTC]

Thanks!

👍: 0 ⏩: 0

CrushingMisery [2012-08-10 13:10:55 +0000 UTC]

Awesomeness

👍: 0 ⏩: 0

JustDMarie [2012-08-06 12:44:19 +0000 UTC]

I'll be getting GIMP as soon as I get my new PC.... and knowing I can make a transparent gif. is really helpful... as you can see the animation program i use doesn't have transparent. (my icon is what im talking 'bout)

👍: 0 ⏩: 0

snowyglobe10 [2012-07-29 17:44:38 +0000 UTC]

HOW TO MAKE IT .GIF D: i try and it doesnt work

👍: 0 ⏩: 1

Terlia In reply to snowyglobe10 [2012-07-31 15:11:24 +0000 UTC]

When you click "save", there will be a little + sign at the bottom. Next to it it says "Select File Type (By Extension)". What you have to do is click on the little + button, then scroll down through the file types until you see GIF. Click on it, and you're good to go. It'll save it as a GIF, and voila! It works. ^_^

👍: 0 ⏩: 1

snowyglobe10 In reply to Terlia [2012-07-31 18:06:23 +0000 UTC]

thx

👍: 0 ⏩: 0

djemilahgordon [2012-07-25 17:56:46 +0000 UTC]

This tutorial is fantastic! Hopefully I'll be able to update my (painfully old) avatar now

👍: 0 ⏩: 0

pengirl389265 [2012-07-25 15:45:27 +0000 UTC]

omg this was soooo helpful thanks soooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo much!!

👍: 0 ⏩: 0

LafflyAdopts [2012-07-21 03:43:28 +0000 UTC]

thank you soo much!

👍: 0 ⏩: 0

Revealing-Silence In reply to ??? [2012-07-11 03:36:50 +0000 UTC]

This was epic. Thank you!

👍: 0 ⏩: 0

jenatstare In reply to ??? [2012-07-04 14:31:43 +0000 UTC]

thank you

👍: 0 ⏩: 0

KrissieKat [2012-07-01 21:46:31 +0000 UTC]

Umm sorry to bug you but mine will not save as a gif image and none of the other stuff is popping up either.

👍: 0 ⏩: 0

danphantom59 [2012-06-25 18:10:44 +0000 UTC]

cool! once i get gimp to start working again, ill totally try this!

👍: 0 ⏩: 0

Chuudere [2012-06-18 14:23:07 +0000 UTC]

yeah i so need this !

👍: 0 ⏩: 0

Kawaii-Waffles [2012-06-06 11:09:50 +0000 UTC]

this was so helpful!

👍: 0 ⏩: 0

jaydensunn [2012-05-20 00:20:35 +0000 UTC]

I am trying to animate this. [link]
The two layers i have are: Frame A(100ms)(Replace) & Frame B(200ms)(Replace).
But it keeps stacking. [link]
All i'm trying to do is move the body down like 2 pixels to get that bouncy effect. x.x
Sorry if i'm being a bother. ;;

👍: 0 ⏩: 0

Zorlia [2012-05-19 20:26:57 +0000 UTC]

when i use the replace method, the first layer always shows through the second layer in the animation.
how do i set my layers to replace each other in animations instead of combining?

👍: 0 ⏩: 0

MsGingerBreadCookie In reply to ??? [2012-05-11 14:29:19 +0000 UTC]

Thanks for the info so much >//w//<)/
By the way, I have a question; I used the combine method for a blinking animation and it turned out nicely but I'm wondering if you could do something like a rewind so that the part where he starts to open his eyes would look like when he closed them (sorry for the lame explanation orz) because using the combine method, I would have to redo the eyes again and it would look weird because it would be uneven and lazy person is lazy -sob-

👍: 0 ⏩: 0

Toshiro-Hitsugaya-31 [2012-05-09 16:15:56 +0000 UTC]

thank you very much

👍: 0 ⏩: 0

selenhedgehog12 [2012-04-29 20:13:03 +0000 UTC]

Tutorial in spanish? D:

👍: 0 ⏩: 0

superhorse1999 [2012-04-23 10:26:51 +0000 UTC]

wait, the animation is going too fast. how can i change that?

👍: 0 ⏩: 0

superhorse1999 [2012-04-23 10:22:44 +0000 UTC]

thank you very much!!!

👍: 0 ⏩: 0

ArabianMiaHI2 [2012-04-15 09:41:30 +0000 UTC]

thank you so much! I just got GIMP and you really helped me ^-^

👍: 0 ⏩: 0

FlameoftheDark [2012-04-13 14:36:53 +0000 UTC]

Hey there! Thanks for creating this tutorial! It helps so much!

👍: 0 ⏩: 0

xiii-wings [2012-04-06 11:36:34 +0000 UTC]

Just made my first ever animation with your help! So much fun, thanks a lot

👍: 0 ⏩: 0

ForestLord28 [2012-03-09 00:10:56 +0000 UTC]

I probably did somethi wrong, but during the animation all three frames appear at once like this:
instead of OO, O O, O O
its OO, OOO, OOOO.
what do i do?

👍: 0 ⏩: 0

LittleMissGloomy [2012-02-09 01:12:35 +0000 UTC]

Ignore that last comment, I got it working.. Thank for the tutorial

👍: 0 ⏩: 0

LittleMissGloomy [2012-02-08 08:06:44 +0000 UTC]

Mine says replace and it still stacks...

👍: 0 ⏩: 0

pegasus121 [2012-02-02 01:29:45 +0000 UTC]

I LOVE YOU FOR TEACHING ME THIS! I FEEL SO PROUD OF MYSELF.

👍: 0 ⏩: 0

cheesylily02 [2011-12-13 08:38:15 +0000 UTC]

Thanks for this tut! I almost forgot how to animate with GIMP. Here's the final product if you're interested to see! [link]

👍: 0 ⏩: 0

epalacios19 [2011-12-03 08:35:21 +0000 UTC]

When you make this and finish it and all, how do you get it to go certain speeds, because I made one and its going way to fast.

👍: 0 ⏩: 0

Blaze1090 [2011-11-25 03:09:58 +0000 UTC]

thats so useful...
thank u!~

👍: 0 ⏩: 0

kitsune-wolf-kit [2011-09-27 14:02:12 +0000 UTC]

[link]
yay!!! thanks suuuu much!
but took me awhile to get it right but
thank uuuuuuu~~~~~~~~~~~~~~~~~

👍: 0 ⏩: 0

KotomiTin71 [2011-09-18 03:42:31 +0000 UTC]

I also have been making millions of them. xDD my brother's computer will end up having lots of random animations on his laptop here in the next month. xDD

👍: 0 ⏩: 0

KotomiTin71 In reply to ??? [2011-09-18 02:59:30 +0000 UTC]

I made a taco grabbing a heart the first time. xDDD

👍: 0 ⏩: 0

KotomiTin71 In reply to ??? [2011-09-18 02:11:25 +0000 UTC]

I'm downloading gimp right now. :3 I want to make an AWESOME one of my own! I don't want to keep using other people's icons. It's not as original. XP This way, it's mine. :3

👍: 0 ⏩: 0

breyercrazy [2011-08-07 23:54:03 +0000 UTC]

YIPPEE thanks to your tuto, i made my first animated thing, a sparkly stamp! [link] Thank you so much for the tuto!

👍: 0 ⏩: 0

ocean-sun [2011-07-26 19:10:11 +0000 UTC]

it worked!!

👍: 0 ⏩: 0

LadyRaven13 [2011-07-25 01:03:53 +0000 UTC]

Thank you so much! im very new to making emotes and this really helps alot

👍: 0 ⏩: 0

chrsfaria [2011-06-25 19:12:13 +0000 UTC]

Thank you so much!!

👍: 0 ⏩: 0

Blaisie [2011-04-09 06:17:03 +0000 UTC]

dude, it says "layer name (xms)(type) but wtf is that an how do i get to it?

👍: 0 ⏩: 0

zadel16 [2011-03-30 10:11:27 +0000 UTC]

thank you for this tutorial!

👍: 0 ⏩: 1

12hc12 In reply to zadel16 [2011-03-30 14:12:49 +0000 UTC]

You're welcome!

👍: 0 ⏩: 0

Opalescences [2011-03-17 17:01:17 +0000 UTC]

Hellooo
I'm in need of help. I've been trying to colour in this free to use animation [link] and its not working for me.
As you can see, the animation runs smoothly without fault, but when I play it back on gimp, or once its saved and I'm veiwing it, it has little white flashes between frames
I've played around with it for ages and I ain't gettin anywhere, so could I please get some help........ If your not to busy
for making the tutorial

👍: 0 ⏩: 1

12hc12 In reply to Opalescences [2011-03-17 19:36:17 +0000 UTC]

I really wish I could help, but sadly, I cannot. I apologize. I haven't animated in who knows how long and never actually experienced this issue (though I do know what you're talking about, and can imagine that'd be quite aggravating!). Check out the top of the artist's description for some suggestions on where to go next.

👍: 0 ⏩: 1

Opalescences In reply to 12hc12 [2011-03-18 02:55:45 +0000 UTC]

ok, Thanks heaps

👍: 0 ⏩: 0

FairValentine13Lover [2011-03-16 01:52:27 +0000 UTC]

Good tutorial. Does GIMP cause viruses? I just recently had to Reboot my computer due to a virus caused by a downlodable game maker, and I don't wan to take the risk if ther is a chance of it causing computer problems

👍: 0 ⏩: 1

12hc12 In reply to FairValentine13Lover [2011-03-16 02:17:08 +0000 UTC]

I've never had any issues with it, and I haven't heard of anyone who has. That being said, if you're still way of downloading it, there are steps you can take before downloading to remedy things in the future if things go sour. Backups and system restore points would likely do the trick.
Of course, I can't fully guarantee anything. All I can truly say is that GIMP has never given me any issues.

👍: 0 ⏩: 1

FairValentine13Lover In reply to 12hc12 [2011-03-16 19:08:41 +0000 UTC]

Thank you a ton! I willl be using your tutorial alot when i get it I can assure that!

👍: 0 ⏩: 0

nokinno [2011-03-11 23:12:47 +0000 UTC]

I've been looking at your tutorials while making a emoticon for the first time, I had fun doing it too.
Thank you.

👍: 0 ⏩: 1


| Next =>