Thursday, April 16, 2015

Sprite editing: hair recoloring

Hi everyone,
I've been pretty busy until recently but now I finally have more time to make some major progress on the next version of Broken Hymn.

Um, hopefully the following things I say won't be to confusing. I was making more custom sprites for the game recently and though you guys might like to know more about how I edit sprites for my games. If it's a major character, first I may create it using 3DCG, afterwards to make a custom rpg maker sprite, I normally start this by using a rpg maker sprite generator(like the one that comes with rpg maker vx ace).
I try to make it look as much as possible like the rpg maker character, like when I made Shouko's sprite. Usually it won't look just like the character, so I edit it more in photoshop. The steps I do in photoshop can variety depending on what I want to do with the sprite, sometimes I may do all the editing at once or other times I will do it over a period of time. I edited Shouko's hair color today, so I thought I would show you'll how I did it. Also, this could basically be used to recolor anything in an rpgmaker sprite.

I've edited shouko's sprite before but I've skipped doing some things such as the hair. On the left sprite you see shouko's hair color given using the sprite generator. This is one of the basic hair colors of the generator and it doesn't really match shouko's CG hair color, the difference maybe isn't too major but it can be enhanced more.

Above is one of shouko's CG image, showing a darker hair color. In order to make the sprite's hair color match, I start by opening shouko's CG and shouko's sprite in photoshop(you can also use a program like gimp) and place them side by side. basically something like this:

Then I copy(duplicate) the sprite layer to make two of them(now I have one called layer0 and one called layer1 on top). If you don't know much about image editing, basically layers are images stacked on top of one another, each layer can be edit or hidden individually, and when you put them all together they make a complete image. Layers can be used to give you alot more control over the image.
Then I hide the bottom layer(layer0) and I use the magic eraser tool to quickly remove everything but the hair(tolerance is set to 0 which makes it only erase the exact color you click on, anti-alias is unchecked as it creates something like transparency, and contiguous is unchecked so it will find every instance of the color). For rpg sprites(and most other sprites), they are made using a very limited number of colors(this also helps make the filesize smaller), each time I click on a color, ever instance of it will be erased from the sprite, I just have to be careful not to erase the hair color. With not too many more clicks it will look something like this:

There aren't too many colors in an rpg maker sprite so after a few more clicks, there's nothing left but the hair(note this might require a few more steps if the clothing is the same color as the hair but usually most parts of the sprite are different colors).

Now I make the bottom layer(layer0) visible again and while the new layer with only the hair is still selected I use the color replace tool to change the hair color. first I may choose the most common hair shade in the sprite, then as the color to match, i choose the most common hair shade in the CG image. Then I increase the fuzziness and maybe adjust the handles below a little to if needed until the hair color matches. Sometimes I use color replace more than once to get different shades in and such. It's basically something like this:

Since the hair is in a separate layer, it won't recolor anything but the hair. Afterwards the final look of the hair should look much more like the CG image. Here's the final result:

And the same thing done with natalie's sprite(maybe kind of hard to tell):

Hopefully I didn't make this sound too much more complicated than it is but basically using this and other things on sprites you can greatly improve the quality of the sprite for your game. ^^