Create a gold bitmap font

In this post I'll take you through the process of producing a gold colored font similar to what I've used in my own apps.

First the alphabet:

We need a string of characters separated by one or more spaces (I used 4 in the example below to properly separate the characters) to use in Gimp to create the font string.


As in my other post I'll just create a truncated alphabet for simplicity.

Using Gimp to create an alphabet image:

Open up Gimp and create a blank image of size 500 x 20,000. You might have to experiment here to get an image large enough for your complete alphabet. MENU/File/New… and set the image size and press OK.

Now we need to color the background black using the Bucket-Fill tool from the Gimp toolbox.

Next, switch the Gimp Foreground/Background colors around so we get white as the foreground color (use the curved double arrow near the black/white color boxes on the Gimp toolbox.

Select the 'Text' tool from the Gimp toolbox and choose the font you want to use, font size etc. I chose 'Tiranti Solid LET' 200 pixels for this example. I turned on Bold to give the character strokes some width. Finally I flattened the image (MENU/Image/Flatten Image).

This is approximately what you should have now (I've adjusted the image size for this post):

White letters on a black background.

Create the bump-map:

Next we blur the letters slightly (MENU/Filters/Blur/Gaussian Blur, size=5). This will help to give the letters a 3D shape later.

Now we want to create a bump-map for the letters to generate a 3D shape: MENU/Select/By Colour, now click on the black background. MENU/Select/Invert

Go to the Layers dialog (MENU/Windows/Dockable-Dialogs/Layers) click on the "Create a new layer" button at the bottom left, select Transparency, name the layer bump-map and click OK. Next click the eye-symbol on the Background layer to hide it.

Select BlendTool on the Gimp toolbox (square with L-R black to white gradient) and set, Mode:Normal, Opacity:100%, Gradient: FG to BG (RGB), Shape: Linear. Now drag out the line from the very top of the image to the very bottom in a completely vertical line. If you don't make the line vertical the gradient will be tilted. Your letters will now have a gradient from top to bottom.

Get rid of the select (MENU/Select/None), and apply the bump-map (MENU/Filters/Map/Bump Map). In the dialog set Bump Map:background image, Map Type: Sinusoidal (this is nice), and then press OK. Your lettering should appear 3D.

Make Letters Metalic:

Next we want to make the letters appear shiny like they were made from metal (MENU/Colors/Curves…). Pull out the curves so they look something like:

Metallic color curve preset for metallic look.

You can save this curve by clicking on the green+. Press OK. The lettering should appear much like the following (if you zoom in -- use mouse wheel):

Letters given a metallic look by adjusting the Color Curves.

Apply the Gold Color:

First we need to set a fore-ground color. Click on the foreground color blot(white block on Gimp toolbox) and set a yellow color: fff556 and press OK. In the Layers dialog make sure the visible layer (letters) is selected and apply that color to the image (MENU/Colors/Map/Gradient Map). This gives the object a nice gold color. NOTE: You can choose other colors and produce metallic lettering to suit your needs.

Letters colored with Gradient Map

A drop-shadow can now be added. Select the letters as we did above (MENU/Select/By Color, now click on the black background. MENU/Select/Invert) and generate a drop-shadow (MENU/Filters/Light and Shadow/Drop Shadow, Opacity: 85%) and press OK. Un-select the characters (Shift-Ctrl-A). This gives each character a nice drop shadow something like the following:

Drop-Shadow added.

We can now delete the background layer (the red circle with cross in Gimp layers dialog), merge the visible layers (MENU/Image/Merge Visible Layers) and Save (Ctrl-S) and Export (Ctrl-E, uncheck the "Save Background Color" checkbox and save as PNG file) our work.

Gold letter alphabet with drop shadow.


Next we have to take our linear alphabet image, that we just created, and split each letter out into individual images.

Leave a Reply

Your email address will not be published. Required fields are marked *