Creating a scratch built sprite

Intro: An attempt at spriting

by Wayfarer

Everyone seems to just "Frankenstein" sprites (ie. cobble them together from pieces of existing sprites). Now and then I'm asked how I create sprites from scratch. To make it short (I hate long introductions) this is a kind of recipe, but it doesn't replace experience and practise.

Reguirements: Graphic Program that can handle layers and transparency. At least The GIMP, Photoshop. Pain.. err I mean MS Paint if you want to suffer and you will.

At least advanced knowledge about spriting. Sadly nothing for the beginner, sorry. You should have at least pushed some stuff around digitally.

Anatomy

OK after a while in the forums I realised that I missed one important point. Anatomy!

Shading, color choice, anatomy - it is all like music. Everything works together. Otherwise good art with wrong anatomy is like a nice voice with no rhythm.

Normal human anatomy is that legs are half the size of the whole body. In Wesnoth the legs are a bit shorter and the head slightly too big (That doesn't mean you can make it even worse - take another sprite and compare it to yours. If the anatomy differs too much you have made something wrong.). That's the No. 1 reason I use capes - I try to disguise this anatomical flaw a bit. Nothing more nothing less.

That doesn't mean that sprites are completely detached from the real world. An awkward pose will fall into the eye of the viewer. So stick to the real world and imitate it. Use references!

In Wesnoth you'll probably mostly sprite warriors. You should note that most martial arts build on a firm stance. That means your sprite should show this. Stretched Legs and not a guy that almost falls over or stands to attention. That doesn't mean that he doesn't look dynamic, far from it. Here are some good examples:

Note: Not done by me, linked from a Games Workshop artist. If there are any problems with them I'll remove them.

Everyone who has practised martial arts will know that this stance is stable - a good stable position with much room to move. And the most important thing : it looks very dynamic.

I've used this trick quite successful on my latest sprites.

Let's conclude: simulate reality and take references. If you came up with a very difficult pose or you you can't put your finger on what's wrong with your sprite, look for real life pictures or refs from better artists.

I repeat it again: take a reference. You can draw like Dürer, have Da Vinci's knowledge of colors your Picture still look like it has just escaped from Picasso's "Guernica". (Sadly all 3 were true for Picasso :( )

Other links provided by Jetryl: Books about anatomy quite good and interesting for portrait art. The same rules apply to spriting too, but to a lesser extent.

[1]Human-Anatomy-Made-Amazingly-Easy

[2]Drawing-Cutting-Edge-Anatomy

Creating the base

I started the same way as anyone else, creating sprites from cut and paste and smaller edits. But I was wonderfully free of any prejudices towards spriting like limited color schemes, hard edges or that the sprite must look like it is chiseled out of a rock. I was open to try something new and this has leaded to a bit quirky style.

Firstly, this means my art isn't always compatible with mainline but, well, you can't please everyone. Secondly, I don't claim it is perfect - I just like it that way.

In the past I mostly did some Frankensteining to get the proportions right and the overall shape of the sprite until it looked like I wanted it. This is time consuming and actual very limiting. Some artists like Neo seem to be able to draw a sprite just from scratch with a mouse. I can't that's why I went another way. Most of the time I make a small sketch of the sprite as small as possible to get an overview of how it will look. (Preferred 200 x 200 pixels)

Some experience with drawing is definitely helpful. The general anatomy isn't that important because Wesnoth sprites aren't that exact with anatomy anyway. Smaller flaws aren't too bad because they can be eliminated later with the coloring. The most important thing is to get the shape right and the look you want to achieve. If you are happy with your first draft you can go to step 2.

Scaling down the pic. First crop the unused part of the sketch as possible then reduce the height or width (the one which is bigger) to 72 pixels.(cubic algorithm). The result should be something like this.

Next you should make another layer and lay some color under the lines (the flats)

As you can see it doesn't look very impressive but that is just the beginning. The most difficult part still awaits - the shading.

There's a different way to get to this stage that I used to prefer. In the past I filled some areas with colors and erased the edges until I got the shapes right (a little bit like carving). Occasionally I still use this technique for capes and other big flooding objects that should look random. As I said that's my current way and it might not the best but it works for me at the moment (Yeah I'm still developing). Experiment with it and find out what suits you the best.

Another example:

That's the original size. Cutting it down to the final size.

I used the same techniques for this one as described and it is actual inspired from a older drawing I did. [3]Reference picture

I know I keep repeating: it is always helpful to have a kind of reference.

If you are good enough you can also sprite it in original size and draw it easily freehand (the other ways aren't that straightforward, they should just make the process a bit easier). If you do this then you have 2 possibilities. If I use a brush for the base shape I have the advantage that I can create the base without much erasing (at the beginning) and it comes very natural to me. Unfortunately, in the end I must hunt down dozen translucent pixels.

Pencil is a bit harder but I can avoid those artefacts that the brush causes. It boils down to personal taste.

I can do this too though it is just a matter of practice. Again there is no "one and only way". I can just show some possible ways. In the end it is just a question how much time you want to devote.

Example:

A quick hack that took me half an hour with the help of the reference. Still improvable but it should illustrate what I want to say.

Color

Okay, if I start with shading first a small course in color theory. This is more important for portraits but it can also be used for sprites.

The contrasts and color theory. I know what you think.

The fact is, colors can be ordered in a circle.

(Thanks to Wikipedia for a deeper analysis Color theory

although the German site is better - those who can read it should do so Kontraste)

So there are 7 different kind of contrasts I'll try to at least briefly cover all of them.

The first is the complementary contrast . If you look at the circle, orange lies opposite to blue. That means both colors painted next to each other will create a strong contrast. It's an eye-catcher but be careful as it can make the sprite quite noisy.

The second dark and light. A good example is missing, I'll add one later. Many dark areas and only some brighter areas.

Cold Warm contrast People find orange and red as "warm" while they associate blue with "cold" this can be used too but should be used sparingly.

Color contrast or how is it called well Bogus for us we use colors. Example

Simultaneous contrast - successive contrast Well now it gets interesting. Neo uses this from time to time to add more depth to his shading.

He lays pixels in different colors next to each other so they boost each other. For example on normally white highlights bright blue or green. Surrounded by other colors.

The Quantity and Quality contrasts. Drum roll, please.

No, seriously - some big words, but in fact the first is easy. Quantity means, for example, that a big picture is mostly green and with some small red areas. They will fall in the eye of the watcher. The next one is the most important. Lucent pastel colors (mostly mixed with white) next to blunt and dark colors (grey and black mixed in).

A good example is this painting of my favorite artist.

To conclude I use mostly Quantity and Quality contrasts and dark and light contrasts. I'll show soon how I put them on a sprite.

I've now probably chased away all my readers.

But these are the tools that an artist can use to make his art good art. It's not like I say "well now I use Cold Warm contrast". I experiment until I think it looks right. It is just helpful to know the tools you have at hand.

Further external links kindly provided by jacobolus. For a bit deeper overview.

[4]color theory

[5]color theory again

[6]and again

Though this gets more interesting for portrait art.

Detailing

In 25 inconvenient steps to a scratch build sprite. Only $5, a bargain price soon in your library.

Just kidding.

1. I did pretty much know what the sprite should look like. For example I can take a ref picture and I can produce a basic sprite out of it. It gets harder if I don't actual know what I want. In that cast I can waste hours on it. (That means a good ref picture is priceless, even a quick sketch you made for yourself helps). It helps immensely if you already know what you want. I use different approaches to create my sprites. Sometimes I fill large areas with color and erase the parts that look wrong. Sometimes I make a small sketch (as described in part 2). Mostly I just mix it. Like here. (The different sprite at the end is just there for size comparison purposes).

I should note that I normally Frankenstein some parts to speed up the process. I mustn't draw a new face just because they look all very different from each other. In this case it is completely from scratch.

(Other example partly with Frankensteining to show how short you can cut it)

That means I'm not against Frankensteining - it just limits the possibilities. Nothing more nothing less.

As you can see I struggled from 1 till 2 to get the shape right. Normally you mustn't start to make the basic shading until the shape is right. I do it anyway because I can't work until I get a feeling how the finished sprite will look. (Everyone has his own small quirks)

Anyway, once you have the shape right you should apply basic shading. This consists of at least 3 different shades of the colour. With these colours you start molding the highlights, the shadows and the textures on the folds. As you can see here in big.

Dark areas with darker colours. Exposed positions, uprisings with bright colours.

As the cretin I am I can't count to 5 - I've forgotten to add 3. Anyway, I added the hair and more details until I reached stage 5.

This is nothing too fancy. The only thing I can say about it: keep everything that covers the body in different layers. In my case the book and the staff (I have switched them various times to see where they fit best). This is for 2 reasons. Firstly, it saves you time and makes it easier to animate the whole thing. Secondly, if you don't like it you don't have to erase half of the sprite and redraw it. BTW I learned this the hard way too.

5. Actually, doesn't look bad does it? (At point four I added some green to the white highlights to let them stand out a bit, like Neorice does.) If you are good you can work further with a pencil tool and further shades. If you want it different, well: First I use these tools: sponge, dodge and burn.

(Dodge and burn are available in both The GIMP and Photoshop - sponge is only available in Photoshop). You should test out the different settings to see which one fits you the most).

These tools are not essential - they just make it easier. You can emulate the effect with carefully chosen brush strokes. If you don't have brushes, well, sucks to be you. ;) Seriously, you can emulate it with careful chosen pencil dots. This goes much too far for me, personally.

Basically tools that adjust the brightness and contrast. In the first round I add darker areas. I deepen the shadows or add further ones. Than I make the highlights brighter. I use these tools on large areas to get a nice smooth transition between the different areas.

Before and after

Than I work on the finer shadings with a pencil with low opacity and fading out. I add reflections and make the shadows smoother in the process. Mostly with white and black, sometimes with other colours. Because the reflection of light is not always white and not every shadow is just black. Again real life gives nice sources of inspiration. (Golden reflections on blue textures. Red on polished metal, etc... use your imagination)

A big note though!!! Shading <> ambience light. Many seem to misunderstand it. Shading means that you model the surface. You add folds to cloths, waves to hair and surface to faces. You make the sprite dimensional. Ambient light is a light source that adds different light values onto a surface to make it more interesting. Ambient light without proper shading doesn't work but it goes the other way around too. A sprite without prober ambient light looks dull.

Before and after

I probably went overboard with the detailing in the process but magnified you quickly lose the overview. That's why you should keep a window open displaying the sprite at original size. Test the sprites very often against in-game background. Else you might get evil surprises.

To conclude: -Shaded surface. -Worked out details -defined light source,ambient light -smooth transitions avoiding the "comic" effect(areas separated by lines, you know those cheap comics in newspapers)

Another thing is TC (Team colouring). I don't really like it because I lose control of how the colours of the unit will work together with TC. That, and the fact that I can't just paint it the way I do the rest of the sprite. This means you keep it best in a separate layer too (also, if your brush slips it won't work anymore happened to me too, actually far too often). I changed it various times until I found the right position for it and pink fits to nothing.

This is basically one way, but there are various variations of it. (For example brushing larger areas of the cape, which is a bit more trickier, because you add the folds on the fly with a brush and you'll need a calm hand to avoid the straight lines). Basically, everyone develops their own way which is the easiest for them. And no, there is not the one and only way - just various paths. :)

Further links:

[7]light and reflection

Internal links:

[8] How to Shade

[9] How to Anti-Alias Sprite Art

[10] Team Color Shifting

Conclusion

Don't do. (I tell you)

• Use rough edges. Straight lines are evil. 90°, 45° degrees too.
• Symmetry is boring, a symmetric face stands for beauty but still boring.
• Avoid the "chiseled out of a rock" look (moved cape stretched stance,.. etc help avoid that).

(A doctrine of the first greek sculptor was that the statue can be rolled down a hill without any damage. Don't make the same mistake)

• You like dark colors, fine. But make sure you have enough highlights in it, so the unit doesn't looks washed out or boring.
• Don't expect details which are 2*2 to be seen. Only if the viewers second name is "Hawk Eye".
• Don't start with a highly complex project and give up frustrated in the middle of it
• Don't start emulating some anime stuff you have seen. Anime exaggerates too much and breaks every physical law.
• Don't separate the different parts of a sprite with a 1 pixel wide line ie. the "comic" effect. Don't do it. If you must, let it look like a shadow a 2 or 3 pixel wide line of darker shades. Play around but avoid this 1 pixel line because the line will have a high contrast to the other color areas and if it separates two different color areas from each other it looks ugly.
• Don't overreact to critiques. Everyone makes mistake and the one on the other side of the monitor isn't be always right.

Do

• Monochromatic can work if the contrasts are high enough.
• Show stuff moving - use wind as another artistic tool.
• Use optical illusions. If you can draw a face with 4*4 pixels fine but no one will see it. Hint it.
• Choose one light source and stick to it.
• Small steps if you are a beginner but steps and not backwards is not the right direction.
• Do good taste a favour and avoid color overload. aka Rainbow warrior (You can use many colors but stick to some major colors and add the other colors in a limited amount).
• Exaggerate slightly if it helps to communicate the message.
• Realism is good. Try to stick to it but not so much that it would hinder you.
• If you paint a unit take a break from the brush tool and use the pencil and add some straight lines, especially on the edges of capes to break up the shading. It can add some very nice contrast. Use it with care. (On texture it looks like embroidery)
• Use smooth transitions between the different parts of the sprite.
• If you need the space take it. You won't achieve anything with 2*2 pixels
• Accept critique. Actual learn to critique yourself.
• Experiment. Try something new.
• Save often. Look often at the real size. Look at it ingame.
• Put it away and make a new start after some sleep.
• Keep copies of various development stages. Once you made a mistake you can still give the whole thing a new direction.

So Questions anyone? Suggestions? Random praises? Flames? (Warning: I flame back). So feedback can be posted in the forum in the appreciate topic. I'll try to work the feedback in. [11]

To close it with one of my favorite philosophers:

I know that I know nothing. You pay for a round? A double one for me!

Note I'll try to replace the example pics with something under GPL to avoid any trouble. At the moment I haven't much better stuff.