GIMP for Pixel Art: Shortcuts, Setup and Tips

 

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

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:
GIMP - Configure Keyboard Shortcuts

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

GIMP Custom Shortcuts

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

GIMP - Default Useful Shortcuts

* 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:
Gimp - Preferences-Undo

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

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:
GIMP - Move Tool Preference

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

Editing 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 Configure this tab buttonAdd Tab – Palettes.

Palettes - Tab position

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:

Drag palettes tab

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:

Drag Palette to create a 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 Brush

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:

Pencil Opacity

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:
Selection: ADD

Let’s say you want to remove a small part of a selection: hold Command and drag the selection over the part to remove:
Selection: 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:

GIMP - Drawing lines

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:

Draw rectangles with the selection tool

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:

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 siteRSS feedTwitter or delicious.

Leave one

6 Comments

  1. Great Article,

    I’m in the same boat when it comes to GIMP. Just seems ugly and clunky. But I will totally reconsider for pixel art after reading this :)

    Have you tried Pixen for pixel art http://opensword.org/Pixen/ (no, I’m not the dev and this is not a plug for it, just curious:)). I’ve done a couple projects with it and really like the interface.

    I’d be curious to get your take on it.

    Lovin your idevblogaday posts, keep em up!

    Reply
  2. Alfred R. Baudisch

     /  October 8, 2010

    @brondon: Thanks! About Pixen: yes, I use it too. I keep switching from GIMP, Pixen and Sprite Something (iPad App). To be honest, my favorite one so far is Sprite Something, since spriting with the fingers is pretty easy and I can do it anywhere. But, then, I miss selecion tools, so for more complex works, e.g. most of the works, I stick with GIMP / Pixen.

    I plan to do a cast while doing pixel art (similar to the videos I pointed), maybe on next posts.

    Cya next article! :)

    Reply
  3. Just to let you know, there’s actually a way to select things in GIMP without focusing the windows first. Open GIMP, then go to X11 -> Preferences. On the Windows tab, check the “Click-through Inactive Windows”. Done! Hope that helps!

    Reply
    • Alfred R. Baudisch

       /  November 11, 2010

      Thanks Fabio! That really helped! Now it works like a native application :) I’ll edit the post about it.

      Reply
  4. Hey! I’m late for the party, but thanks so much for this article. I’ve switched to gimp myself since I started being an official freelancer and I don’t know how, but I’ve searched all over the window menu to find a way how to open a secondary view for the 100% size … View>new view! Dou! I feel so stupid now. :) Thanks again, for saving me the trouble of zooming/unzooming 50 times per hour. :)

    Reply
  5. Seth

     /  January 5, 2013

    Great article, thank you so much. It could use an update for the latest version of GIMP, but I was able to figure out the differences quickly, and I’m certainly not complaining!

    Reply

Leave a Reply