Pixel Art Outlines Part 2: Using Color

This is part 2 of my Pixel Art Outlines Tutorial. If you haven’t read it yet, you should read that first!

Black outlines in pixel art can be very versatile, but sometimes they’re a bit overpowering or too retro feeling. The solution to this is coloring your outlines, though picking the right colors is very important.

 

The most basic technique is to use an outline that’s a darker shade of the object they’re outlining. For example, this green bush gets a dark green outline:

Pixel Art Outlines Colored Bush

The color can be different on different parts of an object, for example this guys red shirt gets a dark red outline, but his pants get dark blue.

Pixel Art Outlines Multiple Colors Man

This is pretty easy to do on a light colored background, but if you have something darker, or with more variation, you have to be more careful about the colors that you pick.

Maintaining Contrast

The most important part of using colored outlines is maintaining contrast. The point of outlines is to further separate two objects to make it more clear to the viewer that they are separate entities. This means that an outline should always increase contrast, and never decrease it.

Compare this sprite of a red circle with and without an outline for various background colors. Is there more contrast with or without an outline?

Pixel Art Outlines Colored On Different Backgrounds

On the first 3 columns, it’s pretty clear that the outline gives more contrast (the circle is more separated from the background). On the other hand, looking at the last two, it seems to be sharper without the outline.

This means the outline color we selected is not appropriate for those backgrounds. Our option is to either remove the outline (which is really dictated by the style), or we can change the color.

Pixel Art Outlines Colored With Increased Contrast

Here I’ve darkened the second to last so that it sticks out from the background. On the last one, even a dark red blended in too much, so I just made the outline black. This is getting a bit more into palette theory, but it’s my belief that when viewing your pixel art at 1x, you should be able to see the difference between any two colors that touch. They shouldn’t seem to blend into one, and if they do, they’re too close and one should either be changed or removed (or they need to be separated by a darker one, like we’re doing here).

Following this logic, an outline should always be darker than both the object AND the background behind it.

This is pretty easy to accomplish on unshaded objects on solid, light backgrounds, but if you’re doing anything more complex, you’re going to have to make some adjustments.

Outlines On Shaded Sprites

Here’s a little experiment. I started with a shaded sphere, one that has a lot of contrast in it’s shades, and uses a black outline. The sprite already has a big palette, so we should be able to find a color that works for the outline other than black.

Pixel Art Colored Outlines On Shaded Sprites

I tried all 4 different shadow colors. The first one works on the top right where the sprite is lightest, but clearly doesn’t work at on the bottom left where it’s darkest. The second darkest color seems to have the same problem.

The third one works… but now we’re using the darkest color as the outline. This is okay, if it fits the style you’re going for, but if we want an outline everywhere, it seems like the only option is black, right? It’s the only one that has enough contrast around the whole piece.

The solution is what we call Selective Outlining. We’re going to use different colored outlines in different places. Where the sprite is darkest, we’ll use a dark color for the outline, and where it’s lightest we’ll use a lighter color.

Pixel Art Selective Outlining

You can see how the black isn’t overpowering where the shadow is, and the lightest one is just dark enough to still act as an outline on the top right. Essentially what you’re doing is maintaining the amount of contrast between the outline and the object all the way around.

Outlines On Backgrounds

Now the last thing you have to worry about is the background color. The above outline works on our light blue, but now look at it on those darker backgrounds.

Pixel Art Selective Outlining On Darker Backgrounds

You can see on the first background, the lightest outline shade on the top right is already not looking great. In the second background shade, the second color is starting to look bad as well. And in the last one, only the black really works.

You have to take the background color into consideration when using selective outlining. Of course this can be harder in games where the background is always changing. It doesn’t mean you have to use black all the time just in case a dark color appears, but you may want to stick to the darker shades if there’s a lot of darker areas.

Sometimes though, you have no choice but to use a solid black outline, or may do so for stylistic purposes. You can still use selective outlining on internal lines to soften them up.

Pixel Art Internal Selective Outling Only

Internal Lines

The same principals used in selective outlining can be applied to the inner lines of an object. The good part of these is that even in sprites for a game, there’s no background to worry about, so you can go as light as you want.

Pixel Art Selective Outlines Internal

In this example I used the color that is one shade darker in each section. This makes a nice subtle line.

If you want the line to be more prominent, you can use darker shades.

Pixel Art Selective Outlining Internal Thicker Lines

Darker lines visually imply a thicker line. This let’s you imply subtle details that are smaller than one pixel.

If you need a line even thinner than what the lightest color can give you, you can break up the line so that it only appears closer the shadows. This still implies a line is there, but lets the viewers eyes do the work of completing it.

Pixel Art Interal Lines Broken Up

Some internal lines may end where parts of your objects connect. You can fade the line to a lighter color towards the end of it to give it a more gradual feel.

Pixel Art Internal Outlines Color Fade Cloud

Sometimes you’ll be wondering what color to use for internal outlines between two different colors. Generally you’ll use the color of the part that’s closest to the viewer.

Pixel Art Internal Selective Outlining Different Colors Closest To Viewer

Here the red sphere is closer, so we use a red outline.

If one object is noticeably darker than the other though, you may have to use that objects color.

Pixel Art Internal Selective Outlining Different Colors Darkest Object

Here the blue sphere is much darker, so we use a blue outline. This is especially common where the object that’s darker is underneath the other, and is in shadow.

Sometimes the colors will be on the same surface. In that case, you have two options. First you can leave the outline out (even in outline heavy styles you will need to do this sometimes.). Second you can use whichever is darker.

Pixel Art Internal Selective Outlining Different Colors Same Furface

Sometimes you can get the lighter color to look good, but it’s usually a struggle.

Conclusion

Here is a final example, using all of the techniques explained above. I shaded and outlined the girl from part one of the tutorial.

Pixel Art Colored Oultines Girl Example

Of course the shading alone is a huge improvement, but the colored outlines gives it a final touch of detail and makes it look crisp and lively.

I hope you learned something from these tutorials. If you have any questions, corrections, want some feedback, or just want to say hi, feel free to leave a comment here, or send me a tweet on twitter (@skeddles). That’s probably the best place if you want to stay updated, but I try to keep my tumblr and deviantart up to date.

 

Tags:


Comments

  1. Peter Randazzo says:

    35/10 looking forward to the third installment

  2. grateful says:

    You’re a gift, You’re…magnificent

Leave a Comment