Drawing the Line: the Outlines


The Right Tool


Aliased vs Anti-Aliased
The difference between aliased and anti-aliased lines

Anti-aliasing is what makes a digital image look smooth. It automatically generates partially-transparent pixels which give the illusion of a smooth line. If you zoom in on such a line, you’ll start to see the individual pixels – often in many, many different colours.
You never want to use automatic anti-aliasing in pixel art. If you’re going to anti-alias at all, you’ll have to do it manually – a technique more advanced than this article will cover.

Make sure not only your drawing tool is single-pixel; make sure your eraser is, as well! You can make it a larger size for erasing bigger areas, but it always needs to be aliased, not anti-aliased.

Straight lines

Let’s revisit the definition of pixel art for a moment: an artwork in which every single pixel was placed with an express purpose in mind. Knowing that, it follows that making pixel line is more than simply clicking the mouse and dragging it. Every single pixel in that line has been thought about, and there is a reason why it’s right there and not one pixel to the left or right or top or bottom.

That isn’t to say that you can’t click and drag at all; you just have to have put thought into every part of the line. Why is it that long? Why does it start there and end over there? Wouldn’t it be better to have a curve here instead of a straight line?

Sprite outlines - Straight pixel line patterns
The basic straight pixel line patterns

And since we’re working with tiny pixel dots, you’ll want to zoom in on your canvas. Not so far that you can’t see more of what you’re working on, but far enough that you can comfortably work with single pixels. There’s no set amount for this, so find what works for you.

Now, what makes a straight pixel line look straight? The answer to that is a repeating, steady pattern. A completely straight horizontal line is a pattern of single pixels, repeated horizontally. A vertical line is the same but, of course, vertical.
Those are the most basic ones. One step more advanced is the 45° angle straight line. You have the same single pixels, but instead of being next to each other horizontally or vertically, they’re placed diagonally; from bottom left to top right, or bottom right to top left, or vice versa.

Sprite outlines - Straight pixel line pattern 2
Straight pixel lines with a different pattern

Those are all the straight-line options using only single-pixel patterns. To get different angles, you use patterns of 2 pixels, 3 pixels, 4 pixels… however many you need to get the correct angle. Of course the larger the pattern, the harder it is to apply to a small area.

Sometimes, however, using such a pattern still doesn’t give you the line in the right angle. In these cases, it is usually best to slightly alter your image so you can use the clean pattern. But in cases where the line is long enough to still show the pattern as an actual pattern, it may be possible to have a line following a rhythm of 1 pixel-2 pixels-1 pixel-2 pixels etc. (or 2-3, or 1-4, or whatever is needed for the line – the point is that it should still be a steady, repeating pattern). In the end, it needs to look like a straight line when zoomed out. So if your straight outlines look good zoomed out, you can probably get away with it. Careful though; this pattern quickly looks very messy.

Curved lines

Of course, only very few outlines consist of only straight lines. In order to make an interesting piece, you’re going to need curves.

To study curves, we’ll start by looking at circles.

Sprite outlines - basic circle patterns
The basic circle pattern

Carefully look at one quarter of the circles and think about what you’re seeing. Count the pixels: once again it’s all about patterns, but this time it’s not a repeating pattern; it’s an increasing or decreasing one. If you start at the top straight line and end at the rightmost straight line, the pattern of pixels goes 5-3-2-1-1-1-2-3-5. The next one is 4-2-1-2-4. See the pattern?
The ‘top’ (which repeats four times, once on each side of the circle) is the largest straight line, followed by one which is half of the top (rounded up or down depending on what looks best in the given situation), followed again by half of that line until you get to several single pixels. The larger the circle, the more sections of straight lines and single pixels you will have. The question is, how many sections and single pixels should there be?

Sprite outlines - bad circle
Following the circle pattern with too many single pixels results in a different shape

Well, there’s no one true answer to that. As with the straight lines, it needs to look like a circle or curve when zoomed out. If you accomplish that, you’re doing it right. The image to the right is an example of following the pattern but not getting a circle. The single pixels are forming a straight line instead of a circle, breaking the illusion.

Not every curved line is a circle, of course. But each curved line can be imagined to be part of a circle; sometimes a really large one, but it should always be possible to imagine the circle. By attaching different curves and straight lines to each other, you can create anything. To revisit the not-circle mentioned in the previous paragraph: instead of being one curved line, it’s four straight lines connecting four curved lines, creating an interesting shape. Just because it’s not a circle, doesn’t mean it isn’t a useful or interesting shape in its own right!

Crossing lines

Sprite outlines - crossing lines
They look very similar, but the one to the right looks ever so slightly cleaner

The general rule for outlines is to keep your lines clean and separated. But to create an interesting piece, you’re going to have to make lines which cross other lines or touch on to them.

So, how do you deal with this? There’s only one really correct answer to this: by looking at the bigger picture. Since you’re working on a very small canvas, your goal is to represent something with as few pixels as possible. One pixel placed differently can make all the difference. Two touching lines can create an effect you’re not going for, in which case you should move one of the two lines.

Clean lines vs. messy lines

Now that you know the basics of pixel lines, there is one more very important thing left to discuss before we get to making the outlines from a sketch. We need to look at the difference between clean lines, and messy ones.

Clean pixel art lines are 1 pixel thick everywhere. No part of the line is more than a single pixel thick. Compare the three pictures below:

Sprite outlines - clean, messy, very messy
Clean – messy – very messy

The left is clean, while the middle is messy, and the right is extremely messy. Do you see the difference? If you’re having trouble, the below image has all the messy pixels highlighted in red:

Sprite outlines - clean, messy, very messy highlighted
The same lines with the messy pixels highlighted in red

Always aim for clean lines!


Remember that the above applies to the most general pixel art style. A cartoony style sometimes used on larger pixel art pieces can greatly benefit from thicker lines which simulate the effect of an ink pen. But even those benefit from keeping things as clean as possible; clear patterns in the lines can make a big difference. So while I highly recommend sticking with the basics to start off with, you might want to keep this footnote in mind for future art experiments.

Applying outlines to a sketch

If you haven’t practised all of the above, take a moment to do so now. See it as a bit of a warm-up for the outlines on our sketch.

Sprite-ready sketch

Done? Good! Now grab your resized sketch from the previous lesson! If you don’t have one, feel free to use my fox sketch to the right. Next grab that 1-pixel pencil tool, and zoom in on the sketch until you are at a comfortable zoom level.

There is no set rule for where to start lining a sketch; it’s completely up to you. I usually start with a large line, like the fox’s back in this case. It provides me with a bit of an anchor. Then I move on to other larger lines, and I finish with the details.

Sprite outlines - core
A fragment of the fox sketch showing the core of a line

Now it’s easy to tell you to put the first pixels where you see the lines on the sketch; in practice it’s not that easy though. The sketched lines aren’t clean pixel lines; they’re blurry and wider than a pixel line should be. So which pixels do you trace, and which do you leave alone?
When looking at the sketch lines, some of the pixels are darker than others. The darker ones are the ‘core’ of the line. These are generally the ones you want to turn into a pixel line. However, always keep the basics in mind! If you have to go outside the sketch line or ignore a core pixel in favour of a lighter one to make the outlines look good, then so be it. It’s all about that end result.

Smaller, more detailed areas can be very difficult. The face of my fox is a good example; those are a lot of pixels in a very small area. Here you can choose to leave certain details off in favour of the overall image (you can always bring the effect of the line back when you get to colouring or shading), or you can line them with a different colour. Both are completely valid and reasonable approaches; it’s completely up to you!

Sprite outlines - progress
A progress gif of lining the fox sketch

When you’ve finished your sprite outlines, remove the sketch. You might think you’re done now, but that’s not quite the case. Carefully scrutinise every part of the piece and how it fits in the whole. Move any pixels which need moving, clean up lines which ended up messy, fix any flaws you see. Then flip the whole thing so you can get a fresh look at it, and clean it up some more – you’ll be surprised at how much you see when it’s suddenly facing the other way!

Once you’re completely satisfied with it, your outlines are finished. Congratulations! Now don’t forget to save all your hard work. As Pixel Sensei says: work which is lost may as well not have been done at all!

Sprite outlines final result
My final result

Picture credits:

All images made by Rhynn

About Rhynn

Bookmark the permalink.

Leave a comment