menu button

Outline

Black On Blank

All our sprites will have outlines, composed of solid black (rgba(0, 0, 0, 255)) lines with 1 pixel thickness.

They are very useful to clearly mark the boundaries of a sprite.

There are other kinds of outline, but we will not use them.


What?
You are asking, considering a black monster, whether the outline should be black, white or there is no need for outline.

Look. I would never play a game with a black monster.
Too scary for me.

Don't Overrate The Outline

It is easy to overrate the importance of the outline:

- we usually sketch before painting
- to outline is far more simple than to paint, we think that there is no use to go on if we can't do a good outline
- generally, changing the position of a pixel of the outline has more impact than change the color of a pixel of the paint


I took a enlarged sprite of a creature from Tibia. Here is its outline:


Outline Only



Just looking at the outline, can you guess how the creature is?
Take your time.

You can only guess the creature if you already know it.

Later in this chapter I will show the creature without outline (just the inner paint).
And after I will show the complete sprite.

Then you will realize how the paint is really far more important than the outline (at least about the sprites we are studying).

The Outline Is NOT Meant To Be Perfect

The Outline Is NOT Meant To Be Perfect.

This is THE MOST IMPORTANT CONCEPT about outlines that you must learn and keep (and your parents never told you).

An outline is not meant to be perfect because generally there are too few pixels to be used.

I know there are nice outlined sprites (like cof-cof the logo on the header of this page cof-cof).
But they are happy EXCEPTIONS to the rule! Just exceptions.

Of course we will draw the best outline we can.
But we shall not put too much effort on it.
And we shall never despair with imperfections of the outline.


No Outline

Symmetry

Especially when you are drawing creatures, forget symmetry!

Maybe the creature is perfectly symmetrical, but its image is not, because

- its position (while standing or moving)
- the view angle of the beholder (perspective)
- the angle(s) of the light source(s) on the creature


Also, symmetry generally makes the image look flat and less attractive.


Symmetry - Heads

Your Outline Best Friend

Your outline best friend is the tool Thin Pen Tool of BobSprite.


BobSprite Thin Pen Tool



Pen Icon
The red line was made with pen tool with 1 pixel thickness, in just one step.

Thin Pen Icon
The blue line was made with thin pen tool (1 pixel thickness always), also in just one step.

Notice how the red line is rough and dirty and the blue line is clean and precise!
The blue line is ready!

In addition, thin pen tool has a larger memory and allows you to undo and redo, pixel by pixel, your outline.

The Outline Is For Out Lines

You shall not think the sketch and the outline are the same thing.

The sketch is useful to define the shape of the sprite and its parts.

The outline is the wrapper for the sprite shape.

The external lines of the sketch will be matched by the outline.

But the inner lines may disappear because there is no room for them.

Besides this, intense use of inner outlines, makes the sprite look bad most times.


Full Sprite



The sprite above, clearly shows what is the biceps and what is not.
Internal parts of it are delimited by shading or different colors.
And there is no outline marking the biceps!

Anyway, near inner outlines easily result in a messy image.
Especially when they are parallel to each other.
For example, the outline of a curved arm above the outline of a belt.

The Butcher's Gallery

Until you achieve proficiency in game art, save everything, always.

No matter if the outline has just a small good part.
Save it and avoid waste time trying to recreate it in the future.

No matter if the outline is crap.
Save it and use as reference to not repeat it. Really important.

The best way to save is to save everything together: The Butcher's Gallery (sprite sheet).


Butcher's Gallery



How to do this in BobSprite?
You resize the layer Sprite to, say, 1000 x 1000 pixels.
You draw a body part in layer Mask.
You paste (CTRL V) layer Mask on layer Sprite. And so on.

Your Butcher's Gallery will save you a huge amount of unpleasant time.


Reversing a nice left hand produces a nice right hand.

How to reverse an image in BobSprite?
Press H to reverse horizontally.
Press V to reverse vertically.
Press R to rotate 90 degrees.
Press X to mix reverse (a combination of the other ones).
All this operations are done without corrupt (blur) the outline (or any image).


Think about yourself as being Dr. Frankenstein.
The creature you are about to give life is just a collection of connected body parts.

The Outline Nightmare

Sometimes you create outlines that look very nice. Excellent!

Just beware of outline nightmare.

"Finally... something reasonably good!"
"Hum... I can fix that finger."
"Nice! Best finger in the world!"
"Oops. Now the hand looks too small I must fix it."
"Wow! Hand and fingers are pretty good. But the wrist does not fit well anymore."
"All I have to do is enlarge the wrist by 1 pixel, displacing its left side!"
"Nope. The wrist fits well on hand but its outline is messing the body's outline."
"All I need to do is step back and enlarge the wrist by 1 pixel, displacing its right side."
"Hum... no mess with body outline. But its joint with the arm is looking weird."
"I know what I have to do. Just enlarge the arm 1 pixel to the right."
"Ok! So far so good! Oh no! Now the opposite arm looks too small. And also the neck doesn't look right anymore!"

(very shortened version)


Black Monster