Recoloring Pixel Art

[Avery]

Can you make proper recolors?

• Yes
• No
• What do you mean with “proper”?

While dedicated beginners as 15 year old me back then are able to recolor pixelated sprites with MS Paint, that is very much noch recommended.

For this tutorial I will use Gimp, it is free, powerful and can do all the things we need to perform. It runs on Windows, macOS, Linux and AmigaOS, so it is also very likely it runs on your computer as well.
If your files look odd when opened in Gimp, this is due to the default files being indexed with having an alpha channel, which at least my Gimp version cannot show properly. You can simply open the file in a program that can display that (as paint.net) and copy it over to Gimp (as it is more powerful) to continue working or save it from there without that index.



The resource types it applies to by default: charset, SV actor, system: weapons
How to identify a resource of that type:

The graphic uses a small range of unique colors, the amount depends on the style and how many differently colored areas exist on the image. If you zoom in, you can clearly see the different areas. You will also have color ramps for each of those areas.



If we zoom in on Reid, we can see that his hair for example is made up out of 7 distinct colors in total. Sorted from light to dark, they make up the color ramp this shade has.

To recolor such pixelated characters, we have two options:

1. Palette Swap

The safest way to a good alternate color is to choose a matching color ramp from another resource of the same type. For example, if we want Reid’s SV player to have blonde hair, we look for a character with blonde hair:
Her hair palette only consisted of 6 colors, as the hat covered the lightest highlights, so I was so free to add one additional nearly white shade to the fully working color ramp.


The first thing we need to do is to set the image mode of the SV battler (or other resource we want to recolor) to RGB, as the default is indexed to make the image smaller. This only allows a limited color range though, as it hardcodes the image to have no more than 255 preselected unique colors, and it is likely that our choice is not included in these.

You saw in the image above that I drew those color ramps by simply creating little rectangles of that shape. You don’t have to do that, but it makes it very easy.

I like to place my color reference in one of the free spots on the same layer, so I can just box select them and have them gone without any issues. You can also place them on a separate layer if you prefer that.

We “select by color” (threshold to 0) the first shade…


… and then use the pipette (or ctrl+mouse click) on the matching shade of the new ramp and use the bucket fill with “fill whole selection” on that selection.

If we go through all colors of the ramp, the left side becomes the same as the right side and Reid now sports a nice light blonde hairstyle:


Now all we have to do is delete the color reference and export the image under a new name as PNG.

• You don’t have to set up those color ramps, you could also simply use a snippet of the other character to pick the colors from. Setting up the ramp just makes it more convenient
• For pixel art, this is your #1 choice, as balanced palettes are crucial, so simply using one from the same pool that is already balanced will in nearly all cases work perfectly.
• If you have multiple areas on the same character that share the same distinct color and you only want to recolor one part, I recommend duplicating the layer first and then using an eraser.

For example, SF_Actor3_6’s cap and jacket sport the same color. I only recolored the duplicate layer here and still have the original on the layer below (I moved them a little so you can see that, usually the blue would cover the red completely).

With a decent sized hard edge eraser I can now remove the parts that are not needed.

1. Using the color options

We start by setting the mode to RGB here as well. Our example here is the default sword:

Why I picked a weapon: since the range of weapons is pretty small we don’t have many other palette ramps to pick from, so this option is often ruled out - for SV and charsets you usually find some reference to pick colors from.

Let us say we want to change the blade to a blue shade, since our game sports a special blue metal.
We start by selecting all the colors we want to change in that object by using the “select by color” (threshold to 0) and make sure to “add to the selection” after selecting the first color.

As you can see we picked way too much, not only on the sword but also on the other weapons on the sheet.
Now we use the selection methods (set on “subtract from the current selection”) to isolate the area we want to affect, for example we can get rid off everything that was selected on the other weapons by a few well placed box selections…

In the end, we have just the area we need:

You can see that I did not select the black outline part, as that in the weapons always stays black, no matter which color you choose.

Here you can see all the types of color options you have with Gimp.
The options I use:
Hue-Saturation

• + it will keep the ramp with hue shifts intact
• - if the base color is gray, you might have trouble to get to any shade, here the shadows and highlights were separate colors and I had to select the highlights on the color selection in the middle to adjust to match the shadows after the first recolor
• - Areas with a saturation of 0 (completely black/white/gray with no hint of color) are not affected at all

If it does not look off, this is the easiest way to go!

Curves

• + ramps stay intact as long as you stick to smooth curves
• + you can fix brightness and contrast in the process (this is the way to go when you want to recolor something white to black for example)
• + you have full control over the different color channels and the value
• - dragging the curves around is not very intuitive and takes a little time to get a good feeling for
• - if you don’t have a “good eye” for the colors, you could end up with something that does not really fit the other graphics color- or contrast wise

If your base is gray or you want to switch from a light to a dark shade, this is the best way to go!

Colorize

This only applies if Hue-Saturation does not work and you don’t get the color you need with the curves, as there are many reasons to not pick it:

• - the hue of every shade is now the same, the color ramp gets boring and “flat”
• - you can easily end up with a shade that does not fit your other colors
• + it is easier to use than curves if you did not get them to work

 

[ATT_Turan]

Thanks for this with the description of the different tools! This is personally applicable as I'll be doing some recoloring in the near future.