Glowing Text

With the premiere issue of The FontSite we’re starting a series of articles showing techniques in computer art production. The series will mostly cover print graphics but as you may know, print graphics can be converted to web graphics quite easily. Over the past several years we’ve come across countless techniques for creating virtually all types of graphics. We hope to share some of those techniques with you in this series.
The first item up for discussion is making text glow. This example focuses on text but can be used on graphics as well. We’re going to use
Adobe Photoshop™. Photoshop is the one and only image manipulation program to use. It doesn’t matter if you’re using Macintosh® or Windows®, purchase a copy and learn how to use Photoshop.
Glowing text can be accomplished with a multitude of plug-ins. But doing it yourself allows for much more control and usually gives you better results.

TIP
If you use Illustrator, convert the type to outline paths before placing it into Photoshop. Sometimes Illustrator text placed into Photoshop can lose ascenders or descenders (see Fig 1). This falls under the category of "not a good thing."

 

TIP
If you prefer to use QuarkXPress®, any XPress EPS file can be placed with complete accuracy into Photoshop 4. But watch out, Photoshop 3 has problems with XPress EPS files.

 

 

FontSite Archives

Main Page

First you need to create some type. This can be done directly in Photoshop but we prefer to use Adobe Illustrator® and then place the text into Photoshop (see the Tips at the right). After the type is created, make sure you have a transparent background. Go to File > Preferences > Transparency and set Grid Size to Small, Medium or Large. If you have a transparent background you will be able to see a checkerboard pattern around the type. If you don’t you will need to recreate the type in a layer that has a transparent background.

Figure 1


FIG 1

Once your text is created properly we need to create a background color so we can see the glow. Create a layer just below the text layer. Set your Foreground Color to a dark color. Don’t use the same color that’s used for the type or you won’t be able to see the type after you create the background. Select the entire background by choosing Select > All and then type Option-Delete (Macintosh) or Alt-Delete (Windows). This should fill the entire layer with the foreground color.
We now wish to turn the type layer into a selection. The shortcut for this is while holding down the
Command key (Macintosh) or Control key (Windows), click on the text layer in the Layer Palette (see Fig 2). You should see the selection come up around the text.

Figure 2


FIG 2

NOTE: The key combination noted here is for Photoshop 4. If you are using Photoshop 3, use the Option key (Macintosh) or Alt key (Windows). We highly recommend upgrading to 4.0. It’s well worth the money.
With the selection still active, make a new layer between the text layer and the background color layer and make sure that this new layer is now selected. Make your foreground color white, or the color you want to become the glow. Yellow or green can also be very nice. Now select
Edit > Stroke. In the dialog box you need to set the Width in pixels (usually not more than 5), Location to Outside and Blending at 100% with a Mode of Normal. Also make sure Preserve Transparency is not selected in the Layer Palette. Then click OK. This will create a stroke around the text in the foreground color (see Fig 3).

FIgure 3


FIG 3

Now we can run a Gaussian Blur on the stroke around the type. Select Filters > Blur > Gaussian Blur. Experiment with the amount of blur. Start with 5 and go from there.
If you wish to increase the intensity of the glow you can create a selection from the Glow layer. Like before, hold down the
Command key (Macintosh) or Control key (Windows) and click on the Glow layer. This will load the blurred area around the text as a selection. You can now fill in that area with the same color you used for the first stroke.
This technique adds a little more control to glows because the blurred edges that create the glow start out away from the edge of the text (see Fig 3). This gives a much better look to the overall effect.

 

 

Default Folder

Download Default Folder Here

There’s a large number of software add-ons, plug-ins, utilities and stand-alone programs available and it’s almost impossible to keep up with them all. In this section we highlight one piece of software we believe any graphic or production artist shouldn’t be without.
This month it’s a system add-on (control panel to be exact) called
Default Folder, by St. Clair Software. Default Folder is very small, it’s MacOS8 compatible and is shareware ($25).
I was a Now Utilities user for many years and regarded Now as being the most useful piece of productivity software available (until it became a bloated, over-featured, bomb-infested mess). And the most useful part of the whole utility was Super Boomerang. Ever since I removed Now Utilities from my hard drive, I’ve sorely missed Super Boomerang. But now, Default Folder replaces Super Boomerang very nicely.
If you are not familiar with what Default Folder can do, click on the download link to the left and spend a few minutes reading up on it. It is well worth the read. For a quick overview read on.
Basically Default Folder extends the functionality of the standard
Open and Save As dialog boxes on the Mac. It allows you to quickly navigate through your hard drive via a pop-up menu and keyboard equivalents. It’s a great system add-on that we promise, once you try it, you’ll wonder how you trolled through your hard drive before. You can lock in often-used folders so you can quickly return to them. The latest version of Default Folder even adds keyboard equivalents to the folders you’ve added to the locked folders list.
Byte for byte this little piece of software is one of the best system add-ons out there.