Tutorial: The Worn/Weathered/Stamped Look

There are quite a few qual­ity stamped or dis­tressed fonts avail­able — Frankie and Frankie Dos, Road­kill, Bat­tery Park, Hawksmoor, Chase, Cold­har­bour, Despatx­ada, FF Stamp Gothic, FF Con­fi­den­tial, FF Bull, Ele­phant­men to name but a few. Unfor­tu­nately ready-​made stamp fonts present a number of draw­backs: repeat­ing char­ac­ters are iden­ti­cal (unless you have alter­nate glyphs), and the amount of detail is lim­ited due to restric­tions in the pos­si­ble number of Bézier anchor points per glyph. To remedy this I devel­oped a trick in Adobe Pho­to­shop for dis­tress­ing type. This tech­nique allows you to apply a con­vinc­ing stamped or weath­ered look to any typeface.


Create what­ever type com­po­si­tion you need in Adobe Illus­tra­tor or directly in Pho­to­shop. Just remem­ber to keep the res­o­lu­tion fairly low, because we’re going to need pixel tex­ture halfway through. I cre­ated this exam­ple in Illus­tra­tor using Tasse Black Extended at 96pt/72pt and opened it in Pho­to­shop 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 chan­nel based on your com­po­si­tion. (Dupli­cate chan­nel…: Black: invert -> Select…: Load selec­tion: Black copy: new selec­tion) This pre­vents you from muck­ing up the white background.

Apply a High Pass to “eat away” the insides of the char­ac­ters (Filter: Other: High Pass…) Play a bit with the slider: for the exam­ple 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 Gauss­ian noise to achieve the “grainy” tex­ture. (Filter: Noise: Add Noise…: Gauss­ian) For the exam­ple the slider was set to an amount of 15.

Gaussian Noise adds

Des­e­lect.

Increase the res­o­lu­tion by resam­pling. (Image: Image size…: resam­ple image) I dou­bled the res­o­lu­tion from 72ppi to 144ppi.

Dif­fuse the image to mask remain­ing bitmap­ping of the char­ac­ter shapes (Filter: Styl­ize: Diffuse…).

Diffuse to remove aliasing

Increase to the desired res­o­lu­tion by resam­pling. (Image: Image size…: resam­ple image) I dou­bled the res­o­lu­tion from 144ppi to 288ppi.

Apply a Gauss­ian blur of 1 pixel to remove the tiny pixels cre­ated by the Dif­fuse filter. (Filter: Blur: Gauss­ian Blur…)

Get rid of unwanted pixelization with Gaussian Blur

Increase the Bright­ness and Con­trast until you reach the desired amount of “inking”. (Image: Adjust­ments: Brightness/Contrast…) I set both slid­ers to +50. As the High Pass filter we applied at the very begin­ning pri­mar­ily affects areas with sub­stan­tial volume, I did a par­tial selec­tion of the border and applied a higher amount of con­trast (+75) to bring out more noise.

Brightness <span class=& Contrast brings out the texture" />

Thresh­old the image to pre­pare for con­ver­sion to a bitmap image. Here you can also play a bit with the slider until you reach the desired amount of “inking”. (Image: Adjust­ments: Tresh­old…) I set the slider at 96.

Add the finishing touch with Treshold

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

Character shapes that were once identical now look different

Con­vert to a bitmap image (Image: Mode: Bitmap…: 50% tresh­old), save as TIFF and import in your lay-​out soft­ware of choice. You now have a com­pact sized graphic with trans­par­ent back­ground that can be coloured and over­laid on any ele­ment in your design. Et voilà, you’ve just used $3,000 worth of com­puter equip­ment to emu­late the look of a $3 rubber stamp.

The beauty of this tech­nique is that at every step you can vary the set­tings, thus achiev­ing dif­fer­ent tex­tures, and dif­fer­ent amounts of wear­ing and inking. Remem­ber that the ini­tial res­o­lu­tion of the Pho­to­shop type com­po­si­tion is cru­cial in rela­tion to the crude­ness of the end result, so exper­i­ment a lot until you get the desired result. Have fun.

ShareThis

28 Comments:

Wow, this is bril­liant. I’ve been doing things like this with fonts for ages but this is the best tech­ni­cal expla­na­tion I’ve seen on how to repro­duce this effect. Mine is usu­ally more random exper­i­men­ta­tion to create a sim­i­lar effect.

Excel­lent.

Posted by Lorelle on Oct. 28, 2005

very cool….

Posted by heather on Oct. 30, 2005

Thanks for shar­ing the tech­nique Yves. I par­tic­u­larly like “$3,000 worth of com­puter equip­ment to emu­late the look of a $3 rubber stamp”!

For some time I had been telling people to use ana­logue tech­niques like smeared paint, scratched out toner, and crum­pled laser­prints (‘scrunch­ing’) and then to scan the results at 300dpi or better. This was in pref­er­ence to the tech­nique Adobe called ‘Cre­at­ing a rustic or eroded effect’ on type (p.76 ‘Design Essen­tials’ Adobe Press 1992) using Pho­to­Shop 2.0’s dif­fuse filter. I guess insist­ing on the idea that Pho­to­shop should never be used for set­ting type — even dis­play type — is just old dogma now.

Posted by ben archer on Nov. 8, 2005

Yves, you have shown us another reason to be open about work­ing out­side our com­fort zones and remain­ing open to pos­si­bil­i­ties.

This is a fine tech­nique to enhance cre­ativ­ity and pro­duc­tion. Great arti­cle. Thanks.

Posted by GeezerJim on Nov. 21, 2005

Mabuhay, Yves!

In a serendip­i­ti­tious run of luck, I came across your tip while I was wrack­ing my brains in search of a Pho­to­Shop tech­nique of “aging” fonts. Because of you, I now have a book cover about a man­u­script writ­ten by a Fil­ipino some 200 years ago — with the appro­pri­ate effects on the title text.

Thanks.

Posted by dan pinto on Dec. 1, 2005

Glad it was help­ful, Dan. If you get a chance, please post or send us a snap­shot of your cover.

Posted by Stephen Coles on Dec. 2, 2005

Great tuto­r­ial… any thoughts or tips on how this might work with a t-shirt design?

Posted by James Blomquist on Dec. 5, 2005

Thanks, this was per­fect and easy! I’m sure it will be my new favorite! On some things, the HIGH PASS didn’t work well, so I sub­sti­tuted with ‘render clouds’ to achieve the grayscale vari­a­tion. I love the final result! :)

Posted by Heather Dick on Dec. 5, 2005

Inter­est­ing. Never thought of going about it that way. I use this effect rel­a­tively often, but resort to scan­ning in pho­to­copied black pages, play­ing with the levels for some grainy high con­trast, and then screen­ing the result on top of the type.

I think I’d still prefer my method, as it’s more organic, but I can defi­nately see use for this method should lack of time or pho­to­copiers and scan­ners present itself.

Posted by Nathan on Dec. 6, 2005

> On some things, the HIGH PASS didn’t work well, so I sub­sti­tuted with ‘render clouds’ to achieve the grayscale vari­a­tion.

What I didn’t tell was that I devel­oped this little trick some 10 years ago, when you still needed a sig­nif­i­cant mass of water drops sus­pended in the sky to “Render Clouds”. ;^)

Con­sider this as a start­ing point and improve on the tech­nique — I will def­i­nitely try out your vari­a­tion. The main advan­tage of the High Pass filter is that it erodes more the inside of the shapes, which is very sim­i­lar to what hap­pens with stamped let­ters in real life .

Posted by Yves Peters on Dec. 7, 2005

In answer to Stephen Coles’ query above, check out these plugin fil­ters for PS:

http://​www.​mrretro.​com/​m​a​c​h​i​n​e​_​w​a​s​h​_​f​i​l​t​e​r​s​_​t​h​r​e​e​.html

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

Posted by Joel on Dec. 9, 2005

This is fas­ci­nat­ing, espe­cially Cameron Moll’s “Wicked worn look.” I have been seeing a lot of this type of treat­ment, espe­cially in New Amer­i­cana Music design…it seems to be a code for Rough Authen­tic­ity.

I still print things out and mash them about on a photocopier…but I will cer­tainly give this tech­nique a try!

Posted by patrick on May. 24, 2006

i had to book­mark this one. thnx yves!

Posted by paul hunt on Jun. 23, 2006

I like the com­ment about the $3000 worth of com­puter equip­ment to make the work of a $3 rubber stamp…

Posted by lola on Nov. 8, 2006

Looks great, best part is, is it doesn’t look fake.

Posted by Patrick Burt on Aug. 20, 2007

Wow that is very impres­sive! I am a rub­ber­stam­per and my daugh­ter often tries to make stamp­ing and scrap­book­ing effects in her com­puter. Im going to for­ward this on!

Posted by rubberstamping addict on Dec. 9, 2007

Good tips. Fun to take the end result into Illus­tra­tor and play with live­trace. Right on!

Posted by Cody on Apr. 10, 2008

very cool, very use­full.

Posted by nora.hussayni on Sep. 11, 2008

Hey! Another use for the High­pass filter. I was doing lots of alpha chan­nel stuff to do that part of the prepa­ra­tions. Thanks for that!

Posted by Hoof on Nov. 5, 2008

Hey
Great tut with great effect
Only thing I can’t figure out how you say it’s trans­par­ent?
When I start i have the text and white bg on one layer
how do you get the white to be trans­par­ent at the end?
Please help.

Posted by Girly on Nov. 18, 2008

A 1 bit TIFF is trans­par­ent and can be coloured in Adobe InDe­sign and Illus­tra­tor, and QuarkX­Press. But really, we pro­duce these tuto­ri­als, yet it’s up to you to know the pos­si­bil­i­ties of the soft­ware you use. We are no help desk, ;)

Posted by Yves Peters on Nov. 18, 2008

!SKILLS! thanks for impart­ing the wisdom. much appre­ci­ated.

Posted by dan fish on Jan. 19, 2009

Thanks Yves, very cool effect!

Posted by Leslie on Feb. 11, 2009

thank you for this!!
all other rubber stamp tutes are com­pletely rub­bish.

Posted by uglyface on Feb. 17, 2009

Peter, it looks like some­thing has gotten gar­bled in this tute. There is a pice of a sen­tence (& Con­trast brings out the tex­ture” />) just hang­ing onto the graphic that is just above the para­graph that begins, “Thresh­old the image…”

Can you rec­tify this for us? Is it part of an instruc­tion needed to com­plete this tute, or is it extrain­ious matter?

Thank you for all your grat tutes.

Posted by Mike on Feb. 19, 2009

I am sorry but I am not very much impressed with the final result. I have seen some other tuto­ri­als 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

I obvi­ously can’t please every­one, but for­tu­nately you have those other tuto­ri­als as a point of ref­er­ence. Good for you. :)

Posted by Yves Peters on Jun. 2, 2009

This is a great tuto­r­ial, but it is really so much easier to make using Xara Xtreme. Just the text tool, rec­tan­gle tool and a frac­tal plasma trans­parency with a pro­file of -0.48 and -1. The advan­tage is it is a vector. You can also export it as a .png file with alpha to pre­serve the trans­parency.

Posted by Bob Taylor on Jun. 26, 2009

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

The FontFeed RSS
The FontFeed Comments RSS

Close