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.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

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:

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 *