---

MAKING A MONSTER SPRITE FROM A HAND DRAWN PICTURE USING THE GIMP AND GRAPHICS GALE
--By Hero of Hyla--

This is a tutorial on making your own monster sprites for rpg maker 2000 and 2003. These sprites could also be used for character battlers if you didn't mind them not animated (or, if you had the time, you could redraw them and animate them).

You'll need a couple things for this tutorial:

- A scanner
- The GIMP, a free photoshop alternative
- GraphicsGale Free Edition
- A base picture you want to turn into a sprite

If you don't know how to draw or need a little help, check out my tutorial here:

Part 1: http://www.youtube.com/watch?v=tj4hiJJ5_xw
Part 2: http://www.youtube.com/watch?v=2tt4or-TL8s&watch_response

If you don't have a scanner, you can use the image I made for the tutorial, which is here:


Let's get started!

First, scan your image into the computer. If you have a Hewlett-Packard you will be given a screen to select which region of the picture will be scanned:

(I don't know what you can do with other brands of scanners)

Choose the smallest possible area you can that will still contain the whole picture.
Click accept and remember where the file was saved. On my computer it saves to a folder in My Pictures with the month the picture was scanned in.

Next, open the GIMP and go to file>open. Find your picture and open it.


Immediatly go to file>save as and save it as a .xcf image. This is VERY important, because most other file formats can't handle opacity and layers.

Now, goto image>scale image. Resize the image to something that will fit the rm scale. The resolution that rpg maker runs at is 320 wide by 240 high. For this example, the picture will be 82X80.


After resizing, it will look like this:


See how tiny it is? Hold down the shift key and use the mouse wheel to scroll in, or choose or type in a zoom percentage in the box at the bottom right.

Next, if there isn't a window visible called Layers, channels, & paths, then you need to go to Dialogues>New Dock>Layers Channels & Paths.

Select the layer called background and then press the button with the 2 sheets of paper to duplicate it. You should also be able to accomplish this by right clicking and selecting duplicate, but it won't work on my computer for some reason. Click on the bottom layer again and press the new layer button, which looks like a single sheet of paper. Select the fill with white option. This will make a new layer between the two duplicate layers. Now, select the top layer and press new layer, also selecting white. With the top layer still selected, click on the word normal at the top of the layers window and select multiply. Delete the bottom layer by selecting it and clicking on the trashcan.


Now to actually start drawing the sprite. Select the pencil tool either by choosing it in the tools window (the window called THE GIMP) or by pressing "n". Press the button to the right of the word brush and select the 1 pixel brush. Make sure black is the selected color. (NOTE: To quickly change the currently selected colors to black and white, press "d".) Make sure the top layer is selected, and begin tracing the outline of the picture. If you mess up, DON'T USE THE ERASER! You are working on a white canvas, and using the eraser will turn part of the canvas transparant. Instead, keep the pencil selected, hold down ctrl, and click on a blank part of the picture. Now the pencil will be white. Use this to correct mistakes, and use the "d" key to revert to black.





Finished!

Once you've finished this step, open up the layers dock. Click on the eye next to the middle layer to make the layer invisible. Now you can see the outline without the old sketch behind it.

Now that you've finished the outline, it's time to work on coloring. Go to your palette and and click on the new color button (the piece of paper). Choose a color for the skin tone that you like. Then click on it again in the palette to select it.

Use the fill bucket or pencil to fill in all the areas of skin with the skin tone you made. As you start coloring, you will want to build your own palette on the side of your image. To do this, draw a square in each color that you have used in the image.

Keep going with all your base colors for the image.



Now, select one of you colors, and set it to the active color by holding ctrl and clicking on it with the pencil. Now, click on new color from foreground. You should see a new color in the palette identical to the color you had selected. Double click on it, and make it a lot darker. Click OK.


Add this color to your palette on the side of the image, right next to the original color for easy reference. Find all the areas on your picture that use the original colors, and change the background to your new color. If the section your tracing is next to another section of a different color and you don't know what color to make the conflicted outline, choose the color that is higher up, ie the shirt over the skin or the pants over the boots. Repeat for all the colors in your image.




Once you've finished this step, you can move onto shading. Create a new layer above the rest of the image. Set the fill type to transparancy and click ok.

With the new layer selected, make sure the type is normal and change the opacity to 50 percent. Choose the brush tool by pressing "p" or selecting it under "tools" and set the color to black.

Begin shading the image by drawing along one of the edges, in this example the light is coming from the upper right, so the shadows are on the lower left. You can also use this tool to anti-alias; just trace over every line instead of just where shadows would be.


Now you are nearly done using the gimp. Save your image, and then go to save as. save it as a .png and click export if it asks. I'm not sure what all of the options under png are, but I usually uncheck interlacing and uncheck save creation time.
Open up graphics gale and open your image.

Using the fill bucket, fill the background of your picture with a vivid color not used in the picture itself, like bright pink.

You might notice some areas that are still white. That's because when you were shading you went out of the lines and touched part of the background. Fix these spots by turning them pink with the pencil or fill bucket. Also get rid of the palette you have been keeping on the side of the image.


Now, if you are satisfied, it's time to turn it into an acceptable rm2k/3 image. Go to All Frames>Color Depth>256 Colors. Check your palette, there will now be only colors that were used in the picture itself. Save it.


Import it into rpg maker under Monster. If it says "Unsupported PNG Image, like it sometimes does, try this: Go back to the image, select all (Ctrl A) and go to File>New and make a new image of the same dimensions. Paste it in and reconvert it to 256 Colors. Save it. If that doesn't work, I don't know what's wrong.
Now, test out your monster in a test battle.


Now you're done! I hope you learned something from this tutorial and that you use it to make your own resources. If you have any problems, PM me.
This is the final image from the example:


Use it if you want.

well, now i know what to do if i ever get a scanner

5/5

I think we should have more 1337 tuts like this one. Having custom GFX in a game can be the most pleasant feature... It's almost professional.

In-fact, it is professional.

Well explained, well thought out tutorial. This could be used for other than just monsters, too. I may well use this in the future, if I get my old scanner to work some day!

*****