Coloring Sprites Tutorial

Here's a trick I use for coloring existing sprite images. It usually takes me an hour to two to complete a full set. I hope you find it helpful!

Also if you don't have GIMP already, you can download it here.

 First we need to export the sprite image from RPG Maker (unless you have a sprite to work with already). To do this, you open up RPG Maker and click on the icon that has the 3D shapes, which is the Resource Manager (see Fig1). Then select the Graphics/Characters folder, and then select the file of sprites you need. Finally click on the Export button and save the image (see Fig2). 

Fig1

Fig2

Launch GIMP and open your sprite image file. Since the image is locked from editing, we’ll have to cut out the sprite we want to edit. Fig3 shows where the cutting tool is located under the Toolbox window. Fig4 shows the size of a single sprite image to be cut; to cut, you click inside of the area that you selected. And then copy the image.

Fig3

Fig4

Now go under File and click on New to create a new image (see Fig5). A window option will appear. Set the Width to be 96px and Height 128px; then at the Fill with option, select Transparency (see Fig6). And click OK. The new image should be a checkered image which indicates it is transparent.

Fig5

Fig6

Paste your copied image onto the new image that you just created. Next we want to anchor down the Pasted Layer, which is shown on the window to the right called Layers-Pattern. Right click on the Pasted Layer and move your cursor to click on Anchor Layer option (see Fig7).

Fig7

Under Colors select Hue-Saturation and a window will open (see Fig8). As you can see there are 6 radio buttons that refer to their corresponding color, and there is Hue, Lightness and Saturation; these are the options we will be tinkering with (see Fig9). Also a quick explanation about the 6 colors. Each color refers to the color shadings from the original. For example, if you see the color green on the original image and you select Green, the areas of the image that has green will change when you use the scaling under Adjusted Selected Color.

Fig8

Fig9

Finally down to business, we get to color! Because the boy’s hair color is in the yellow range, click on the radio button for yellow. Now where Hue is, there is a scrolling scale you can move around; when you go to the negatives the colors are darker and in the positives the colors are brighter. Since I want to give the boy a blonde color, I’ll move my bar to the positive (see Fig10). For Lightness it affects the lighting of the chosen color where negative gives darker lighting and positive gives brighter lighting; so if I wanted a brighter blonde I can move it to the positive. As for Saturation, I think of it as quality because it gives the image a fuller colorful look to it when in the positives; however in the negative it makes the image dull and eventually to gray at the max negative zone.

Fig10

After coloring we sometimes end up affecting the sprite’s skin color, and in this case the mouth area of the new sprite is brighter than the original (see Fig11). So open up the original sprite image. Next we are going to use the Color Picker tool, and on the original sprite click on the color we need (in our case, pick the mouth area color). And the color we picked should show on the Foreground Color (see Fig12). Next we’re going to use the Select by Color tool and click on the mouth area, and you should see the same colors are selected (see Fig13). As for the final step we will use the Bucket Fill tool. Make sure that the color we’re using is on the foreground and that the radio button that says Fill whole selection under Affected Area is chosen; and click on one of the selected area to fill it with the desired color (see Fig14).

Fig11

Fig12

Fig13

Fig14

Now to save this image to PNG, you’ll have to go under File and select Export, then you will be able to save it to any format you want. However you should save it as PNG because it supports transparency. Also I don’t put “$” in front of my file name because it messes up when I upload it to the game resource, so test out which works before exiting out or save it as the gimp file as a backup. Hooray now you’re able to color sprites!    

Thanks for viewing!