As part of my fledgling hobby/future side career doing game development for the iPhone, I’m becoming sort of an inadvertent GIMP expert.  I’m not a graphic artist, and I don’t do any original artwork for the games I code.  However, I often need to edit and re-touch existing artwork, which is where GIMP really shines.

One of my games has a nice, eye-catching title logo:

This logo came to me as a PNG image.  I wanted to add some extra text with the same look, so I decided to try to mimic it with GIMP.  Most of my GIMP knowledge comes from reading tutorials on the net, so I figured I’d “give back” and share how I did it.

The first step was to install the font in GIMP.  The font used here is “Addled Thin.”  I looked online and found a .ttf for the font, dropped it into GIMP’s fonts directory, and restarted GIMP.

Next, I created a text layer with the text I wanted.  The text size is 96px.  To set the text color, I used the color picker tool and selected the foreground color of the text, which is #FBAE5C in RGB notation.

Next, create the brown outline around the text.  Use the select by color tool to select the text, then choose Select » Grow.  Grow the selection by 5 pixels and click “OK”.  Then create a new layer and order it so it’s below the text layer.  Go back to the color picker and select the brown outline color from the original image (#5F3813).  Select the new layer and choose the bucket fill tool.  On the tool options, select the radio button to “Fill whole selection.”  Fill the enlarged selection with the new color.  This should give you outlined text:

Now move the text layer up relative to the outline, to create an offset look.  I moved it up 2 pixels.

Now, we want to repeat this drill to create the black outer border.  Hopefully, you still have the original enlarged outline selection active.  Grow this selection by another 5 pixels, create a third layer, fill it with the dark outer border color (#14100D), and offset it by 2 pixels relative to the other two layers.

Starting to look pretty good.  Next we want to use GIMP’s built-in drop shadow effect to create a shadow.  Before doing this, merge all of the layers together by choosing Image » Merge Visible Layers (or Ctrl-M).  Then choose Filters » Light and Shadow » Drop Shadow.  I set “Offset X” to 5, “Offset Y” to 5, “Blur Radius” to 5, and left the color as black and the opacity at 80.

Finally, add in the coarse gradient effect from the original text.  To do this, I selected a chunk of the gradient from one of the lowercase ‘r’s on the original, and copied it to the clipboard.  Then I used the Select by Color tool to select the original text again, and did Select » Paste Into several times to recreate the gradient inside the selected text.

One thing to note:  if you look at the original text, the words are all rotated at various angles, but the gradient is always horizontal.  If you want the new text rotated, you’ll want to rotate it before adding the gradient.

And there you have it:  A pretty close approximation of the original text effect.  Here it is pasted into the game artwork: