GIMP Animation Tutorial (Full Version)

All Forums >> [Gaming Community] >> [Legends and Lore] >> Artists of Legend >> Art Academy



Message

LightningIsMyName -> GIMP Animation Tutorial (8/21/2007 11:22:57)

GIMP Animation Tutorial

Here you will learn to make an animation from a spritesheet.
If you already have your animation frames ready, skip to step 7

All the links will lead to a picture of how it should look

Step 1:
Open GIMP, and paste your spritesheet from your file on the computer
File -> Open as a layer...
It should look like this (depending on your spritesheet) http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/1.gif

Step 2:
Select one of the frames of the animation with the rectangular select tool and copy it
http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/2.gif

Step 3:
Create a new image window (Ctrl + N) in the right size for the animation with a transperent background
http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/3.gif

Step 4:
Paste the frame you copied earlier (Ctrl + V), and make it a new layer (click the button with the white paper on it in the layer window)
http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/4.gif

Step 5:
Delete the layer called background in the new window you opened

Step 6:
Repeat Steps 2 and Step 4 for each frame of the animation
you should get something like this http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/5.gif

Step 7:
File -> Save a copy...
type the name of your animation and then afterwards add .gif
In the export window select the options in the picture below:
[image]http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/6.gif[/image]

Step 8:
Choose these settings:
http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/7.gif

Final product:
[image]http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/Animation.gif[/image]

Final settings:
In order to make all the animation frames in the right place and not each frame on it's own place, make each time one frame (layer) visible and the frame (layer) before it in the GIMP window to move every frame for their place.

This is the ending:
[image]http://i113.photobucket.com/albums/n228/fuzzy1992/Guides/GIMP_Animation/Animation-1.gif[/image]

After you have created the animation and saved the file, try to use the image->autocrop function to erase the transperent space around the sprite.

I hope you enjoyed!

Sprite link is here http://planetrenders.net/renders/displayimage.php?pos=-19687

GIMP Animation Tips by Ninja 293
you can make each frame Quicker or slower, name each layer:

Frame 1(100ms)
Frame 2(200ms)
Frame 3(300ms)

(this will allow you to have diffrent duration for each frame)
And so on, you will realise that it is getting slower each time. You can view your animation work before you save it; Filters>Animation>Playback
Try experimenting with the (ms) to find what you want.

Tips:

  • The higher the (ms) the slower the frame changes to the Next.
  • you can use the GAP (GIMP Animation Pack) for more complexed animations, it can be downloaded at the GIMP homesite in the downloads section.


Want another animation program with a bit more customizable options? Try MS Gif Animator.
Download Link http://www.versiontracker.com/dyn/moreinfo/win/13212
Tutorial Link: http://forums2.battleon.com/f/tm.asp?m=11083306&mpage=



cooksey -> RE: GIMP Animation Tutorial (8/23/2007 22:52:12)

now what if the sprites i have have a white background?



LightningIsMyName -> RE: GIMP Animation Tutorial (8/24/2007 10:03:31)

If they have a white background, use the Wand tool to erase it:
click Z on your keyboard to select the magic wand tool. on the main GIMP window Change the Threshold to zero (0). click on the color you want to remove. then click Ctrl+K to delete this part.

Click on other parts that have the same color (if the white background is not continuous) and then remove it in the same way.

if your sprite doesn't have the background color you want to remove anywhere on the sprite itself and only on the background,
click Shift + O to select the "selection by color tool", on the main GIMP window Change the Threshold to zero (0).
click on the color you want to remove. then click Ctrl+K to delete this color from all the image



Master_of_Dragonz -> RE: GIMP Animation Tutorial (8/24/2007 10:25:48)

This is useful...thank you very much for the tut!

I made this with the GIMP...

[image]http://i13.tinypic.com/5zpz14i.gif[/image]



LightningIsMyName -> RE: GIMP Animation Tutorial (8/24/2007 12:04:53)

Nice!
next time try to autocrop the image with the layers to create the animation with less space around it (i'll add this part to the tut)



dark snypa -> RE: GIMP Animation Tutorial (8/26/2007 17:32:02)

Thanks very much!

[image]http://i155.photobucket.com/albums/s281/DarkSnypa/GokuStunt.gif[/image]

^ My outcome ^^ Hopefully, I will create many more! (Always remembering this tutuorial XD)

Edit: Instead of spamming up your gallery, I'll just edit ^^. Yeah, when I was selecting the image my mouse slipped and selected part of another sprite, but I didn't notice until it was done



LightningIsMyName -> RE: GIMP Animation Tutorial (8/26/2007 17:34:03)

Nie otcome.
Just one comment - on one of the frames you have a black dot on the side that bugs the eye since it's only on one layer - and that makes it flashy.

Good luck with your animations



Waseinseon -> RE: GIMP Animation Tutorial (8/26/2007 18:16:25)

it didn't work[:(]no matter how much i try, it comes out as a pic with a buch of more pics on top



dark snypa -> RE: GIMP Animation Tutorial (8/26/2007 18:54:45)

Did you save as .gif and then when on the export page press export as animation?



ion24 -> RE: GIMP Animation Tutorial (8/26/2007 20:42:45)

Where Do i find sprites?



LightningIsMyName -> RE: GIMP Animation Tutorial (8/27/2007 3:47:27)

You can find sprites here:
http://planetrenders.net/renders/thumbnails.php?album=17 (if you are looking for something specific - use the search box on the top right corner)

quote:

ORIGINAL: Waseinseon

it didn't work[:(]no matter how much i try, it comes out as a pic with a buch of more pics on top

Check 3 things:
1. each picture is on a diffrent layer
2. you save as a gif file with the export option
3. uyou selected save as animation and "one frame per layer (replace)" on the save as a gif window



cooksey -> RE: GIMP Animation Tutorial (8/27/2007 22:44:24)

alright for some reason my pc will not let photobucket find any gif. animations or img.



LightningIsMyName -> RE: GIMP Animation Tutorial (8/28/2007 16:05:53)

cooksey, try to restart your PC or just try another site like imageshack.
It happens sometimes



ion24 -> RE: GIMP Animation Tutorial (8/28/2007 22:56:41)

Thanks for telling me 'bout the sprites, but could you Explain the Final Settings More thoroughly?



Puppy -> RE: GIMP Animation Tutorial (8/28/2007 22:58:23)

Heh, I've been making animations for a while. Great Tut.



LightningIsMyName -> RE: GIMP Animation Tutorial (8/29/2007 4:06:19)


quote:

ORIGINAL: ion24

Thanks for telling me 'bout the sprites, but could you Explain the Final Settings More thoroughly?

Final settings mean that if you see that one of the frames of the animation is moved a little bit to the side and should be a little closer to the center so the animation will look better, move his layer to the right place.

Example:
[image]http://i113.photobucket.com/albums/n228/fuzzy1992/finalsettings1.gif[/image]
Here the red circle is not exactly in the same spot as the blue circle.
So i moved it to the right place so now it will be exactly at the same spot as the blue circle:
[image]http://i113.photobucket.com/albums/n228/fuzzy1992/finalsettings2.gif[/image]

Final settings doesn't necesseraly mean to move something to the exact spot like one of the other frames, it means to move to the place which makes the animation look the best.



ion24 -> RE: GIMP Animation Tutorial (8/29/2007 4:37:28)

Really? Wow, that's exactly what i have been doing![:D] I thought you meant like Copy the frame twice so it would space out![:D] Thanks so Much For Putting up with my N00By Questions![:D] GREAT Tut BTW.



cooksey -> RE: GIMP Animation Tutorial (8/29/2007 15:18:06)

you mind if i paste this tut on another site i will give full credit to you...



LightningIsMyName -> RE: GIMP Animation Tutorial (8/29/2007 16:46:37)

cooksey,
Please link me to the site (BY PM so we won't spam here), and i'll PM you the pictures with my name on the pictures that you can use on the site.



Necromancer Wii -> RE: GIMP Animation Tutorial (9/2/2007 16:07:53)

[image]http://img502.imageshack.us/img502/9425/animationattemptxu1.gif[/image][image]http://img180.imageshack.us/img180/303/animatedsalamanceaf6.gif[/image]
lol It worked! I am so cheap I stole it, lol not. But What is a spritesheet?

My second one won't stop flashing!

[image]http://img249.imageshack.us/img249/3465/animatedsalamancehw1.gif[/image]
now it did!



ion24 -> RE: GIMP Animation Tutorial (9/2/2007 22:03:47)

Did you Delete the Layer Called "Background"? If Not, it Won't.



Necromancer Wii -> RE: GIMP Animation Tutorial (9/3/2007 7:52:05)

lo nope didn't do that.



LightningIsMyName -> RE: GIMP Animation Tutorial (9/3/2007 11:40:20)


quote:

ORIGINAL: Necromancer Wii

[image]http://img502.imageshack.us/img502/9425/animationattemptxu1.gif[/image][image]http://img180.imageshack.us/img180/303/animatedsalamanceaf6.gif[/image]
lol It worked! I am so cheap I stole it, lol not. But What is a spritesheet?

A spritesheet is a picture with lots of frames that when put together make a smooth animation.
Spriteshhets usually have their frames from console games.



Blue Wolf -> RE: GIMP Animation Tutorial (9/3/2007 12:13:28)

Nice tut.i like making animations,but this made it easier by a bit.



Necromancer Wii -> RE: GIMP Animation Tutorial (9/12/2007 19:22:02)

YES! my first best animation lol:[image]http://img526.imageshack.us/img526/1245/circleanimationze6.gif[/image]



Page: [1] 2 3   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition
9.423828E-02