Okay, so we all know Graphics Gale has all kinds of crazy, super-spiffy features like animation frames, onion skinning, guides, grids, and layers (you do know that, don't you?!), but half of them are no good for spriting because RMXP gets its sprites from sheets, right? Wrong-o! I'm going to show you how to take a sprite template, split it up into frames, use layers to keep each component of your sprite (hair, clothes, etc) seperate, then export your work back into sprite sheets. As a bonus I'll show you how to make a demo animated GIF if you have the payed version of Gale and you don't already know how (it costs 18 bucks, settle down there).
So what do you need?
Graphics Gale, first off, get it here, it's free.
Second, you need a sprite template. Any template will do, but I'm going to use the half-kaizer female template because I want to do some work on it anyway.
Third, you aught to make yourself a .pal file with all the colors you want to use on your sprite and have it ready to go before you start, it will save you a headache later (see the spoiler at the end of the tutorial).
Got it? Great, let's get started!
Step 1: Set-Up
First, load up your template, set it to 256 color mode, and load your .pal. If you don't know how to do that, check out Venetia's Hair Tutorial, scroll down to the palette swapping section, there's a mini-tutorial on using Gale's palette tool there.
Step 2: Guides
Next you need to set up some custom guides to help you cut up your template into single frames. This is going to take a bit of easy math. First, go look at File->Properties to find out the image dimensions.
http://img.photobucket.com/albums/v326/ ... pture3.png[/img]
You're going to divide these by 4 (4 rows, 4 frames per row, if your template is different use the appropriate number).
Okay, now that you have those numbers, you need to plug them into custom guides. Click on the Custom Grid tool, select 'Input...' and put in the numbers you came up with. In the case of the HK female template, it comes out to 85 pixels high, 50 pixels wide (x, y). Click OK and you'll have a nice set of guides outlining each frame.
http://img.photobucket.com/albums/v326/ ... pture6.png[/img]
Step 3: Cut and Paste, Cut and Paste, Cut and...
Next, toggle the Snap tool on, then select the rectangular selection tool and select the first sprite, then copy it.
Now you need to create a new file with the dimensions we came up with in step 2. For me, it'll be 85x50. Got it? Great. Load your .pal into it. Got that? Awesome. Paste your first sprite into your new image.
I like to set the background color to transparent in the base layer, using the layer properties window. That's totally personal preference.
Okay, next up, you create a new frame. Don't worry about the settings right now. You can name it if you like.
http://img.photobucket.com/albums/v326/ ... pture8.png[/img]
Now go back to your template, select the second sprite, and paste it into the new frame. Getting the picture? Great, repeat that 14 more times. Yes, it's tedious, but you only have to do it once
Step 4: Setting Up Your Frames
Okay this is an easy one. We're going to set up the frame rate and a few other things in each frame.
Open up the frame properties on any frame. Click the "all frames" checkbox, then select a 60fps Delay. This splits each second of animation up into 60 segment, so in the box below it you are setting how many parts to delay for each frame. I usually use 15, that gives you four frames per second which animates pretty nicely. Set the Disposal to "previous". I don't remember why TBH but I remember it being necessary. After you do that, click OK. Since you had "all frames" checked it will set that in every frame, easy as pie.
http://img.photobucket.com/albums/v326/ ... ture11.png[/img]
You can also cycle through each individual frame and enable "Transparency". This is critical if you want to use Onion Skinning. Once you check it, you can use the little arrows in the bottom left to cycle from frame to frame, but you have to do it individually for each.
Now that you've got your template split up, you'll want to save it to its own file so you can reuse it later (make sure you save it as a .gal! Gale won't warn you not to). Once you've done that save it again with a different name so you can work on it without messin up your template
Step 5: Layers
Okay, now we get to the fun part. The first thing you want to do is add a layer. Do this from the Layer menu. Name it after whatever part you're going to do first, I decided to start with a helmet. It is critical to make sure you use consistent names for your layers in each frame. Otherwise Gale might get confused and put you on a different layer than you were working on when you change frames and... yeah it's a pain in the ass.
http://img.photobucket.com/albums/v326/ ... ture12.png[/img]
Got that? Okay! Begin Spriting!
Once you've finished your first helmet (or what-have-you) you can drag your helmet layer from the Layer box onto the next frame in the Frame box and Gale will put a copy of that layer into that frame, which is so very cool :D Make sure you align it with the sprite by selecting it with any selection tool and moving it appropriately!
Continue to repeat those steps until you have every part for every frame finished and ready to go onto a sheet. Yep, I'll see you in a week or so...
Step 6: Exporting & Animated GIFs
Hello again, you're magically transported into the future where you've finished all the different parts for your sprite, each in its own appropriately named layer, for all 16 frames. Whew, that was a lot of work! Now it's time to make these into sprite sheets usable by RMXP. Don't worry, it's not nearly as hard as it was to split your template.
First off, go through each frame and hide all the layers except the one you want to make a sheet out of. We'll do the helmet first.
Now go to File->Export. Select Combined File and set Rows to 4 (4 rows of 4 sprites, if your template is different set it accordingly). Save it as a .png. All done, you have your helmet (or whatever) sprite sheet! Repeat that for each part.
Bonus: Have the full version of Gale? Great, you can save animated gifs. Go and make all layers in every frame visible. Got it? Okay. Are you ready for this? Go to File->Save as... and select GIF. Set Loop to 0 (it'll loop infinitely that way).
Click save. Now you have an animated GIF. Whew If you want to only save one movement direction for whatever reason, here's how you do that: First, click on the first frame of that direction. Hold down shift and click on the last frame of that direction. Next, click the copy frames button. Create a new document with the same dimensions as this one. Now click the paste frames button. Great, now you have just those frames. Save it as above.
The Final Product!
http://img.photobucket.com/albums/v326/ ... r-legs.png[/img]http://img.photobucket.com/albums/v326/nphyx/HK/rosearmor-boots.png[/img]http://img.photobucket.com/albums/v326/nphyx/HK/rosearmor-helmet.png[/img]http://img.photobucket.com/albums/v326/nphyx/HK/rosearmor-body.png[/img]
http://img.photobucket.com/albums/v326/ ... earmor.gif[/img]
This is what I came up with. Note I have changed the colors by doing a few quick palette swaps, I thought rose armor would look better in rose color. I hope someone finds this monster of a tutorial handy!
So what do you need?
Graphics Gale, first off, get it here, it's free.
Second, you need a sprite template. Any template will do, but I'm going to use the half-kaizer female template because I want to do some work on it anyway.
Third, you aught to make yourself a .pal file with all the colors you want to use on your sprite and have it ready to go before you start, it will save you a headache later (see the spoiler at the end of the tutorial).
Got it? Great, let's get started!
http://img.photobucket.com/albums/v326/nphyx/Screenshots/Capture2.png[/img]
Here's my Gale layout. You should have all the same items on your screen in some place or other. I've pointed out all the things you'll need to find for the next few steps.
Here's my Gale layout. You should have all the same items on your screen in some place or other. I've pointed out all the things you'll need to find for the next few steps.
Step 1: Set-Up
First, load up your template, set it to 256 color mode, and load your .pal. If you don't know how to do that, check out Venetia's Hair Tutorial, scroll down to the palette swapping section, there's a mini-tutorial on using Gale's palette tool there.
Step 2: Guides
Next you need to set up some custom guides to help you cut up your template into single frames. This is going to take a bit of easy math. First, go look at File->Properties to find out the image dimensions.
http://img.photobucket.com/albums/v326/ ... pture3.png[/img]
You're going to divide these by 4 (4 rows, 4 frames per row, if your template is different use the appropriate number).
Okay, now that you have those numbers, you need to plug them into custom guides. Click on the Custom Grid tool, select 'Input...' and put in the numbers you came up with. In the case of the HK female template, it comes out to 85 pixels high, 50 pixels wide (x, y). Click OK and you'll have a nice set of guides outlining each frame.
http://img.photobucket.com/albums/v326/ ... pture6.png[/img]
Step 3: Cut and Paste, Cut and Paste, Cut and...
Next, toggle the Snap tool on, then select the rectangular selection tool and select the first sprite, then copy it.
Now you need to create a new file with the dimensions we came up with in step 2. For me, it'll be 85x50. Got it? Great. Load your .pal into it. Got that? Awesome. Paste your first sprite into your new image.
I like to set the background color to transparent in the base layer, using the layer properties window. That's totally personal preference.
Okay, next up, you create a new frame. Don't worry about the settings right now. You can name it if you like.
http://img.photobucket.com/albums/v326/ ... pture8.png[/img]
Now go back to your template, select the second sprite, and paste it into the new frame. Getting the picture? Great, repeat that 14 more times. Yes, it's tedious, but you only have to do it once
Step 4: Setting Up Your Frames
Okay this is an easy one. We're going to set up the frame rate and a few other things in each frame.
Open up the frame properties on any frame. Click the "all frames" checkbox, then select a 60fps Delay. This splits each second of animation up into 60 segment, so in the box below it you are setting how many parts to delay for each frame. I usually use 15, that gives you four frames per second which animates pretty nicely. Set the Disposal to "previous". I don't remember why TBH but I remember it being necessary.
After you do that, click OK. Since you had "all frames" checked it will set that in every frame, easy as pie.http://img.photobucket.com/albums/v326/ ... ture11.png[/img]
You can also cycle through each individual frame and enable "Transparency". This is critical if you want to use Onion Skinning. Once you check it, you can use the little arrows in the bottom left to cycle from frame to frame, but you have to do it individually for each.
Now that you've got your template split up, you'll want to save it to its own file so you can reuse it later (make sure you save it as a .gal! Gale won't warn you not to). Once you've done that save it again with a different name so you can work on it without messin up your template
Step 5: Layers
Okay, now we get to the fun part. The first thing you want to do is add a layer. Do this from the Layer menu. Name it after whatever part you're going to do first, I decided to start with a helmet. It is critical to make sure you use consistent names for your layers in each frame. Otherwise Gale might get confused and put you on a different layer than you were working on when you change frames and... yeah it's a pain in the ass.
http://img.photobucket.com/albums/v326/ ... ture12.png[/img]
Got that? Okay! Begin Spriting!
Once you've finished your first helmet (or what-have-you) you can drag your helmet layer from the Layer box onto the next frame in the Frame box and Gale will put a copy of that layer into that frame, which is so very cool :D Make sure you align it with the sprite by selecting it with any selection tool and moving it appropriately!
Continue to repeat those steps until you have every part for every frame finished and ready to go onto a sheet. Yep, I'll see you in a week or so...
Step 6: Exporting & Animated GIFs
http://img.photobucket.com/albums/v326/nphyx/Screenshots/Capture14.png[/img]
First off, go through each frame and hide all the layers except the one you want to make a sheet out of. We'll do the helmet first.
Now go to File->Export. Select Combined File and set Rows to 4 (4 rows of 4 sprites, if your template is different set it accordingly). Save it as a .png. All done, you have your helmet (or whatever) sprite sheet! Repeat that for each part.
Bonus: Have the full version of Gale? Great, you can save animated gifs. Go and make all layers in every frame visible. Got it? Okay. Are you ready for this? Go to File->Save as... and select GIF. Set Loop to 0 (it'll loop infinitely that way).
Click save. Now you have an animated GIF. Whew
If you want to only save one movement direction for whatever reason, here's how you do that: First, click on the first frame of that direction. Hold down shift and click on the last frame of that direction. Next, click the copy frames button. Create a new document with the same dimensions as this one. Now click the paste frames button. Great, now you have just those frames. Save it as above. The Final Product!
http://img.photobucket.com/albums/v326/ ... r-legs.png[/img]http://img.photobucket.com/albums/v326/nphyx/HK/rosearmor-boots.png[/img]http://img.photobucket.com/albums/v326/nphyx/HK/rosearmor-helmet.png[/img]http://img.photobucket.com/albums/v326/nphyx/HK/rosearmor-body.png[/img]
http://img.photobucket.com/albums/v326/ ... earmor.gif[/img]
This is what I came up with. Note I have changed the colors by doing a few quick palette swaps, I thought rose armor would look better in rose color. I hope someone finds this monster of a tutorial handy!
As a side note, it is admittedly a pain in the ass to swap palettes in a .gal file with multiple frames. For some crazy reason Gale thinks it's cute to keep a separate palette for each frame This is why I had you set up a palette in step 1. It'll be much easier on your mouse and your sanity to do your palette swapping on the sprite sheets themselves than doing it frame by frame. If you made a demo gif, save it, close it, and reopen it and you can swap palettes on all frames at once, since GIFs can't have seperate palettes on each frame.
This is why I had you set up a palette in step 1. It'll be much easier on your mouse and your sanity to do your palette swapping on the sprite sheets themselves than doing it frame by frame. If you made a demo gif, save it, close it, and reopen it and you can swap palettes on all frames at once, since GIFs can't have seperate palettes on each frame.