Howdy-ho!
NOTE: After some constructive critizism from a more experienced pixel artist, Calypson ( Thanks ), I have changed some of the content of this to be more correct
This is
Not a tutorial.
I run through how I did a particular image, and you follow, learning some ( possibly bad ) techniques along the way
Ready?
Here we go...
Step 1 - Ideas
First! I have an idea... A YAK!
I do a google for 10 minutes to find out what a YAK actually looks like.
I get an image that is B&W ( really shocking quality... it could have been anything, really ) which showed the body-shape.
I open the image.
I put it in the corner of my screen as a reference point.
My Yak reference image.
Step 2 - It Begins!
Now, we start drawing!
Open up MS Paint ( a new window if you reference is also in MS Paint ), and size your canvas to however big you want the sprite to be.
For this, I went rougly at about 128*128 to start, and if I needed more space, I'd resize the canvas to fit it in
First off, do a rough ( hold down the pencil and drag ) outline of the reference image, in Black ( with a White background ).
Basic outline copy.
Give it some legs.
Needs two more to stay balanced.
Re-shape its Butt.
You probably noticed by now that your outline is alot ... crappyer... than what mine is. This is because after every time I draw a line ( unless it's with the line tool ), I have to
go over it and get rid of all those jagged edges, making it a single pixel thick all the way along!
Get rid of them jagged Edges!
Note: It is said that black lines are generally a no-no, so you may only want to use the lineart you have so-far as a guide to where your shading will go
Step 3 - Simple Detail
Once we are happy with the basic outline of the object ( remember, this could be anything from a person to a peice of furniture to an architectual masterpeice! ), we now want to put some basic detail into the outline.
Don't go overboard, and don't expect that you wont change it all again later. This is pretty much testing the waters and seeing what looks and feels right.
Basic hair outline.
Oops, can't forget that other horn!
From here, just play.
Put in as much or as little as you want, pretty much, but, again, don't go overboard, as you can destroy it
Any and all defining features should be put in by now.
Any hard lines, or even basic ones that will be shadowed need to be in there, in black, on the white background.
( If you're going for the massively complex image, I would imagine alot of this comes in as you think of it, but for this size project, you should have it done and in.
Step 4 - Colour!
Before I start, you may want to skip this section, and read these instead;
http://www.happyfez.com/~crappygames/index.php?view=tutorials/index.html
Pick your base colour.
Fill the thing with it, and test out different shades.
A good practice is to stick with colours that are in the lower third of the colour picker in Paint ( and other drawing apps ), as these tend to be pastel colours and not harsh on
the eyes.
If you find a colour, but you don't think it fits quite right, try making it lighter or darker and see if that makes any odds ( you'll be surprised at the difference the shade makes!
).
A possible colour.
As these graphics are intended for a "cartoonish" feel, then go for broke, don't stick to just realistic colours! Choose anything you want
Note: The Colour picker is your friend!
Quote: "'no two shades should be the same hue'.
Never (unless its your direct intension to do so) just slide the shade bar up and down without moving the color around as well."
Step 5 - Shades and Light
Note: You'll notice from the next pictures that I skipped a few steps between saving ( oops ), and that I also changed the shade of the base colour ( this is simply a
lighter version of the darker one... lol ).
Ok, now you have your base colour, it's time to decide a few things... Will this base colour be the lightest possible, the middle ( recomended ) or the darkest possible?
Also, where is your lightsource?
For all of my art so far, I've had the source in the upper-right corner ( about a hand's length off the top of the screen is where I imagin it to be [ Oh, and I have big hands, so
it's a fair way off
] ).
Be careful with multiple light sources, as they make shades hard to work out in your head sometimes
Never pick a source that is inbetween the image and the viewer.
Once you've decided these things, you can put in a bit of a basic shade.
Pretty much just divide the image into 3 parts ( closest to light, middle, and furthest from light ) then scale the shade of your base colour and fill in some area's that need it.
If it's an object with lots of flat sides, this is the easy part. Simply flood-fill the faces closest to the light source with the lighter colour, and the opposite for the ones furthest
from the light.
If it's an object that is rounded, or irregular ( as in the shape of my Yak ), then you need to use common sense and think about "cartoon shading" for this part. Just pick an
area, draw a line, fill it in, round it off.
Shading the Yak's belly.
Step 6 - Internal Lines
You'll notice in the image above that most of the black lines inside the ouline of the yak are now shades of my base colour. This is what you need to do too.
However, here are a number of guidelines that *I* follow ( meaning, you should come up with your own );
1. All definition lines that are inside the outline should be shaded except in the following cases;
1a. if this line acts as a divider of two areas that are different distances from the viewer ( such as the black line between the left and right legs [ above ] ).
1b. if this line is a defining feature, such as a dot for an eye.
1c. if you simply want to keep it black.
2a. Any line that is on an external angle should be lighter than the base colour ( all edges on a cube are like this ).
2b. Any line that is on an internal angle should be darker than the base colour ( such as where the pages meet in the centre of a book ). Exepctions occur in these cases;
2bi. if the line is heavily influenced by light.
2bii. if the line is heavily influenced by shadow.
2biii. if you simply dont want to do it this way.
A new colour for the hooves and horns.
Step 7 - Detailing with Shades
Next up, we want to detail the image with shades of our base colour.
Note the shades on the belly and thigh.
This is pretty simple. It's all just a matter of selecting the right shade ( not too far either way from the base colour ) and putting it in the right spot.
For the belly of this beast, I reasoned it would be the most shaded, thus I chose one of my darkest shades to go along the base outline.
I chose a slightly lighter shade to put up a little bit, and did the same again with a lighter shade ( all darker than our base colour ).
It's not hard once you get the hang of it, but there are a few things to note here also;
1. Avoid using single pixels - they are more noticable than pixels in groups of two, beleive it or not.
2. Step your shading unless a high contrast ( for example; white on black with no grey inbetween ) is what your after.
3. Depending on the size of your image, use different thicknesses for each "layer" of shade ( the bigger the image, the thicker each layer, etc ).
Shade it's chest and butt.
Tweak the shading.
Shade the Chin.
Darken the inside of the legs.
Darken the inside of the hooves.
Shade the hump.
Shade the forehead and give the hump some character.
Shade the snout.
Add Highlights to back and forehead ( closest to light source ).
Add Highlights to snout and create new ( shaded ) eye.
Soften Highlights by adding a border of an intermediate colour and tweak thigh shading.
Add shading to hooves and Horns.
Add some more highlights on the Hump.
Just an image resize
Added shading just above hooves.
Lighten the internal lines.
...And we're done!
Hopefully this helped out some people who want to get started on Pixel Art.
I, by no means, claim to be an expert. I did only start doing pixel art around 20hrs before starting this image ( which took me 1.5hrs, btw ).
Enjoy!
[Footnote] Thanks to Calypson for the corrections, and suggestions. You're probably best off looking at his work ( next few posts ) after ( or probably before ) following this post
[/Footnote]
Team EOD :: Programmer/All-Round Nice Guy
Aust. Convention!