In this tutorial, I will explain you how to use a couple techniques I used to improve Planet Centauri’s sprites before implementing them into the game (or before animating them). Some of the rules shown here are very easy to use, and/or are purely methodical; so even if you aren’t very skilled, follow those simple guidelines to make your sprites cleaner.
A lot of basic mistakes will ruin the quality of your art. Thankfully, they’re also generally quite easy to fix with some experience, and by paying attention.
Too many colors
Pixel art is all about constraints. When two colors are very close, merge them into an intermediate one, so you see if it improves the result. Using a small palette will help you improving your skills much more easily, and will make creating sprites also easier. It also will make it easier to identify unwanted artifacts (i.e. misplaced pixels).
If you are constructing a palette with gradients, avoid at any cost independent gradients (i.e. only dimmed/lighted base colors). Use gradients that depends on each other.
You can also try to use yellow-ish or cyan-ish saturated light colors, and blue-ish and purple-ish desaturated dark colors. However, avoid using an over-saturated or an under-saturated palette. This usually ends up bad and breaks contrasts. You should also use gradients with outspread tints to avoid washy color contrasts.
Remember never to use more colors than necessary, and use gradients with contrasted brightness. Feel free to try using other generic palettes on your sprite to compare it with your palette so you can improve it.
Avoid as much as you can excessive contrasts between neighboring pixels. For example, a black line over a white background usually won’t look natural. A line that fits the background color well gives a realistic volume effect.
This is as true for outlines, which has to fit with both the inner color and the umbrage of the surface.
NB: Obviously, this doesn’t work with any graphic style.
Pillow shading is a nasty effect that occurs when the light source comes from the front.
Avoid pillow shading, unless you really know what you’re doing.
Lines and curves
Perfect line: A line that has a constant vertical and horizontal step.
Perfect curve: A curve made of perfect lines which step always depends on the other parts of the curve.
Dirty line: A line that has at least one sub-segment with more than one adjacent pixel on one end.
As you may have noticed on the pictures above, dirty lines should be avoided. You should use as much perfect lines and curves as possible.
A cluster is a group, a pack of connected pixels with the same color. Cluster shapes will greatly affect the final image. Bony and crude clusters will give a sketchy aspect. Round and straight lines are preferred so you get a precise, smooth and nice image.
Avoid lonely pixels. If one pixel is inside of a different color cluster without any adjacent pixel with the same color, remove it.
Dithering et texturing
Contrary to popular belief, dithering isn’t as great as it seems. A lot of dithering between heavily contrasted colors will often give a dirty and noisy image. It is also a very bad idea to use dithering when animating a sprite, because keeping coherent dithering will be awfully hard.
If you art style lets you do it, use texturing instead (the difference is that texturing does not induce color limitations). But don’t forget, texturing means harder animation and worse clarity. Again, it’s a matter of style. If you want a cartoon-ish look, do not use dithering nor texturing.
Antialiasing a technique that reduces the staircase effect (aliasing) which is clearly visible on two lines between two contrasted surfaces.
There are two use-cases for internal AA : Simply separating two surfaces, and using lines or curves cutting through two different surfaces.
In the first case, you may just need to insert an intermediate color where aliasing is visible to reduce it (generally, when the curve abruptly changes).
In the second case, you may just need to add a small intermediate color cluster between every horizontal or vertical sub-segment. Its size directly depends on the sub-segment size.
External AA suffers from an important restriction, unlike internal AA: The background color in a game will constantly change, so you need to have an effect that looks good on both dark and light backgrounds.
This rule is quite easy: You only apply the effect inside of the sprite. The end of an outline that neighbors with the background should never be modified.
In this image, the internal AA effect applied on the outer part of the sprite unveils some nasty artifacts, while external AA, even if it isn’t as efficient, gives a great effect on any background type.
I wanted to expand a bit on that post with some additional points.
In my first journal I talked a bit about the things I avoid doing when designing characters, but I think I’d like to spend some time & attention on what I *do* focus on.
1. Avoidance of the overly remarkable visual hero syndrome
Now I know that title sounds like I’m once again talking about what I *don’t* do, but listen up; Most people do FINE at designing recognisable party members & protagonists.
And … to me that’s a bit of an issue. It reminds me a lot of playing an old RPG where they reuse the same NPC sprites in every town 5 times and then there’s one character in the town who stands out like a sore thumb, visually. Every time I see that my head just instantly goes: “GEE, I WONDER WHO MIGHT JOIN MY PARTY IN THIS TOWN”. Rather than care about various unique characters that make the town alive, visually those games already tell you “ignore the other stuff, this is the important thing."
These four people are hanging out in the local pub, guess which one joins your party/is the final boss?
Now obviously you can argue "Hey but sometimes important people stand out more!” which is fine, but here’s the thing: When your party member is supposed to be a totally regular villager who just happens to aid you (often the case), or when a village/location is meant to be filled with badass characters … inappropriate visual cues can ruin the illusion.
In the image shown above we’ve got dirt poor villagers & an arrogant isolationist hero who outright avoids hanging out where the regular villagers do. He’d stand out but he should and wants to.
These four random villagers are hanging out in the town square, which of these will give up their regular life to go adventure!?
Uniformity of style & wardrobe is a tool you can use to make it clear a person really was a regular villager until adventure got in their way.
Nobody expects the plain village girl clad in brown rags to step up and save our extravagant hero at the last moment, so it makes her step towards becoming a full fledged hero all the more impressive. She wasn’t someone designed from the ground up to be “miss iconic hero”, she started out wearing scraps and being just like the other villagers.
A GREAT example of this principle in action is the manga/anime Attack on Titan. The forced uniformity surrounding the entire cast combined with an avoidance of absurd haircolours/traits makes the characters feel far less significant and unique. Whenever you see people wearing the same uniform die horrid deaths you feel like it could’ve just as well been one of the characters you love, because everyone’s a redshirt.
Okay that all makes sense, but tons of your characters still have unique larger than life designs, what’s up with that?
Good question with a simple answer: Because the extreme can be taken two ways:
Here’s my comic’s 3 protagonists when compared to equals/peers of sorts.
Noah (line 1) has a strong social uniformity due to him and other students from his story all wearing school outfits. They’re uniform because they have to be.
Tobi (line 2) has what I call a strong cultural uniformity, she’s from an isolated location with minimal outside influence on fashion and wardrobe + strong environmental influences.
Burk (line 3) is hard to pin down because he’s always on the move, aside from arguably camping him in with pseudo-nudists his peers are other hero-like characters like himself. Usually anyone of this status has quite a bit of fame, a lot of travel experience and *a lot* of freedom in choosing how they present themselves. Considering it’s usually not a role taken by people who’d rather not have notice taken of them this leads to more extravagant outfit/colour choices.
The important thing I try to do is have these choices all be possible alongside eachother. Eventhough a character’s role & interests will obviously dictate who they’ll interact with, I never try to lose sight of the fact that every group, no matter how uniform or unique they might present themselves, is still a group compsed of different characters. The visuals simply que us in on how they present themselves.
This brings me to the final point of this particular post, character’s faces. (and to a degree body type/race/etc)
Would you believe me if I told you these were all the same guy?
As I mentioned earlier, changing a character’s clothes can indicate a change of attitude or role. But this does rely heavily on your character being unique enough to have a significant change in style/wardrobe without them turning out near-unrecognisable. And that brings us to an important point: If you give a villager clad in brown clothes a generic face you use over and over … spoilers: people know this character could never ever matter. And this isn’t a matter of actually making every villager significant, it’s a matter of not designing your world to feel centered around a few unique individuals while everyone else feels like a carbon copy extra in a low budget play. (high budget enough to clone identical twins*)
To summarise, these are some weak mooks at the start of Burk’s story. (weak, as in, Burk can take out 5 of them in one punch)
If you asked a reader which one is Norman, they could tell you. Because Norman is allowed to have a recognisable face.
Anyway that’s all.
1. As always, this is just my opinion & some insight into my thought process when designing characters, as I often hear people asking about it. I’m not saying how I do it is the best way/ideal or that other methods are a sin against creativity. Thanks for reading and I hope it helps some people out!
In case you’re unaware of the pixeling technique known as dithering it’s a way to stretch a limited color palette by interlacing 2 separate colors in some sort of pattern for example, a checkerboard to mix two colors together. While it can be used to blend colors, it can create a noisy appearance, and I believe it’s best used sparingly. If you’re a cheaterhighly skilled professional like me you can also fake detail by plopping it on in patches over your sprite.