» Pixelart for programmers
Pixelart for programmers
|Pixelart for programmers|
This is a
short tutorial for people who have no experience with drawing but want
some characters for a game. It is about quick results, not about proper
artistry. There are theories behind what I'm doing but I won't delve
into them. By no means is my work expert pixelart and it barely
scratches the surface of concepts in graphical art, but maybe some of
the things I do can be useful to you.
Enough with the
intuition, from here we shall use logic to go
* First, download and install
Gimp, a free graphics program that supports layers. Free +
Layers == Good.
Do not let the interface scare you, it has
graphics instead of a command-line. There's a whole bunch of clutter,
which you can rearrange if you like, but you can always get what you
need by going through the menu: "Windows->Dockable
Here's my setup and the parts of Gimp I will focus
Red: All the
Dockable Dialogs. Also I prefer to work in Single-Window
Blue: The Dialogs we will actually use; Layers,
Undo History and Tool Options.
Green: The Toolbox.
I've circled the tools we will use. These are from left to right, top to
bottom: A selection tool, color picker, zoom tool, scale tool, pencil,
eraser and the colors.
* Select the pencil and set
its options through the Dialog: Tool Options, exactly like
* Then, select the eraser and set its
options exactly the same, but also check the "Hard edge" checkbox, this
is to ensure you do not get transparency or automatic
* You also might want to check the "Sample
merged" checkbox in the Tool options of the color picker. That will
ensure that if you pick a color it is as you see it, with all effects
applied. It can be confusing
something big and simple.
* Create a new
image through the menu: "File->New". The default settings
(640x480, 72ppi, rgb mode, background color) are fine.
* Go to
the Layers Dialog and click the page icon at the bottom to create a new
layer (Layer Fill Type should be Transparency).
* Draw a big image, just the
lines, using the pencil and the eraser, the quality doesn't really
matter because we will be scaling it down. So don't waste too much time.
If at any point frome here on you want to go a step back, there is of
course undo (Ctrl+Z) but you can also take a look at the Undo History
Dialog which basically allows you to go back multiple steps in history
and then forward again (as long as you don't change anything in the
So, your picture might end up something like
3) Outlines and
* Alright, we now scale the image
to the size you want your pixelart to be. I chose 50 pixels high. To do
this first select your character using the Selection Tool. Then, once
you have the selection, use the Scale Tool to decrease the image size.
Hold the Ctrl/Strg/Command button while doing this to ensure the image
does not get distorted. Press Enter when you're done. You may notice
there is still a so called Floating Selection. If you look at the Layers
Dialog you can right-click the Floating Selection and pick "Anchor
Layer" to fix that. Also, in the Layer Dialog, set the opacity of the
layer containing your tiny character to something like 50%. (You can
click on the eyes in front of the layers to toggle their visibility). We
now have the basis for our pixel character.
* Create another new Layer. Zoom
in on your tiny character using the Zoom tool. Select the eraser and in
the Tool Options Dialog set its Size to 1. Do the same with the pencil.
Now you'll need to redraw your character using your scaled picture as a
guide. It's supposed to work a bit like tracing paper but it's ok to
diverge a little to increase readability of the
(There is a lot to be said about this but that's not
something I can do justice. You might want to be careful to avoid
symmetry, it is something that programmers tend to prefer I've noticed
and it often results in very sterile pictures imho. But feel free to
experiment of course.)
* Now that the main line art is
done, go to the Layer Dialog and set the opacity of the layer containing
your line art to about 25% and duplicate the layer by right clicking it
and selecting "Duplicate Layer". Make the original and the scaled image
invisible by clicking the eye icons in front of those layers. Now, in
the duplicated line art, erase all the lines that have no direct
connection to the background.
* Make another new layer, this
time coloring in your character. Use only a couple of colors and be sure
to color the lineart as well. You can pick a color simply by clicking
on the colors in the Toolbox. The top one is the foreground color and
the only one you need to pay attention to. You can use the color picker
to select exactly the same color you used in your picture previously.
The result will probably look something like this:
* Now, in the Layers dialog, click
and drag your color layer down to below your two line-art layers. Not
so bad eh? You can experiment with the opacity of the line art if you
want to get more or less of a cartoony look for
* Create another layer and pick a
very dark color. For instance a dark purple. Now in your mind, pretend
your character is a 3d object and there is a lightsource on him or her
or it. Where would the shadows be?
Usually the crotch and the
neck are good starting places, so use the pencil to draw really dark
areas. Then you could consider the insides of elbows, or the undersides
of limbs in general, maybe parts of the face so the nose and eyebrows
stick out more. Don't be afraid, create plenty of darkness. Then, when
you're done set the opacity of the shadow layer to something like
* Now that your first version is
done, take a look at it. Turn off the color layer for instance to see
the effect the other layers have. Mess with the opacity. Maybe you want
to change some small things here and there. Maybe add some more colors.
You can also add another shadow layer for a more realistic look for
instance. Or change some of the proportions altogether.
* And finally, from here you can
dig into real
pixelart tutorials to learn about manual anti-aliasing, color
theory, readability etcetera. You can also improve your drawing skills
by learning about poses and facial expressions etc. It is something you
can devote a lifetime to with many interesting theories, styles and
nuances. If you go there, do not be afraid to throw everything you've
done out the window and start over in a completely different direction.
You may be surprised and find something that works really well for
are some pictures where you can clearly see the difference in me trying
to find a style for my game.
If you intend on developing this
skill you may want to invest in a small wacom tablet for about 40 euros,
wacom because they hold a patent so that their pen does not require
batteries and small because that works fine. If you want to try one out,
come talk to me at one of the berlin
Or maybe you want to abandon the
intuitive path and implement a program that takes a sketch and dumps out
pixelart using these steps ;)
Category: Experiments |
Views: 1052 |