SixThings

In this edition of Rapid Fire, we’ll be making use of a particular design resource in a not-so-conventional manner. Utilizing readily-available corroded fonts, we can achieve a marker- or chalk-stroke effect with which to frame or emphasize our design elements in Adobe® Fireworks®.

Prepare Your Fontface

To start, obtain a fontface that has corroded edges. For this tutorial, I used Pistolgrip from DaFONT; it has some nice corrosion, albeit at small font sizes only. Once you have your choice of font downloaded and installed, open up your target graphic (logo, graphic element, stylized text, etc.) in Adobe® Fireworks®. Make sure to give yourself enough room to work around by adjusting the canvas size (Modify > Canvas > Canvas Size…).

Note: the sample graphic used in this tutorial is from an event logo I did for a client, as showcased in the upcoming new version of Brown Battery Studios.

Use the Text Tool to enter the letters A-Z along the bottom of your canvas. This will serve as your visual guide to selecting the letters that will form the strokes of the outline.

If The Letter Fits…

This is where we start to visualize which letterforms fit into the various corners, bends, and edges of the graphic. In the example, we start by using the Text Tool to type a ‘Y’ that will fit nicely in the lower left part of the graphic (where the torso and the right arm form a wide angle).

With the text still selected, bring it to a layer just below the graphic. Use the Scale Tool to resize, rotate and align the left edge of the ‘Y’ to the edge of the graphic.

Sharp Edges First

Continue inserting letters in this manner, concentrating first on the sharp and protruding edges of the graphic. These edges are usually the ones that require more attention to detail. ‘V’s and ‘I’s are great choices for this task.

Tip 1: Copy-paste from the letters that you already have below the graphic layer, so that all subsequent letters you place will also be below this layer. You may want to lock the graphic layer for convenience.

Tip 2: Try flipping a letter around (Modify > Transform > Flip Horizontal / Flip Vertical) for more letterform choices.

Now that we’re getting the drift, insert even more letters to close off the edges. From here onwards, I colored the newly-inserted letters a bright pink for illustration purposes. Notice the use of ‘A’, ‘E’, and ‘L’, and that we’re avoiding round-edged letters to achieve an edgier effect.

Tip 3: Make sure that the differences in scale of the letters do not vary greatly, otherwise you’ll end up with an uneven level of corrosion across your outline.

Wrap Up And Patch Up

Proceed with closing off the rest of the edges by inserting fuller letters like ‘E’, ‘F’, and ‘P’. By this point, you should be able to see the overall effect of the outlines on your graphic.

If like in the example, your graphic has some empty spaces within, you’ll want to cover them up. Although we can take a Pen Tool and plot a shape that will quickly cover those holes, we will instead opt for more letters. This way, we still leave little corroded holes that add to the effect. I used a bunch of ‘I’s and a couple of ‘L’s for this, as they are the most solid and predictable.

Done And Dirty!

And there you have it: dirty, eroded, hard strokes that will put solid outlines to shame. Experiment with different other fontfaces (handbrushed fonts come to mind) to achieve a variety of effects.

Need a quick sample to study? Download the source PNG + font file (tutorial03.zip, 328KB) for this tutorial.

Related posts

1. Rapid Fire #6: Sticky Notes
2. Rapid Fire #10: Circular Shadows & Highlights
3. Rapid Fire #7: Shiny Ribbon