Grunge Text

684

Victor Kabuye

349

93689

13 December, 2011

Description

Having searched around for a grunge effect for text in Fireworks CS5 and not finding anything I really liked, I decided I would do one myself, and realizing it was pretty straightforward, I wrote up a tutorial for the procedure. 

Requirement

All Fireworks versions.

Tutorial

Final Product What You'll Be Creating



Step 1

Create a new file with a transparent background in Fireworks, I used dimensions of 500×500 px for this tutorial. You'll need a texture for the background, paint on canvas or a rusted metal plate will do. I used what appears to be a wall with peeling paint (texture no. 5) from here.



Monochrome textures seem to work best for this particular purpose. If you have a color image that you want to use as a texture, convert it to black and white first.Import the image and plunk it down on the canvas. You could resize the image to fit your canvas, but it's not strictly necessary.Change the bitmap layer to transparent black & white using the Filters>Other>Convert to Alpha

Step 2

Add a new background layer by using the rectangle tool. Use a light grey for the fill of the new backgound layer. I have used #CCCCCC.Use the Modify>Arrange>Send to Back command to place it beneath the bitmap. Adjust its size to the dimensions of your canvas and change the x and y values to '0' using the property inspector.



Step 3

Next, insert your text using the Text tool. Use a thick font so you will have more area for your grunge pattern variations to show through. I used Practique in black. You could use the property inspector to select faux bold if you want to make the text even thicker. Feel free to experiment.



Step 4

Duplicate your text layer by dragging the layer thumbnail to the little plus sign next to the trashcan at the bottom-right of your 'Layers' panel, you will be using the top text layer for the grunge texture.



Use the property inspector to change the fill of the top text layer from 'solid' to 'pattern', scroll down to the bottom of the choice list for 'Other...' then navigate to, and select the same image file (pattern) that you used for the background texture bitmap.



Step 5

While still on the top text layer, use the fill handles to resize the pattern so that it is the same size, and bottom-left corner matches the position of your background texture layer. You may have to zoom out to see the handle tips if your pattern file has larger dimensions than your canvas. Aligning bottom-left will prevent the repeat-lines of your pattern from showing, since Fireworks places the pattern's bottom left corner in the dead center of your text-box.
Again, resizing is not a strictly necessary step, it just helps the text pattern match the background, as if the text color was 'rubbed away' in the rough spots, to the background texture beneath.



Step 5

Once you have got the pattern placed where you want it for a nice texture in the text, change the top text layer blend mode to 'Linear Light'. You can experiment here too, the 'hard light' and 'pin light' blending-modes might work also. This allows the dark color of the text layer beneath to show through the grunge texture.



Final Image



Where to go from here:

Download