So you want your sprites to be 16 colors


Pixel dynamo Judas recently had a pesky problem that one typically runs into as an experienced pixel pusher: midway through his latest sprite, he found he had too many colors

20, to be exact.

20, to be exact. Hard to tell without the right tools, isn’t it?

Newcomers may ask what that means and why it’s a problem, and the answer has to do with technical accuracy. If you’re simply building a sprite to have fun, then it isn’t a problem; the color count is irrelevant. But if you’re a more serious hobbyist who likes to imitate the professionals and work within the constraints they do when making the games you like to play, then you have a few more rules to play by — one of them being the number of colors you’re allowed to use. In short, games like Street Fighter 2 and King of Fighters use 16-bit graphics, which means the characters must have only 15 colors of pixels, plus one color for their transparent background. This is in order to keep within the limits of the games’ graphics hardware.

as Photoshop so helpfully illustrates here with the "Color Table" tool

..as Photoshop so helpfully illustrates here with the “Color Table” tool.

High color count problems usually come up when you’re just casually doing a sprite and getting lost in the flow, picking satisfying colors as you go along, and then discovering the issue after you’ve put a lot of work into it. By then you’re pretty much married to the colors because they’ve been in front of you the whole time that you were making so many decisions about the sprite, and thus influencing numerous choices about small details. A vexing example being how strong an outline to put around a strand of hair overlapping the face.

The first step is to be brutal and detach yourself from the color choice. I knew right off the bat that this sprite was going to need to share a few colors between the skintones and yellow hair (a common trick in many sprites), and even I was going to be sorry to see that gorgeous pale-orange shade of yellow get switched out.

artistic conventions. if it works, it works.

Skin-haired blondes. If it works, it works.

The next step is to find any easy targets that a casual observer wouldn’t notice. In this case, there were two shades for the bluegreen areas on the outfit, which took up so few pixels that they could safely be reduced to one. Note that even though it only took up a few pixels of space, the bluegreen color couldn’t be eliminated altogether because it was providing an accent color to the reds and yellows.

these take up such little space that one can be eliminated. In fact, looking at this color table, Photoshop tends to list colors in such an order that you can already take a pretty good guess at which ones will be on the chopping block.

These take up such little space that one can be eliminated. In fact, looking at this color table, Photoshop tends to list colors in such an order that you can already take a pretty good guess at which ones will be on the chopping block.

So that leaves 19 colors, with three colors to reduce. Time to fire up GIMP/Photoshop’s secret weapon for pixel artists: Indexed Mode. This tool will save you an enormous amount of time if used well, and help reduce your decision-making to simple math. In PS, making sure the sprite’s in RGB Mode, go to IMAGE > MODE > INDEXED COLOR. In the set of options that pop up, set the Palette to Local Perceptual, the colors to 16, the Forced to None and check the Transparency box (if your background is currently transparent, like this one is). You’ll now be getting Photoshop’s opinion of what three of those 19 colors can be eliminated and which of the other existing colors they can be replaced with.

Hurrah! We’re done! ..Oh wait, it’s saying that mathematically, the brightest skin shade should be replaced with the light gray. Well that obviously won’t look right to non-calculators like us. It’s also saying some of the light grays and the white should be merged together, but that doesn’t look right to my human eye because A) those grays are used for important details, and B) they’re used a lot and in large, noticeable areas. What I was really hoping for was to merge together some of the skintone and yellow hair, and maybe blend a dark red into the brown of the skin. I’d rather not touch the grays.

Mathematically correct, but you're still the artist

Mathematically correct, but we’re making art here, not a scientific equation.

So then we need to tell Photoshop that some colors are off-limits for this calculation. First I make a new copy with “Create a new document from current state” command so I don’t accidentally overwrite the original image. Then using the Magic Wand tool, (Tolerance: 1, Anti-alias and Contiguous unchecked), I select all those blacks, grays, whites, bright reds and the bluegreen that I know I don’t want to change, and delete them. I do a convert to Indexed Mode and change the Palette to Exact to see how many colors that leaves me with. It tells me 10 with the transparency, and I still want to eliminate three, so I switch the Palette back to Local Perceptual and switch the colors to seven and let’s see what happens..

colorcount06

As expected, it changes the skintones to the hair yellows, showing me that the shades of the hair can be switched out for the skin. Ah, but which is it, do I use the skintone as the new hair color (making the hair look bleached), or the hair as the new skintone (making the skin really yellow)? The answer: compromise. I’m going to blend the two together and get the best of both worlds. Take the Pencil at 50% opacity and eyedropper the skin color, then pencil that color over the hair color. The 50% mixture means you’ve got a skintone that won’t be too yellow and a hair color that won’t be too bright. (Tip: if you want even less yellow in your skin, dab the pencil on the new mixed color one more time with the original skin color while still at 50%, and you’ll cut the yellow in half again.) Eyedropper that new color and Fill Tool both the skin and hair shade with their new compromise color. Repeat for the other pairs of colors. Finally, go back to the original sprite and paste the new colors over it. Voilà.

colorcount07

With this technique, on the condition that you’ve made at least some effort initially to limit your color choices, you could potentially reduce almost anything to a 16-bit version of your palette without a significant change to its look.

Indexed Mode. It’s like a pocket calculator for colors.


15 Responses

  • Doctor says:

    I made my own edit, Kiwi.
    http://i531.photobucket.com/albums/dd351/rene_dragus/16bit_zpsf4f27cc2.png

    If you see this le’me know what you think ;)

  • Kiwi says:

    This could also work — like many things in art, there’s rarely only one answer. Sacrificing the unique dark yellow lets the skin have an extra fleshy tone. And so the challenge: is the tiny area of skin worth trading the detail of the much larger area of yellows? In this case, yours works good because the red mixed in with the yellow gives everything a more colorful orange overtone. In cases where you want to let the character have multiple palettes (which I’m not very into btw), you might run into difficulty.

  • Absoloot says:

    Probably a stupid question, but how do you pull up the color table? Using PS CS3

  • Kiwi says:

    You have to have your image set to Index Mode (Image > Mode > Index Color). When you do, another option will come up in that menu called Color Table (Image > Mode > Color Table), which shows 256 spaces for available colors, and which colors your image is currently using. (GIF images can only contain 256 colors at the most)

  • TechBro says:

    May I ask how does one create a sprite used in this tutorial?

    Haven’t found a tutorial that shows how to make this sort of sprites.

    Reminds me a lot of Megaman Zero’s sprites.
    Would love to know how to make those as well, but I don’t even know where to start such sprites.

    Am I supposed to make the outline like in most cases, fill in the colors, add shading etc?…or what?

  • Kiwi says:

    Give this tutorial a look and see if it would be something you’re comfortable with: http://2dwillneverdie.com/tutorial/the-making-of-el-zombo/
    Also, take a look at this youtube for a video on how to do something similar: http://www.youtube.com/watch?v=tvZRJigECG8

  • TechBro says:

    Thanks for a quick reply!

    Ok, I’ll try those methods.

    One more thing…you’re probably familiar with GraphicsGale spriting software. When I was looking at their homepage I saw some sprite character that I liked a lot, but again I’m not sure how to make a similar one.
    I’m talking about the .gif animated sprite at the start of GraphicsGale software (I can’t share images here).

    If you have some spare time to check it out, let me know how to make that please.

  • Kiwi says:

    There’s no one set way to do it, but take a look at some of the examples I use in this tutorial: http://2dwillneverdie.com/tutorial/fix-my-sprite-volume-3/ to see if you get some inspiration

  • Eric says:

    Hello. I’m a GIMP user. I just want to know if there is a possible way to enable the transparent box in the color table. I tried ‘generating the optimum palette’ and ‘using web-optimized palette’ with a check for removing the unused colors from the color table (colormap). I convert but there is no transparency in the color table.

  • Kiwi says:

    Gimp is odd in that its Colormap panel doesn’t represent a transparent color — if you open a .gif of a sprite that has the usual 15 colors and a transparent background, it’ll only show the 15 colors and nothing for the last color. It just assumes transparency doesn’t count, I guess.

    That means for recalculating colors, you have to temporarily work with a solid color for the background. Magenta or green or some other color that’s unrelated to any in your sprite. After you’ve reduced everything to the colors you like, then you can go to LAYER > TRANSPARENCY > ADD ALPHA CHANNEL, select the background, and delete it.

  • Emily says:

    For the netx tone, can you show us how to do low-res pixel art? Something like Terraria, King Arthur’s Gold.

  • Tyler says:

    Yes please, that would be really great!

  • Alpha Proto says:

    I have never used GIMP before. It may be something I can make use of.

  • Kiwi says:

    GIMP’s pretty nice, feature-wise. It’s as close as you get to Photoshop for free. If it’s too overwhelming though, take a look at Paint.Net

  • Carbon_KO says:

    This was very helpful especially if your trying to emulate a specific pixel style.

Back