/Graphics/ Distressing regular fonts

25/02/2009 | Filed under Develop > Graphics

Give your site a unique look by personalising its typography. Elliot Jay Stocks reveals how you can use Photoshop to distort your fonts beautifully

Many fonts, often available to download for free, provide a quick and easy way of using distressed typography in your projects. The style is more popular than ever, and designers are hungry for typefaces that break the rules and add a distorted flair to their projects. However, the fact that they’re fonts usually means that each ‘a’ will look the same, each ‘b’ will look the same, and so on.

On occasion a font might contain several glyphs (alternate versions of the same character), but it’s often very easy for an edgy font to become rather bland – even though distressed lettering is meant to be subversive.

To counteract this, why not make your own distorted, ruined, decaying typography? (You may have noticed by now that I like to destroy things!) In this tutorial we’ll focus on creating a title and navigation graphics for a hypothetical website, and each title and character will be unique because it’ll be distorted by hand instead of relying on a typeface.

By making our own custom Photoshop brushes we’ll be creating reusable tools that we can apply to other projects, and by taking the final adjustments over to Illustrator, we can exercise some tighter control over the output and make the files usable at a variety of resolutions.

About the author:

Name: Elliot Jay Stocks
Site: elliotjaystocks.com
Areas of expertise: Design, CSS, web standards, Photoshop
Clients: Carsonified, The Beatles
Least-loved household chore Ironing

Click here to download the support files

Click here to download tutorial PDF

 

Comments

cagwait / 17/03/2009 / 04:51 / http://www.cagwait.com

Good article. Thanks for posting this

Kp / 22/04/2009 / 00:59 / http://www.backcountrygeneration.com/

Cools stuff man, looks great.

Simon Hamp / 21/07/2009 / 00:57 / http://Http://flipstorm.co.uk

A brilliant tutorial! Thanks forkeeping this online guys! I will definitely be trying this out. Design isn't easy when you're a programmer/developer, but it's something I'd love to improve so here goes... Wish me luck!

Salamander / 26/02/2010 / 11:17 / http://www.google.com

You just gave me a great idea. Thanks for the post, it's really helpful.

Add a comment

Your name:


Your email: (Not displayed)


Your website: (optional)


Enter your comment here:

.net magLatest issue Buy it

Issue 206

Discover the future of web standards with our guest editor, Jeffrey Zeldman Find out more ...

» Fantastic subscription offers
» Buy issue 206
» Get a corporate subs
» Join us on Facebook

 
Signup for our newsletter

Enter your email address and start receiving our new-look weekly email newsletter!

 
 

Surreal CMS

insureandgo

Euk