Worn Look Tutorial


In this tutorial we will take a look at creating one of those small details which can really make a design. Once you have read this tutorial it is our hope that if you ever have to create a "grundgy" looking design you will automatically adopt this technique for areas of it. We are going to take a look specifically at applying rough texture to type but the way in which we do this can also be applied to imagery, logos and anything else that may need to look worn out or distorted.

This is a simple technique but one we have found must useful to know about as it gives you another card to play in a creative brief. Also we hope that this tutorial sparks off other ideas and that others can write in and let everyone know about how they create worn out graphics

For this little exercise you will need a computer, vector and bitmap software (we suggest Adobe Illustrator and Photoshop), an old fork or blunt instrument, and a scalpel or sharp knife.

01. Vector becomes the Victor

Vector and Final Result

First start by creating your desired text - we have done this text using Adobe Illustrator but any package will do. We are going to transform this clean vector type on the left, into the worn grungy vintage looking text on the right. It is always important to keep in mind the end result in projects like this, as the text still needs to be legible (unless you really want to go wild!). Have a think about which areas could do with more of a worn appearance then others. The last thing you want is to have to redo it from scratch when you realise that you've completely destroyed a word.

So print out the text you have created. The better the paper the easier to wear it down without it tearing it. We have used quite light weight paper in this tutorial (80gsm) because this is most common but would recommend higher. Card is really good because you can scrape the ink away from the top and still have paper underneath.

02. Scalpel Scratches

Using the scalpel

We always find that using a combination of techniques as always better then simply using one on its own. In this case we will start with some defined scratches and then give a worn look a little later.
Use the scalpel to add scratches. Don't overdo it and try not to actually cut the paper - what we are aiming for is to simply take away the surface of ink. After a few minuets the piece should start taking shape. Now to wear it out!

03. Fork Friction

Using the Fork

Time to go to town. Use your blunt instrument (We've used a fork) to take away the top surface of the ink in key places. Change the areas in which you do this and try to make it look as natural as possible. If you do put holes in the paper don't worry - but try not to as we need to keep it in one piece. Try to make the result organic and natural looking - not manufactured and fake.

04. Result

The result

After a few minuets your results should look similar to the above. Go back in with the scalpel if you feel the need but make sure you don't over do it. Experience will tell you when enough is enough. So - now we have a pretty cool piece of artwork eh? We are not finished yet though - one last thing remains.

05. Scan and Adjust

The final picture

Scan it in (see image on the left) then use brightness, contrast and the levels in Photoshop to give it the effect on the right hand side.

****Added Note****
The brightness and contrast can be found in from the top level Photoshop menu. go to "Image" > "Adjustments" > "Brightness/Contrast". It really "does what it says on the tin" and if you find it a little too primitive finish your effect off using the levels palette ("option" and "L"). Have a play with the sliders - what you really want to be doing is bringing the arrows to the foot of the "hills".

Now we are there! We have created a worn and vintage looking text in under 15 minutes!

I hope you would agree that the effect is very powerful and works well on a layer with the "multiply" effect on it. Try it.

So get creative and remember a computer is not the only thing you need to produce hot graphic styles. Sometimes going back to basics can bring some really interesting results...

Comments

A really in depth article. I normally don't create effects in this manner but this has opened up a whole new area of design for me.

Nice one.

A trick I like to do is photocopy photocopies, over and over again. A different, albeit less distressed, look.

Forgot to mention this:

then use brightness, contrast and the levels in Photoshop to give it the effect on the right.

Is there any further information on this? This could be a whole new tutorial in itself really I guess. Keep pumping out the good stuff.

Yes - good point Andrew. Please see the "added note" which I hope gives you a little more insight.

Nico - great tip

I've found that the spatter filter and a layer mask in Photoshop will work in a pinch. You can get it to look pretty good with a bit of tweaking and a couple attempts to get better "spatters."

This is amusing, I mean would someone really do all that work just to get the worn look. Im sure there must be an easier way to do this.

It only takes 15 mins Jake - and this effect is quite stunning when used effectively. There are many ways to create this but in my mind the only way to create a natural looking vintage look is to get down an dirty. I'd welcome any who have got simpler ways of creating this effect to write in...

Photoshop+Brushes+Mask and few minutes

Fortis, it wouldn't create such an organic effect or be as random. Also this effect only takes a few minutes and is great fun if you like getting your hands dirty.

Also, after scratching it up a bit, you can use a doubled over piece of tape to 'dot' here and there to pull toner/ink up.

I have also used Bestine or rubbing alcohol and wiped it over a few times for slight ink smearing to enhance the effect as well.

garcias !!!!!

AWESOME AWESOME WORK! Thanks for the tutorial. I really appreciate the help :)

Ðаану-ка рбеÑтки голоÑуем!!!

ПроизнавайтеÑÑŒ пркоазники и владельццы Ñайта www.attitudedesign.co.uk ))))

ЧТО вы будете делатьо Ñтим летома?!

Thanks Matt....I really think that you've got it! I love the way you do not just use the computer... it would be very bad for all creative people and designers if the computer could do all their effects!!!

Well done! I've just found you but I think I will check your website regulary ;)

Bendzalica

I really like this tutorial. So cool when some things in the design process is done "by hand". Sand paper would maybe give a cool effect as well. Never tried it, but I would guess that could look cool. Please post more tutorials in the future.

www.attitudedesign.co.uk - The most necessary site !

Thank you, I will add it to my bookmarks

Best Regards

Dolly

good tips fren, thanks for your informations

I've been wanting to know how to do this for years! Thanks a lot, very helpful. Now i'm gonna be able to make all sorts of cool stuff!

hi there
your toturial is really great. I translated your article in my blog.
here
http://photo-art.mihanblog.com/post/128
also i linked your website at the end of the post, as the reasource.
thanks

Frankly speaking, you blew my mind with this creative idea. I have been trying to learn the grungy way of creating text and artworks and found it quite difficult but when I tried this, I was amazed. It came out just fine. Thanks a lot.