Main » 2013 » July » 30 » Pixelart for programmers

3:03 PM
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 from
here:to here:

1) Tools & Setup

* 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 Dialogs".
Here's my setup and the parts of Gimp I will focus on.

Red: All the Dockable Dialogs. Also I prefer to work in Single-Window Mode.

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 this:

* 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 anti-aliasing.
* 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 otherwise.

2) Draw 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 past).
So, your picture might end up something like this:

3) Outlines and inlines

* 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 character.
(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.

4) Coloring in

* 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 instance.

5) Shadows

* 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 15%.

6) Reflect

* 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 you.
Here 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 minijams.

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 | Added by: Garfunkel
Total comments: 0
Only registered users can add comments.
[ Sign Up | Login ]
«  July 2013  »

External sites:
Gamasutra profile
Youtube channel
Facebook page
Twitter page

Contact me: (English, Deutsch, Nederlands)
Your name *:
Your e-mail address*:
Message subject:
Message text *:
Security code *: