Art Blog

[wayfarer]

A attempt at spriting

Everyone seems to just Frankensteining sprites. Now and than I was asked how do I sprite.
To make it short (I hate long Introductions) this is some kind of cook recipe that doesn't replace experience and practise.


Reguirements:
Graphic Program that can handle layers and transparency.
At least the Gimp, Photoshop. Pain.. err I mean 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 digital.


Part 1

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

Shading, color choice,anatomy it is all like music. Everything works together. Wrong anatomy is like a nice voice without rythm.


Small joke taken from Looking for a Group you may forgive me

Normal anatomy is that the legs have 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 too yours, if the anatomy differs too much you have made something wrong.).
That's the Nr 1. reason I use capes I try to laminate this anatomical flaw a bit. Nothing more nothing less.

That doesn't mean that sprites are completly detached from the real world. A akward pose will fall into the eye of the viewer. So stick to the real world and imitade it. Use references!

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




Again not by me lend from a Games Workshop artist if there are any problems with them I'll remove them.


Everyone who has practised martial art will know that this stance is stable. A Good stable position with much room to move.
And the most important thing. They look very dynamic.

I'Ve used this tricks quite successful on my latest sprites.


Let's conclude simulate reality and take references. If you came up an very difficult pose or you have an sprite you can't put your finger on what is wrong. Look for real life pictures or refs from better artists.

I repeat it again take a reference.
You can draw like Dürer you have the knowledge about colors like Da Vinci and you Picture looks like it is just escaped from Picasso's "Guernica". (Sadly all 3 was true for Picasso )

Other links provided by Jetryl:
Books about anatomy quite good and interesting for protrait art. Still the same rules for spriting too, but to a lesser extend.

Human-Anatomy-Made-Amazingly-Easy
Drawing-Cutting-Edge-Anatomy


Ok again blabla.
Next post I pull it all together really. Could this eyes lie.





Part 2

The good thing is I also started the same way like anyone else some cut and past and smaller edits to get something more out of it. One of the good things about me was that I was wonderfull free of any prejudices about spriting like limited color chemes hard edges or that the sprite must look like it is chiseled out of a rock and I was open to try something new. This has leaded to a bit quirky style.

The first it means that he is not always compatible with mainline but well you can't please everyone.
The second I don't claim it is perfect I just like it that way.

In the past I did mostly 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 like Neo seem to be able to draw a sprite just from scratch with a mouse.
I can't that's why did go another way.
Most of the time a make a small sketch of the sprite as small as possible to get an overview how it will look. (Prefered 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 anyways. Smaller flaws aren't that worse 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 get to step 2.

Scaling down the pic. First reduce the used size of the sketch as possible (cutting) than 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 comes. The Shading.

There a different way to get to this stage I prefer this one at the moment in the past I filled some areas with colors and erased the edges until I got the shapes right (a little bit like carving). Occasional I do it again 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 it is called development).
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.
click
I know I keep repeating it is always helpful to have a kind of reference.

Note:

If you are good enough you can also sprite it in original size and draw it easily freehand (the other ways aren't that straight forward, they should just make the process a bit easier .).
If you do this than you have 2 possibilities.

If I use a brush for the base shape. I got the advantage that I can create the base without much erasing (at the beginning) and it comes very natural to me but in the end I must hunt down dozen translucent pixels.

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

I can do this too though it is just a matter of practice. Again there is no "the 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 took me half an hour. Still improvable but it should illustrate what I mean.


Part 3

Ok if I start with shading first a small excourse 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.

Fact is colors can be ordered in a circle



(Thanks to Wikipedia of a deeper analysis click althoug the German site is better those who can read it you should do it click)

So there are 7 different kind of contrasts I'll try to mention them all a bit.


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 an eye-catcher but be carefull it can make the sprite quite noisy.

The second dark and light. A good example is my Avatar. 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 only rarely.

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

Simultan contrast - successive contrast
Well now it gets interesting I don't know how Neo does it but he exactly uses it to create his shading.

He lays pixels in different colors next to each other so they boost each other. I rarely can reproduce it but well there are still the 2 other contrasts I use and love.

The Quantity and Quality contrasts .
Drum rolls please.

No serious some big words for nothing but in fact the first is easy Quantity means for example a big picture 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.
click me

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 with my

This are the tools that an artist can use to make his art well 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.

If you are not half asleep yet or run away.
In my next post there will be a little bit more action and a little bit less conversation.

Further external links kindly provided by jacobolus. For a bit deeper overview.
color theory
color theory again
and again

Though this gets more interesting for portrait art.

Part 4

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 how 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 than 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.

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 must do it anyways because I can't work until I get a feeling how the finished sprite will look. (Everyone has his own small quirk):roll:

Anyways if you got the shape right you should apply basic shading. This consists at least out of 3 different shades of the colour. With these colours you start modelizing the highlights, the shadows and on textures 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.
Anyways I added the hair and more details until I reached the state 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 him various times to see where he fits best).
This has 2 reasons. First it saves you time and makes it easier to animate the whole thing. Second if you don't like it you mustn't start and erase half of the sprite and redraw it. Btw I learned this the hard way too.


5. Actual doesn't look bad doesn't it? (At point for 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 this tools.

(Available at the gimp and Photoshop, you should test out the different settings to see which one fits you the most)

This tools are not essential the just make it easier. You can emulate the effect with careful chosen brush strokes. If you you don't have brushes well sucks to be you.
Serious you can emulate it with careful chosen pencil dots.This goes much too far for me personal.

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 this 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 metall, 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. Ambience light is a light source that adds different light values onto a surface to make it more interesting. Ambience light without prober shading doesn't work but it goes the other way around too. A sprite without prober ambience light looks dull.

Before and after


I probably went over board with the detailing in the process but magnified you loose quickly the overview that's why should keep an window open with the sprite in 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. I don't really like it because I loose control how the colours of the unit will work together with TC this 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, actual too often). I changed it various times until I found the right position for it and pink fits to nothing.

This basicly 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 too avoid the straight lines). Basicly everyone develops his own way which is the easiest for him. And no there is not the one and only way just various paths.

Further links:
light and reflection

Part 5

Don't do. (I tell you)

-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 against it).
(An doctrin of first greek sculptor was that the statue can be rolled down a hill without any damage. Don't do 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 to emulate some anime stuff you have recently seen. No 2m long blade on a guy that would fall over after a light price. (Who does this eats little babies too)
-Don't separate the different parts of a sprite with a 1 pixel wide line. "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 to different color areas from each other it looks ugly
-Don't overreact on critic. Everyone makes mistake and the one on the other side of the monitor mustn't be always right.


Do
-Monochromatic can work if the contrasts are high enough
-Moved stuff , wind as another artistical tool
-Use optical illusion 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 no backwards is not the right direction
-Do the good taste a favour and avoid a color overload. Aka Rainbow warrior (You can use many colors but stick to some mayor colors and add the other colors in a limited amount)
-Exagerate 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. Let it rest take the pencil and add some straight line 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 stitchery)
-smoth 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 critic. Actual learn to critic 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)?



To close it with one of my favorite philosopher.
"I know that I know nothing. You pay for a round? A double one for me!"

[turin]

Very nice.

In the past I did mostly some Frankensteining to get the proportions right and the overall shape of the sprite until it looked like I wanted it.

Yeah, this is where I am right now. My eventual products usually have few if any pixels that haven't been altered by me in some way, but they are essentially frankensteins... I would like to see how you guys do it from scratch.

[wayfarer]

...

[Redeth]

This is interesting, keep it coming.

[Sabata]

Hmm... the secret recipe.

We use almost the same way... I just need to practice more.
This is very useful.

[Boucman]

could some one adapt this post for the wiki, before it runs away

[Darth Fool]

Very cool tutorial. I look forward to the rest.

[Iris]

Useful indeed. Really useful. Should go to the wiki (or has it already?)

[wayfarer]

...

[Shadow]

...

[jacobolus]

You post is a reasonable start to a "color theory" education.

Unfortunately though, the Wikipedia "color theory" article is rather deficient. The color circle picture you show is not nearly as useful as it could be, because it obscures the most fundamental perceptual contrast between those colors: value contrast. Additionally, its hues aren't uniformly spaced (from a perceptual perspective); it's more useful to think of colors in a color space like http://en.wikipedia.org/wiki/Munsell or L*a*b* or similar. The idea that there are "7 types of contrasts" is completely arbitrary, and a rather silly limitation; the human eye and brain excel at finding patterns, so pretty much any change from one region to another will be noticed as a "type of contrast."

For a rather long, but quite good IMO, explanation of the importance of value contrast, see http://handprint.com/HP/WCL/color11.html

And for more information than you'll ever want to read about color vision, color science, painting (particularly discussions of watercolor pigments, etc.), and color theory, check out the whole site: http://handprint.com/HP/WCL/wcolor.html -- It has pretty good explanations of all of those effects (simultaneous contrast, differences between warm & cool colors, why dark orange is called "brown", etc. etc.)

[Shadow]

Thanks I'll try to work it in too. Well most of us are autodidact and for spriting a shorter outline ahould be enough .

Portraits are another area though.

[wayfarer]

...

[Blarumyrran]

felt like copying your style.

[Urs]

Posing has been the most difficult thing for me so far - thanks.

So, how am I doing "imitating your style"? (See art workshop)


BTW, what is that cartoon strip? The one that took over your avatar?