Tutorial: Glowing letters

In a roundabout way the poster for yesterday's episode of ScreenFonts brought me back to my oldskool Adobe Photoshop technique for making letters glow. It is one of the very first I developed, shortly after I started working for FontShop BeNeLux in 1991 as their resident type expert and tech support. Not that I am a hotshot Photoshop expert, far from it. Whenever I encounter a specific problem I try to find a basic solution that works, using whatever software is at hand. In this particular instance I wanted to simulate an effect as if letters were glowing and slowly melting, like the remnants of candles in some Christmas decoration. I used a basic version of this custom effect on a poster for a 1992 Christmas concert, so it must have been created in Photoshop Version 2.0. Yup, when I say oldskool I mean business.

Just a little context – the inspiration for this technique came from seeing Neville Brody's FF Blur, which in turn inspired Peter Saville's F Flo Motion published in FUSE 5 – Virtual. To be honest the trick to set type out of focus on a repro camera wasn't really ground-breaking, but Neville was the first to turn that into a digital font. And it paid off: FF Blur went on to become insanely popular for a period of time.

Default Glow in Adobe Illustrator and Photoshop

Selecting and applying the Outer Glow filter in Adobe Illustrator CS4.

Of course one could argue my custom technique has been superseded by recent versions of Adobe Photoshop and Illustrator, that incorporate several ready-made Glow filters. Yet I find the results not always entirely satisfactory, so this technique may still be useful to you. Please keep in mind that my original work method did not include any fancy dynamic layer and channel wizardry, simply white type on a black background – remember, Photoshop 2.0. This however has the advantage that it works in any version of any photo retouching software. Nevertheless I welcome any suggestions for improving this. Also, feel free to offer variants on the technique in the comments.

Outer Glow Layer Effect in Adobe Photoshop CS4.

Basic glow

As usual we start off by making a typographic composition in Adobe Illustrator, or a Grayscale image directly in Adobe Photoshop. The letters must be white, as if they were cut out in the plain black background. For these tutorials I often like to use obscure or underused faces – in this instance FF Ginger, because of its fun schizophrenic Flamboyant variant: a tight squarish sans with exuberant, copperplate script-like swashes tacked on.

The basic version of the technique for creating glowing text couldn't be any simpler. It consists of loading your typographic composition as a selection, and subsequently have this selection gradually fade out.

Duplicate the Gray channel by selecting Duplicate Channel… in the Channel window.

Load the new channel as a selection by selecting Load Selection… in the Select menu.

Apply a Feather of 1 pixel to the selection by selecting Modify: Feather… in the Select menu. Erase the selection simply by pressing the Delete button. You'll notice the letters will expand and fade out ever so slightly.

Keep the selection (do not deselect nor select the channel again), and apply a new Feather to the selection, this time of 2 pixels. Erase the selection again by pressing the Delete button. Keep repeating the Feather and Erase procedure until you have acquired the desired amount of glow. Don't forget to always keep the previous selection and double the amount of pixels of the Feather at each step. The image above shows, from left to right, the result with a Feather of subsequently 1, 2, 4, 8, and 16 pixels.

The end result already looks pretty convincing in simple black and white, but it can be improved. I'd like to give the image an electric blue colour. And this is where the Black Body Color Table I mentioned yesterday comes in.

Create a negative version of the image by selecting Adjustments: Invert in the Image menu. Convert the file to Indexed Colors by selecting Mode: Indexed Colors in the same Image menu.

Apply the Black Body Color Table by selecting Mode: Color Table… in the Image menu. This Color Table displays a palette based on the different colors a black body radiator emits as it is heated – from black to red, orange, yellow, and white. Convert the file to RGB by selecting Mode: RGB in the Image menu.

Create a negative version of the image by selecting Adjustments: Invert in the Image menu. You'll notice the colours are quite garish and much too bright.

To lend the image a more "natural" appearance, desaturate the colours by selecting Adjustments: Hue/Saturation… in the Image menu.

This is the end result – the simple black and white typography now seems to be glowing with electric light.

Pixie Dust

We can even go a step further. As soon as the Wind filter became available in I-can't-remember-which version of Photoshop I started experimenting with that to enhance the glow effect. Start by isolating the central word "Glowing" in the source image and saving that into a duplicate file.

The Wind filter only works in horizontal direction. To obtain a vertical effect rotate the file a quarter turn by selecting Image Rotation: 90°CW in the Image menu. Apply the filter in one direction by selecting Stylize: Wind in the Filter menu.

Apply the Wind filter a second time, but now from the opposite direction. Then again from the original direction, and finally one last time from the opposite direction. Rotate the file back to its original orientation. The image above shows the four steps from left to right.

The resulting effect looks a bit like Northern lights, but I want it to look more like pixie dust. Apply a Diffuse filter by selecting Stylize: Diffuse… in the Filter menu. By specifying Darken Only the dark pixels eat away at the vertical smears and make them break up in sparkling lines.

Add a little bit of glow using the Feather/Delete technique outlined above, but this time one step of 1 pixel is sufficient. And to avoid that the pixie dust interferes too much with the character shapes in the final image, remap the white in this image to 20% gray by selecting Adjustments: Levels… in the Image menu.

Apply the electric blue light effect using the Black Body Color Table technique outlined above.

Now copy the entire second image and paste it into the first image. Set the top layer with the second image to Lighten, and we're done. Variations of this technique consist of applying less or more Feather/Delete steps, or using other Wind styles (Stagger produces interesting results). Sticking to a grayscale image enables you to use the glowing type composition as a selection in a photograph. Apply it to a Photoshop file with transparent background to obtain an independent type composition.

Have fun.