Almost every time I see someone talking about GIMP is that it has an awful interface or that it is difficult to use, or they just say that GIMP is a bad piece of software. I was one of these complainers. But since I’m doing some pixel art to my game, I decided to give another try to GIMP (and I’m loving it).

I could use Inkscape, but it’s a vector tool. The day before I complained about GIMP on Twitter, Québarium wrote a post about using Inkscape as a effective tool to game graphics (well, that applies to any piece of software, you just need a lot of practice and patience). So I thought, why not giving a SERIOUS try to GIMP this time? The fact is: I have never tried GIMP for more than 5 minutes before giving up, and I think most of the persons that complain about GIMP don’t give it a chance either.

Give it some time, and the fact is: it is fast to get used to its interface, just customize some shortcuts, get used to this and that and you will start loving (or at least being friend of) it.

Getting Inspired

First, let’s watch some casts of Game Producer doing pixel art with GIMP:

More from him: Robot Pixel Art (1/2) and part 2. Now, let’s see how to do this!

Download GIMP

• Mac OS X: http://gimp.lisanet.de/Website/Download.html
• Windows, etc: http://www.gimp.org/downloads/

Enabling the Command key for GIMP under OS X

This tip applies to users of both Inkscape and GIMP under Mac OS X (if you are a Windows user you can skip this section). They aren’t native applications and depend on X11, so the Command and Option key don’t work. Since we are used to CMD+C and CMD+V to copy/paste, using CTRL+C, etc can be annoying or take some time to get re-used. But there is a solution for this.

Close GIMP and open you preferred text editor and paste this:

clear Mod2
clear control
keycode 63 = Control_L
keycode 66 = Alt_L
keycode 67 = Control_L
add control = Control_L

Save it in your home directory (~/ or /Users/yourname/) and name it .xmodmap (if the editor asks about it starting with a dot “.”, keep it). Now open X11 (Applications, Utilities, X11), open its Preferences and uncheck all checkboxes:

Now let’s finally start into GIMP.

Setting up GIMP shortcuts similar to Photoshop shortcuts

You can skip this step if you are satisfied with GIMP shortcuts. But it’s possible to setup it to have almost the same keys as Photoshop, which I am totally used and I feel it’s easier to work it, even more when working with Pixel Art when we use Pencil and Eraser almost 90% of the time.

Go to Edit – Keyboard Shortcuts. On the Configure Keyboard Shortcuts dialog you can easily find a tool or action within the Search box:

Using the search, find and change the following tools / actions:

GIMP has already some familiar default and useful shortcuts for pixel work:

* I’ll explain these later.

Change some Preferences

The following Preferences changes could add some productivity to your work. Again, change as you wish. Go to Edit – Preferences and:

Under Environment, change the minimal number of undos to 50 and up the maximum undo memory, depending on your computer capacity:

Under Default Grid, change the “Foreground Color” to a bright gray:

Under Toolbox, check “Set layer or path as active“: when you click on a layer with the Move Tool, it will select that layer, and you will be able to move/edit it without the need to go to the layers dialog:

Tips to work with Pixel Art on GIMP

NOTE: None of the “tips” explained is new nor GIMP exclusive, remember that the purpose of the article is to show how to do these stuffs with GIMP and how they can help while working with pixel art.

1) Real size preview

Since to work with pixel art you have to deep zoom in (normally 1000%+), you can’t really see how your final image is, then we need a real time preview for our image. In your image window go to View – New View. In the new window, set the zoom to 100% and go to View and uncheck Show Selection and Show Grid. Resize and position the preview window below your work window.

2) Easy access to palettes

One of the most important things when working with pixel art is the color palette. GIMP has a cool palette control. To always have the palette window at hand, go to the Toolbox window and click the “Configure this Tab” button – Add Tab – Palettes.

The palettes tab probably will be added as a tab with the “Tool options tab”, click and drag it to the line above, so it will stay in its own line:

Now double click any palette. A new window will be opened with the selected palette. Drag this window so it turns in a tab at the right side of the palettes tab:

3) Importing and generating palettes from images

You can create a palette adding color by color: Palette – New and add color by color or you can import a palette: right click in the palettes tab and “Import Palette“. In this dialog you can generate a palette from a gradient, from an Image (note: the image has to be already opened in GIMP) or a palette file.

4) Setup your pencil and eraser

Pencil and eraser are pixel artist’s main tools, so we need to setup them. Select the Pencil (B) and in the tool options select Brush – Circle (01). Select the Eraser (E), the same brush as the pencil, mark hard edge and uncheck Anti erase.

5) Color variation for shading

While you could have setup all your image’s colors in the palette you can also decide the colors while working on the image. Let’s say you are drawing a tree and while shading it you can’t decide which tons of green to choose: then lower the opacity of the pencil tool!

Same green, 3 different opacities:

The other way of doing real time shading is using the Colorify tool. With the layer you want to shade selected, go to Colors – Colorify, click on “Custom Color” color and pick a color. Shading done! Anyway I prefer via pencil opacity.

6) Quickly drawing with the selection tools

Use the rectangle (M) or ellipse selection (Shift+M) tools to quickly draw large areas and then fill them with the Bucket (G).

To add selections to existing selections: let’s assume you selected a rectangle and you want to add another one on the other side of the image but without losing the first selection. Just hold Shift and draw the new selection:

Let’s say you want to remove a small part of a selection: hold Command and drag the selection over the part to remove:

7) Where is the line tool!? How to draw lines? How to draw rectangles?

To draw lines, select the Pencil (B), draw a pixel, then hold the Shift key to the direction you want the line:

To draw rectangles, ellipses or even irregular forms (tip 6), use the desired selection tool and while the selection is active, go to Edit – Stroke Selection, select Stroke Line, line width 1.0, open Line Style and uncheck Antialiasing:

8) I selected a tool but it is not working!

Since GIMP is not native, it doesn’t work like Photoshop when selecting something on one of its windows: all under the same focus. When you click the Toolbox tool, or Palettes tab, etc, all other windows lose focus, so you have to click your image window once and then one more time to regain its focus to make the new tool selection work. Notice that this isn’t necessary when using shortcuts.

References:

• Inkscape and Gimp on OS X: ALT key and copy/paste issues.
• Tips for using GIMP
• Draw regular shapes using The GIMP
• GIMP Tutorials: Borders on Selections
• GIMP Tutorials: Creating Icons
• GIMP Tutorials: Changing Background Color 1
• GIMP Manual: Palettes Dialog
• Tutorial Blog – Pixel Art Tutorials
• Garmahis: 40 pixel art tutorials
• Game Producer: Doing Pixel Art Is Fun (You Like It Too?)

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, Twitter or delicious.