How To Create Distressed Type

For a while, this blog used an image for the blog title using an un-distressed font. Unfortunately, this image seemed shockingly black — and just a little too crisp and clean.

Blog title in Grecian Empire font using Photoshop Text tool

After experimenting with a number of different methods for distressing fonts, the following procedure was ultimately settled upon:

  1. Open Photoshop, and create a new page 610 px wide X 72 px high.
  2. Select the Text tool and type out, “Chou Seh-fu Blog,” in the Grecian Empire font at 70 px. This creates the original (un-distressed type).
  3. Right-click on the text layer and choose Duplicate.
  4. Turn off the visibility of the original text layer. (Keep it in case you make an error & need to start over!)
  5. Right-click on the duplicate layer and choose Rasterize Type.
    Grecian Empire font with ordinary type (Photoshop screenshot)
  6. Select Filter > Blur > Gaussian and set filter to a 1 px radius. Click OK.Gaussian blur of type (Photoshop screenshot)Gaussian blur of blog title
  7. Select Filter > Sharpen > Smart Sharpen, and set the filter as follows:
    Amount: 500%
    Radius: 0.5px
    Remove: Gaussian BlurSmart Sharpened type (Photoshop screenshot)Smart Sharpened blog title
  8. Duplicate this layer and turn off the visibility of the top layer.
  9. Select the lower (original rasterized) layer.
    Duplicated layer (Photoshop screenshot)
  10. Click on the layer thumbnail and choose Bevel > Emboss > Texture. Choose Clouds, and use the following settings:
    Scale: 95%
    Depth: 100%
  11. Click OK.
    Cloud texture applied to type (Photoshop screenshot)Cloud texture on blog title
  12. Choose Filter > Noise > Add Noise. Use the following settings:
    Amount: 15%
    Distribution: Gaussian
    Gaussian Noise added to type (Photoshop screenshot)Gaussian Noise on blog title
  13. Choose Filter > Filter Gallery > Artistic > Plastic Wrap. Use the following settings:
    Highlight Strength: 10
    Detail: 12
    Smoothness: 11.
  14. Click OK.
    Plastic Wrap applied to type (Photoshop screenshot)Plastic wrap on blog title
  15. That’s actually a little too much. To dial it back a bit, click on the top layer and make it visible again. Set its Opacity to 8%.
  16. Click OK.
    Type darkened slightly (Photoshop screenshot)Distressed type blog title slightly darkened

Postscript: It is a simple matter to further transform this black-and-white image into color.

  1. Select Image > Mode > Grayscale.
  2. Choose Merge and then Discard.
  3. After this, select Image > Mode > Duotone.
  4. Choose Custom and Monotone, clicking on the color picker for the color of your choice.
  5. Now click OK.
    Blue distressed type blog title
  6. Select Image > Mode > RGB. (The file will not be able to save as a PNG otherwise).
  7. Save file with a different name so that the previous (black ink) version is not overwritten!
This entry was posted in Photoshop tutorials. Bookmark the permalink.