Tutorial: The Worn/Weathered/Stamped Look

There are quite a few quality stamped or distressed fonts available — Frankie and Frankie Dos, Roadkill, Battery Park, Hawksmoor, Chase, Coldharbour, Despatxada, FF Stamp Gothic, FF Confidential, FF Bull, Elephantmen to name but a few. Unfortunately ready-made stamp fonts present a number of drawbacks: repeating characters are identical (unless you have alternate glyphs), and the amount of detail is limited due to restrictions in the possible number of Bézier anchor points per glyph. To remedy this I developed a trick in Adobe Photoshop for distressing type. This technique allows you to apply a convincing stamped or weathered look to any typeface.


Create whatever type composition you need in Adobe Illustrator or directly in Photoshop. Just remember to keep the resolution fairly low, because we’re going to need pixel texture halfway through. I created this example in Illustrator using Tasse Black Extended at 96pt/72pt and opened it in Photoshop as a grayscale image at 72 ppi.

The original untreated type composition

Select the black type areas with the magic wand or by using an alpha channel based on your composition. (Duplicate channel…: Black: invert -> Select…: Load selection: Black copy: new selection) This prevents you from mucking up the white background.

Apply a High Pass to “eat away” the insides of the characters (Filter: Other: High Pass…) Play a bit with the slider: for the example I set the Radius to 10 pixels and applied it twice.

High Pass applied a first time

High Pass applied a second time

Apply a fair amount of Gaussian noise to achieve the “grainy” texture. (Filter: Noise: Add Noise…: Gaussian) For the example the slider was set to an amount of 15.

Gaussian Noise adds

Deselect.

Increase the resolution by resampling. (Image: Image size…: resample image) I doubled the resolution from 72ppi to 144ppi.

Diffuse the image to mask remaining bitmapping of the character shapes (Filter: Stylize: Diffuse…).

Diffuse to remove aliasing

Increase to the desired resolution by resampling. (Image: Image size…: resample image) I doubled the resolution from 144ppi to 288ppi.

Apply a Gaussian blur of 1 pixel to remove the tiny pixels created by the Diffuse filter. (Filter: Blur: Gaussian Blur…)

Get rid of unwanted pixelization with Gaussian Blur

Increase the Brightness and Contrast until you reach the desired amount of “inking”. (Image: Adjustments: Brightness/Contrast…) I set both sliders to +50. As the High Pass filter we applied at the very beginning primarily affects areas with substantial volume, I did a partial selection of the border and applied a higher amount of contrast (+75) to bring out more noise.

Brightness & Contrast brings out the texture

Threshold the image to prepare for conversion to a bitmap image. Here you can also play a bit with the slider until you reach the desired amount of “inking”. (Image: Adjustments: Treshold…) I set the slider at 96.

Add the finishing touch with Treshold

Here’s what it looks like from up close: the effect is perfectly random.

Character shapes that were once identical now look different

Convert to a bitmap image (Image: Mode: Bitmap…: 50% treshold), save as TIFF and import in your lay-out software of choice. You now have a compact sized graphic with transparent background that can be coloured and overlaid on any element in your design. Et voilà, you’ve just used $3,000 worth of computer equipment to emulate the look of a $3 rubber stamp.

The beauty of this technique is that at every step you can vary the settings, thus achieving different textures, and different amounts of wearing and inking. Remember that the initial resolution of the Photoshop type composition is crucial in relation to the crudeness of the end result, so experiment a lot until you get the desired result. Have fun.

44 Comments:

  1. Wow, this is brilliant. I’ve been doing things like this with fonts for ages but this is the best technical explanation I’ve seen on how to reproduce this effect. Mine is usually more random experimentation to create a similar effect.

    Excellent.

    Posted by Lorelle on Oct. 28, 2005
  2. very cool….

    Posted by heather on Oct. 30, 2005
  3. Thanks for sharing the technique Yves. I particularly like “$3,000 worth of computer equipment to emulate the look of a $3 rubber stamp”!

    For some time I had been telling people to use analogue techniques like smeared paint, scratched out toner, and crumpled laserprints (‘scrunching’) and then to scan the results at 300dpi or better. This was in preference to the technique Adobe called ‘Creating a rustic or eroded effect’ on type (p.76 ‘Design Essentials’ Adobe Press 1992) using PhotoShop 2.0′s diffuse filter. I guess insisting on the idea that Photoshop should never be used for setting type — even display type — is just old dogma now.

    Posted by ben archer on Nov. 8, 2005
  4. Yves, you have shown us another reason to be open about working outside our comfort zones and remaining open to possibilities.

    This is a fine technique to enhance creativity and production. Great article. Thanks.

    Posted by GeezerJim on Nov. 21, 2005
  5. Mabuhay, Yves!

    In a serendipititious run of luck, I came across your tip while I was wracking my brains in search of a PhotoShop technique of “aging” fonts. Because of you, I now have a book cover about a manuscript written by a Filipino some 200 years ago — with the appropriate effects on the title text.

    Thanks.

    Posted by dan pinto on Dec. 1, 2005
  6. Glad it was helpful, Dan. If you get a chance, please post or send us a snapshot of your cover.

    Posted by Stephen Coles on Dec. 2, 2005
  7. Great tutorial… any thoughts or tips on how this might work with a t-shirt design?

    Posted by James Blomquist on Dec. 5, 2005
  8. Thanks, this was perfect and easy! I’m sure it will be my new favorite! On some things, the HIGH PASS didn’t work well, so I substituted with ‘render clouds’ to achieve the grayscale variation. I love the final result! :)

    Posted by Heather Dick on Dec. 5, 2005
  9. Interesting. Never thought of going about it that way. I use this effect relatively often, but resort to scanning in photocopied black pages, playing with the levels for some grainy high contrast, and then screening the result on top of the type.

    I think I’d still prefer my method, as it’s more organic, but I can definately see use for this method should lack of time or photocopiers and scanners present itself.

    Posted by Nathan on Dec. 6, 2005
  10. > On some things, the HIGH PASS didn’t work well, so I substituted with ‘render clouds’ to achieve the grayscale variation.

    What I didn’t tell was that I developed this little trick some 10 years ago, when you still needed a significant mass of water drops suspended in the sky to “Render Clouds”. ;^)

    Consider this as a starting point and improve on the technique — I will definitely try out your variation. The main advantage of the High Pass filter is that it erodes more the inside of the shapes, which is very similar to what happens with stamped letters in real life .

    Posted by Yves Peters on Dec. 7, 2005
  11. In answer to Stephen Coles’ query above, check out these plugin filters for PS:

    http://www.mrretro.com/machine_wash_filters_three.html

    They look like a good buy, if you don’t mind the fact that someone else’s hard work makes your designs look good!

    Posted by Joel on Dec. 9, 2005
  12. This is fascinating, especially Cameron Moll’s “Wicked worn look.” I have been seeing a lot of this type of treatment, especially in New Americana Music design…it seems to be a code for Rough Authenticity.

    I still print things out and mash them about on a photocopier…but I will certainly give this technique a try!

    Posted by patrick on May. 24, 2006
  13. i had to bookmark this one. thnx yves!

    Posted by paul hunt on Jun. 23, 2006
  14. I like the comment about the $3000 worth of computer equipment to make the work of a $3 rubber stamp…

    Posted by lola on Nov. 8, 2006
  15. Looks great, best part is, is it doesn’t look fake.

    Posted by Patrick Burt on Aug. 20, 2007
  16. Wow that is very impressive! I am a rubberstamper and my daughter often tries to make stamping and scrapbooking effects in her computer. Im going to forward this on!

    Posted by rubberstamping addict on Dec. 9, 2007
  17. Good tips. Fun to take the end result into Illustrator and play with livetrace. Right on!

    Posted by Cody on Apr. 10, 2008
  18. very cool, very usefull.

    Posted by nora.hussayni on Sep. 11, 2008
  19. Hey! Another use for the Highpass filter. I was doing lots of alpha channel stuff to do that part of the preparations. Thanks for that!

    Posted by Hoof on Nov. 5, 2008
  20. Hey
    Great tut with great effect
    Only thing I can’t figure out how you say it’s transparent?
    When I start i have the text and white bg on one layer
    how do you get the white to be transparent at the end?
    Please help.

    Posted by Girly on Nov. 18, 2008
  21. A 1 bit TIFF is transparent and can be coloured in Adobe InDesign and Illustrator, and QuarkXPress. But really, we produce these tutorials, yet it’s up to you to know the possibilities of the software you use. We are no help desk, ;)

    Posted by Yves Peters on Nov. 18, 2008
  22. !SKILLS! thanks for imparting the wisdom. much appreciated.

    Posted by dan fish on Jan. 19, 2009
  23. Thanks Yves, very cool effect!

    Posted by Leslie on Feb. 11, 2009
  24. thank you for this!!
    all other rubber stamp tutes are completely rubbish.

    Posted by uglyface on Feb. 17, 2009
  25. Peter, it looks like something has gotten garbled in this tute. There is a pice of a sentence (& Contrast brings out the texture” />) just hanging onto the graphic that is just above the paragraph that begins, “Threshold the image…”

    Can you rectify this for us? Is it part of an instruction needed to complete this tute, or is it extrainious matter?

    Thank you for all your grat tutes.

    Posted by Mike on Feb. 19, 2009
  26. I am sorry but I am not very much impressed with the final result. I have seen some other tutorials for “Stamped Look” and they were OK but this one doesn’t look much like a “Stamp”.

    Posted by Decent Discussions on Jun. 2, 2009
  27. I obviously can’t please everyone, but fortunately you have those other tutorials as a point of reference. Good for you. :)

    Posted by Yves Peters on Jun. 2, 2009
  28. This is a great tutorial, but it is really so much easier to make using Xara Xtreme. Just the text tool, rectangle tool and a fractal plasma transparency with a profile of -0.48 and -1. The advantage is it is a vector. You can also export it as a .png file with alpha to preserve the transparency.

    Posted by Bob Taylor on Jun. 26, 2009
  29. hey yves, very nice tute, i’ll have to try it out!

    the only things i’d suggest is that ‘now’ (3 years on) Adobe Illustrator is much better at vectorising bitmaps, so you couls take the 1-bit tiff and turn it into a vector pretty much with 1 click.

    thanks again :-)

    Posted by Simon Robertson on Jul. 25, 2009
  30. Nice and easy. Just they way I like it.
    Thanks for sharing this helpful technique.

    Posted by Eric on Aug. 6, 2009
  31. This worked great – thanks!

    Posted by Cynthia on May. 19, 2010
  32. Thanks for this, once read never forgotten! Ill add it to my arsenal of design tricks

    Posted by Stefan on Jan. 5, 2011
  33. Thank you very much for taking the trouble to so clearly detail the steps. I thought it was easier to follow than a lot of tuts, with great results. If my project pushes through, I’ll come back and post a photo for you :)

    Posted by Anna on Jun. 14, 2011
  34. Thank you very much for taking the trouble to so clearly detail the steps.

    I cook. I hate it when at some point in the recipe I notice: “Hey, where did the tomatoes go?” ; )

    Posted by Yves Peters on Jun. 15, 2011
  35. The high pass didn’t work for me. Turned the text all gray… any ideas on why this is happening?

    Posted by mg on Dec. 13, 2011
  36. Great tutorial, Yves, though I’m also having trouble getting the high pass to work. I get no variance in tone at any setting – only all gray. Would love to sort it out, as your stamp effect is the most realistic I’ve yet seen.

    Posted by Darren on Apr. 23, 2012
  37. I am just beginning to use Photoshop; this tutorial was very clear and really helped me create a cool and unique style that I can use in presentations. Thank you!

    Posted by Wayne on Jun. 5, 2012
  38. the highpass doesnt work

    Posted by isaac on Jun. 7, 2012
  39. The trick to high pass, guys (I just figured it out!): High Pass does NOT work on text on a transparent layer. He managed to forget that part of it. I don’t know how since all text by default is isolated in a transparent layer!

    I too was getting all grey and then decided to try merging the text down onto my background. I know, sounds really dumb by photoshop standards, to ruin a perfectly good transparency. After I did that, I selected the black text like he said and high pass turned out a charm. I had to turn my radius up since my letters were big, but it definitely worked.

    To recap: merge your text down onto the white background, only then will high pass work. CS5.

    Posted by MadH on Aug. 2, 2012
  40. Thank you very much for this tutorial!

    Posted by Thomas Rast on Dec. 9, 2012
  41. Invaluable piece of information, cannot express my gratitude. Grazie mile

    Posted by Cuzen on Mar. 27, 2013
  42. Excellent tut! I’m having trouble with the high pass filter though. When applying even if it is at 0.1 pixels it still covers the entire thing and I dont get that nice shady look you have. :(

    Posted by Ant on Sep. 2, 2013
  43. I’m having same problem as Ant. Now with CS6, I wonder if things are treated differently. anyone with any suggestions?

    Posted by Shane on Nov. 17, 2013
  44. Just a note but Isaac posts the solution to the High pass conundrum further up the page. You need to have it on a white background or it won’t work.

    You can then use the same trick to – reselect your type and make it whatever you need, or export it as a BMP. Make sure you re-select and delete your background before you change the mode to bitmap 50% threshold because you can’t do it once it is a bmp. (least as I could see)

    Thanks for keeping this tutorial live ! I check back often when I miss or forget a step and have used it a bunch!!

    Posted by dean watson on Nov. 29, 2014

Post a comment:

  •  

The FontFeed

The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.

Archives

Subscribe

The FontFeed RSS The FontFeed Comments RSS