Pixel art tutorial: making a logo for your retro game in GIMP

Edit: thanks to everyone who (politely) pointed out the error in the title - this isn't "pixel art" per se, as pixels aren't being deliberately placed. It's a way to make a logo that fits in with a pixelated graphical style.

Today I thought I'd post a simple guide to creating a logo for your pixelated game. We'll be designing a logo for a fictitious game titled "Science Quest" - an RPG where you play a resourceful life sciences grad student attempting to secure grant money in an uncertain funding climate. We'll be using GIMP, the GNU Image Manipulation Program, which is a free and powerful alternative to Photoshop.

Now, I don't consider myself a fantastic pixel artist - I think what I do is passable, and maybe ~1/2 of the current art for Last Legend will make it into the final game, with the rest being redone by someone with more talent. But my lack of artistic talent has forced me to find simple artistic workflows that can generate passable programmer art quickly.

With that in mind, let's get started!

First, we need to pick a resolution. This won't be difficult as there are likely already some resolution constraints set by the game. For example, if the game will be a 640x480 Flash app with a scaling factor of 3 for jaggieness, that gives us 640/3 = about 213 pixels to work with. Since there will be margins, and for simplicity, let's just round down to a width of 200 pixels. The logo will be wider than it is tall, so I'll go with 200x150 - that should give me plenty of space to work with.

We'll create the image in GIMP, using a transparent background:

The next step is to decide on a font to base our logo on (yes, spoiler alert - the easiest way to generate text is to render it from an existing font, not draw it yourself one pixel at a time.) We want to find a "sciencey" font for this logo, which can be a bit subjective. An easy way to get a sample of what fonts are on your system would be to open a word processor, write "Science Quest," and try some out. You may also have a font browsing and editing tool on your system, but this is by no means required. I decided to go with "Old Standard TT Bold" for this - it looks like something from an old scientific manuscript.

Using the Text tool in GIMP, click and drag to make a rectangle that spans the width of the image, and type "Science Quest". Adjust the font size until the logo fits the exact width of the image. Don't worry about the height as much - remember that it was our width that was constrained. Finally, uncheck the box in the tool options that says "antialiasing" - you want things to look a little jaggy at this point.

Since smaller font sizes didn't look so great, I decided to put "Science" and "Quest" on different lines.

Completely removing anti-aliasing doesn't always look great, so at this point a little pixel-by-pixel touchup may be necessary. Use your best judgment and the Pencil and Eraser tools to smooth the edges of your letters and eliminate any stray pixels. For Pencil (keyboard shortcut N) and Eraser (keyboard shortcut Shift+E), set the size to 1 to work with individual pixels; for the eraser, check the box that says "hard edge" so that pixels are erased completely.

If you look closely, you can see that I've done some very minor cleanup and thickened some lines, notably on the c's and e's.

The logo is a little flat and uninteresting. To add a little depth, we can add a drop shadow. Make a new layer, copy your logo, and paste it into the new layer. Select the Bucket Fill tool (shortcut Shift+B), check the box that says "fill whole selection", change the color to grey, and click on the logo to fill it grey. Using the Move tool (shortcut M), move the layer exactly one pixel down and to the right (don't try to do this with the mouse - you can move one pixel at a time using the arrow keys.)

We can add even more depth by coloring the logo with a gradient. I'm going to color the words "Science" and "Quest" individually with a white-to-light-grey gradient. Switch to the layer containing the black logo text and click the "Lock Alpha" button directly above the list of layers - this will prevent us from coloring outside the lines. Using the Rectangle Select tool (shortcut R), select a rectangle containing the word "Science." Then select a foreground and background color and use the Blend tool to fill the word from top to bottom. Click on the top of the tallest letter, drag a line down to the bottom, and release. If you hold CTRL while dragging the mouse, you can constrain the gradient to a perfect vertical line. Do the same for the word "Quest" - for mine, I'm reversing the direction of the gradient.

Now, the perfect, smooth gradient makes this look a little less retro. We can remedy this by decreasing the numer of colors used with Posterize. In the Menu, select Colors > Posterize, and choose a number of levels that you think looks good.

Finally, we'll throw in some special effects. I added a Gradient Flare (Filters > Gradient Flare) to the drop shadow layer, and posterized the result with 12 levels to get a nice lighting effect that looks like it's from the SNES era (reduce the number of levels if you want to further limit the palette):

And voila! On a black background and scaled up x3, here's our completed logo:

Feel free to get a little more creative - throw in a beaker, use different colors, fonts, or lighting effects, etc. There are a million and one ways I could've done this, and with GIMP it's easy to quickly create a few different prototypes and pass them around to friends to see which version they like best.

Well, that's it for now. Hope you found this helpful, and feel free to ask any questions in the comments or via e-mail.


Comments on Reddit.