Difference between revisions of "Creating a scratch built sprite"

From The Battle for Wesnoth Wiki
(Part 2)
m (Link forwards to archive.org - Testing)
 
(33 intermediate revisions by 4 users not shown)
Line 1: Line 1:
== A attempt at spriting==  
+
== Intro: An attempt at spriting==  
 +
by [[user:Wayfarer alias Shadow|Wayfarer]]
  
Everyone seems to just Frankensteining sprites. Now and than I was asked how do I sprite.
+
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 some kind of cook recipe that doesn't replace experience and practise.
+
To make it short (I hate long introductions) this is a kind of recipe, but it doesn't replace experience and practise.
  
  
''Reguirements:''
+
'''Reguirements:'''
 
Graphic Program that can handle layers and transparency.
 
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 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 digital.
+
At least advanced knowledge about spriting. Sadly nothing for the beginner, sorry.  You should have at least pushed some stuff around digitally.
  
==Part 1==
+
==Anatomy==
  
OK after a while in the forums I must realize that I missed one important point. 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. Wrong anatomy is like a nice voice without rythm.
+
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.
  
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 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!
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 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:
  
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
 
  
 +
https://web.archive.org/web/20120428160215im_/http://img525.imageshack.us/img525/3856/13tt0.jpg
 +
https://web.archive.org/web/20120427094501im_/http://img515.imageshack.us/img515/5781/11ck5.jpg
  
http://img525.imageshack.us/img525/3856/13tt0.jpg
+
Note: Not done by me, linked from a Games Workshop artist. If there are any problems with them I'll remove them.
http://img515.imageshack.us/img515/5781/11ck5.jpg
 
  
Not done by me, lend 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.
  
Everyone who has practised martial art will know that this stance is stable. A Good stable position with much room to move.  
+
I've used this trick quite successful on my latest sprites.
And the most important thing. They look very dynamic.
+
https://web.archive.org/web/20120429005249im_/http://img248.imageshack.us/img248/7881/greatbowv2cg7.png
  
I've used this tricks 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.
http://img248.imageshack.us/img248/7881/greatbowv2cg7.png http://img206.imageshack.us/img206/6696/slayerv14dl5.png
 
  
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,  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 :( )
  
I repeat it again take a reference.
+
Other links provided by Jetryl:
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 :( )
+
Books about anatomy quite good and interesting for portrait art. The same rules apply to spriting too, but to a lesser extent.
 +
 
 +
[http://www.amazon.com/Human-Anatomy-Made-Amazingly-Easy/dp/0823024970/ref=sr_1_1/002-1709014-5120035?ie=UTF8&s=books&qid=1189548452&sr=8-1]Human-Anatomy-Made-Amazingly-Easy
  
Other links provided by Jetryl:
+
[http://www.amazon.com/Drawing-Cutting-Edge-Anatomy-Reference/dp/0823023982/ref=pd_bxgy_b_img_b/002-1709014-5120035?ie=UTF8&qid=1189548452&sr=8-1]Drawing-Cutting-Edge-Anatomy
Books about anatomy quite good and interesting for protrait art. Still the same rules for spriting too, but to a lesser extend.
 
  
http://www.amazon.com/Human-Anatomy-Made-Amazingly-Easy/dp/0823024970/ref=sr_1_1/002-1709014-5120035?ie=UTF8&s=books&qid=1189548452&sr=8-1]Human-Anatomy-Made-Amazingly-Easy
+
==Creating the base==
http://www.amazon.com/Drawing-Cutting-Edge-Anatomy-Reference/dp/0823023982/ref=pd_bxgy_b_img_b/002-1709014-5120035?ie=UTF8&qid=1189548452&sr=8-1]Drawing-Cutting-Edge-Anatomy
 
  
==Part 2==
+
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.
  
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.
+
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.
  
The first it means that he is not always compatible with mainline but well you can't please everyone.
+
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 [[user:Neoriceisgood|Neo]]  seem to be able to draw a sprite just from scratch with a mouse.
The second I don't claim it is perfect I just like it that way.
+
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)
  
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)
 
 
http://img530.imageshack.us/img530/1092/wayfarerlinesdz6.png
 
http://img530.imageshack.us/img530/1092/wayfarerlinesdz6.png
  
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.
+
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 get to step 2.
+
If you are happy with your first draft you can go 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).
+
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.
 
The result should be something like this.
http://img440.imageshack.us/img440/9718/linessmallax0.png
+
https://web.archive.org/web/20120420080330/http://img440.imageshack.us/img440/9718/linessmallax0.png
  
 
Next you should make another layer and lay some color under the lines (the flats)
 
Next you should make another layer and lay some color under the lines (the flats)
http://img530.imageshack.us/img530/9875/linesflatqm2.png
+
https://web.archive.org/web/20120407101807/http://img530.imageshack.us/img530/9875/linesflatqm2.png
  
As you can see it doesn't look very impressive but that is just the beginning. The most difficult part still comes. The Shading.
+
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 a different way to get to this stage I prefered this, 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.
+
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 it is called development).
+
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.
 
Experiment with it and find out what suits you the best.
  
 
Another example:
 
Another example:
http://img240.imageshack.us/img240/8829/exebigrz7.png
+
https://web.archive.org/web/20120318073347/http://img240.imageshack.us/img240/8829/exebigrz7.png
  
 
That's the original size.
 
That's the original size.
 
http://img530.imageshack.us/img530/1526/aragmagefemalese1.png
 
http://img530.imageshack.us/img530/1526/aragmagefemalese1.png
 
Cutting it down to the final size.
 
Cutting it down to the final size.
http://img240.imageshack.us/img240/3233/finalzc6.png
+
https://web.archive.org/web/20120318073351/http://img240.imageshack.us/img240/3233/finalzc6.png
  
 
I used the same techniques for this one as described and it is actual inspired from a older drawing I did.
 
I used the same techniques for this one as described and it is actual inspired from a older drawing I did.
http://fc04.deviantart.com/fs12/i/2006/306/b/5/The_Weight_by_wayfarerpg.png]click
+
[http://fc04.deviantart.com/fs12/i/2006/306/b/5/The_Weight_by_wayfarerpg.png]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 straight forward, they should just make the process a bit easier .).
+
I know I keep repeating: it is always helpful to have a kind of reference.
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 pencilIt boils down to personal taste.
+
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 meUnfortunately, 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 "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:''
+
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:'''
  
http://img229.imageshack.us/img229/6884/sorceressqi5.jpg
 
http://img409.imageshack.us/img409/1928/66863960kd6.png http://img409.imageshack.us/img409/8412/99517190fk9.png http://img248.imageshack.us/img248/2695/14990273go2.png
 
A quick hack took me half an hour with the help of the reference. Still improvable but it should illustrate what I want to say.
 
  
 +
https://web.archive.org/web/20120421164552/http://img229.imageshack.us/img229/6884/sorceressqi5.jpg
 +
http://img409.imageshack.us/img409/1928/66863960kd6.png http://img409.imageshack.us/img409/8412/99517190fk9.png https://web.archive.org/web/20120429005243/http://img248.imageshack.us/img248/2695/14990273go2.png
  
==Part 3==
+
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.
  
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
+
==Color==
  
The contrasts and color theory. I know what you think. [img]http://www.adipositasgemeinschaft.de/forum/images/smilies1/blah2.gif[/img]
+
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.
  
Fact is colors can be ordered in a circle
+
The contrasts and color theory. I know what you think.
  
[img]http://upload.wikimedia.org/wikipedia/commons/8/88/Farbkreis_Itten_1961.png[/img]
+
The fact is, colors can be ordered in a circle.
  
(Thanks to Wikipedia of a deeper analysis [url=http://en.wikipedia.org/wiki/Color_theory]click[/url] althoug the German  site is better those who can read it you should do it [url=http://de.wikipedia.org/wiki/Simultankontrast#Simultankontrast_-_Sukzessivkontrast]click[/url])
+
https://upload.wikimedia.org/wikipedia/commons/8/88/Farbkreis_Itten_1961.png
  
So there are 7 different kind of contrasts I'll try to mention them all a bit.
+
(Thanks to Wikipedia for a deeper analysis [http://en.wikipedia.org/wiki/Color_theory Color theory]
  
 +
although the German  site is better - those who can read it should do so
 +
[http://de.wikipedia.org/wiki/Simultankontrast#Simultankontrast_-_Sukzessivkontrast Kontraste])
  
The first is the [b]complementary contrast[/b] . 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.
+
So there are 7 different kind of contrasts I'll try to at least briefly cover all of them.
  
The second [b]dark and light[/b]. A good example is my Avatar. Many dark areas and only some brighter areas.
 
  
[b]Cold Warm contrast[/b]
+
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.
People find orange and red as "warm" while they associate blue with "cold"
 
this can be used too but only rarely.
 
  
[b]Color contrast[/b] or how is it called well Bogus for us we use colors.
+
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  
 
Example  
[url=http://upload.wikimedia.org/wikipedia/commons/1/18/Marc-blue-black_fox.jpg]click[/url]
+
https://upload.wikimedia.org/wikipedia/commons/1/18/Marc-blue-black_fox.jpg
  
[b]Simultan contrast - successive contrast[/b]
+
'''Simultaneous 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.
+
Well now it gets interestingNeo uses this from time to time to add more depth to his shading.
[img]http://upload.wikimedia.org/wikipedia/commons/6/6e/Simultan2_Kopie.jpg[/img]
+
https://upload.wikimedia.org/wikipedia/commons/6/6e/Simultan2_Kopie.jpg
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 [b]Quantity and Quality contrasts[/b] .
+
He lays pixels in different colors next to each other so they boost each other.
Drum rolls please.  :mrgreen:
+
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).
  
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.  
 
A good example is this painting of my favorite artist.  
[url=http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Caspar_David_Friedrich_035.jpg/800px-Caspar_David_Friedrich_035.jpg]click me[/url]
+
https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Caspar_David_Friedrich_035.jpg/800px-Caspar_David_Friedrich_035.jpg
  
 
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.
 
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 [img]http://www.adipositasgemeinschaft.de/forum/images/smilies1/blah2.gif[/img]
+
I've now probably chased away all my readers.
  
This are the tools that an artist can use to make his art well art.
+
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.
+
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.
+
Further external links kindly provided by jacobolus. For a bit deeper overview.
In my next post there will be a little bit more action and a little bit less conversation.
+
 
 +
[https://en.wikipedia.org/wiki/Munsell]color theory
 +
 
 +
[https://handprint.com/HP/WCL/color11.html]color theory again
  
Further external links kindly provided by jacobolus. For a bit deeper overview.
+
[https://handprint.com/HP/WCL/wcolor.html]and again
[url=http://en.wikipedia.org/wiki/Munsell]color theory[/url]
 
[url=http://handprint.com/HP/WCL/color11.html]color theory again[/url]
 
[url=http://handprint.com/HP/WCL/wcolor.html]and again[/url]
 
  
 
Though this gets more interesting for portrait art.
 
Though this gets more interesting for portrait art.
  
[size=18]Part 4[/size]
+
==Detailing==
  
In 25 inconvenient steps to a scratch build sprite. Only 5 $ a bargain price soon in your library.
+
In 25 inconvenient steps to a scratch build sprite. Only $5, a bargain price soon in your library.
  
 
Just kidding.
 
Just kidding.
  
[img]http://img410.imageshack.us/img410/4712/testtl2.png[/img]
+
https://web.archive.org/web/20131110035937/http://img410.imageshack.us/img410/4712/testtl2.png
  
 
1.  
 
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)
+
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.
 
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 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. :wink:
 
  
 +
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.  https://forums.wesnoth.org/images/smilies/icon_wink.gif
 
In this case it is completely from scratch.
 
In this case it is completely from scratch.
  
 
(Other example partly with Frankensteining to show how short you can cut it)
 
(Other example partly with Frankensteining to show how short you can cut it)
[img]http://img162.imageshack.us/img162/6538/progressgo5.png[/img]
+
https://web.archive.org/web/20120330071318/http://img162.imageshack.us/img162/6538/progressgo5.png
  
That means I'm not against Frankensteining it just limits the possibilities.
+
That means I'm not against Frankensteining - it just limits the possibilities.
 
Nothing more nothing less.
 
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:
+
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) https://forums.wesnoth.org/images/smilies/icon_rolleyes.gif
  
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.
+
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.
 
As you can see here in big.
[img]http://img441.imageshack.us/img441/3483/exeqn7.png[/img]
+
 
 +
https://web.archive.org/web/20120415061610/http://img441.imageshack.us/img441/3483/exeqn7.png
  
 
Dark areas with darker colours. Exposed positions, uprisings with bright colours.
 
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.
+
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.
+
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 him various times to see where he fits best).  
+
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 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.
+
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. 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.)
+
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 are good you can work further with a pencil tool and further shades.
If you want it different well.
+
If you want it different, well:
First I use this tools.
+
First I use these tools: sponge, dodge and burn.
[img]http://img207.imageshack.us/img207/7158/toolsab9.png[/img]
+
 
(Available at the gimp and Photoshop, you should test out the different settings to see which one fits you the most)
+
http://img207.imageshack.us/img207/7158/toolsab9.png
 +
 
 +
(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).
  
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. ;)
+
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. ;)
Serious you can emulate it with careful chosen pencil dots.This goes much too far for me personal.
+
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.  
 
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.
+
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
 
Before and after
[img]http://img512.imageshack.us/img512/163/93794620nu1.png[/img][img]http://img514.imageshack.us/img514/7233/35075772dk7.png[/img]
+
 
 +
https://web.archive.org/web/20120329073734/http://img512.imageshack.us/img512/163/93794620nu1.png https://web.archive.org/web/20120419212837/http://img514.imageshack.us/img514/7233/35075772dk7.png
  
 
Than I work on the finer shadings with a pencil with low opacity and fading out.
 
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)
+
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)
[b]
+
 
A big note though!!!
+
'''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.[/b]
+
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
 
Before and after
[img]http://img530.imageshack.us/img530/5194/49958573tb5.png[/img]
+
https://web.archive.org/web/20120407101803/http://img530.imageshack.us/img530/5194/49958573tb5.png
  
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.
+
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:
 
To conclude:
Line 237: Line 248:
  
  
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. :lol:
+
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. http://forums.wesnoth.org/images/smilies/icon_laugh.gif
  
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. :)  
+
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:
+
'''Further links:'''
[url=http://www.warpedspace.org/lightingT/part1.htm]light and reflection[/url]
 
  
[size=18]Part 5[/size]
+
[http://www.warpedspace.org/lightingT/part1.htm]light and reflection
 +
 
 +
'''Internal links:'''
 +
 
 +
[http://www.wesnoth.org/wiki/How_to_Shade] How to Shade
 +
 
 +
[http://www.wesnoth.org/wiki/How_to_Anti-Alias_Sprite_Art] How to Anti-Alias Sprite Art
 +
 
 +
[http://www.wesnoth.org/wiki/Team_Color_Shifting] Team Color Shifting
 +
 
 +
==Conclusion==
  
 
Don't do. (I tell you)
 
Don't do. (I tell you)
  
-Rough edges straight lines are evil. 90°, 45°  degrees too.
+
* Use rough edges. Straight lines are evil. 90°, 45°  degrees too.
-Symmetry is boring, a symmetric face stands for beauty but still boring.
+
* 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).
+
* Avoid the "chiseled out of a rock" look (moved cape stretched stance,.. etc help avoid that).
(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)
+
(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.
+
* 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 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 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. Exagerate too much and break every physical law you know
+
* 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. "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 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 on critic. Everyone makes mistake and the one on the other side of the monitor mustn't be always right.
+
* Don't overreact to critiques. Everyone makes mistake and the one on the other side of the monitor isn't be always right.
  
  
 
Do
 
Do
-Monochromatic can work if the contrasts are high enough
+
* Monochromatic can work if the contrasts are high enough.
-Moved stuff , wind as another artistical tool
+
* Show stuff moving - use wind as another artistic tool.
-Use optical illusion if you can draw a face with 4*4 pixels fine but no one will see it. Hint it.
+
* 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
+
* 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
+
* Small steps if you are a beginner but steps and not 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)
+
* 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).
-Exagerate slightly if it helps to communicate the message
+
* 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
+
* 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)
+
* 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)
-smoth transitions between the different parts of the sprite
+
* 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
+
* If you need the space take it. You won't achieve anything with 2*2 pixels
-Accept critic. Actual learn to critic yourself
+
* Accept critique. Actual learn to critique yourself.
-Experiment. Try something new
+
* Experiment. Try something new.
-Save often. Look often at the real size. Look at it ingame
+
* Save often. Look often at the real size. Look at it ingame.
-Put it away and make a new start after some sleep
+
* 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
+
* 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 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.
 
So feedback can be posted in the forum in the appreciate topic. I'll try to work the feedback in.
http://www.wesnoth.org/forum/viewtopic.php?t=16760&postdays=0&postorder=asc&start=0
+
[https://www.wesnoth.org/forum/viewtopic.php?t=16760&postdays=0&postorder=asc&start=0]
 +
 
  
 +
To close it with one of my favorite philosophers:
  
[i]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!''
 
''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.'''
 +
 +
[[Category: Art Tutorials]]

Latest revision as of 19:05, 12 July 2019

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:


13tt0.jpg 11ck5.jpg

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. greatbowv2cg7.png

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)

wayfarerlinesdz6.png

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. linessmallax0.png

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

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: exebigrz7.png

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

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:


sorceressqi5.jpg 66863960kd6.png 99517190fk9.png 14990273go2.png

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.

Farbkreis_Itten_1961.png

(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 Marc-blue-black_fox.jpg

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

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. 800px-Caspar_David_Friedrich_035.jpg

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.

testtl2.png

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. icon_wink.gif In this case it is completely from scratch.

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

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) icon_rolleyes.gif

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.

exeqn7.png

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.

toolsab9.png

(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

93794620nu1.png 35075772dk7.png

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 49958573tb5.png

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. icon_laugh.gif

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.

This page was last edited on 12 July 2019, at 19:05.