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
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
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
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
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
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…
No related posts.
April 4th, 2006 at 1:49 pm
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.
April 4th, 2006 at 2:57 pm
A trick I like to do is photocopy photocopies, over and over again. A different, albeit less distressed, look.
April 4th, 2006 at 4:06 pm
Forgot to mention this:
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.
April 4th, 2006 at 4:27 pm
Yes – good point Andrew. Please see the “added note” which I hope gives you a little more insight.
Nico – great tip
April 4th, 2006 at 5:14 pm
[...] In a previous post, I highlighted some places to check out for adding the worn look to projects. How about doing this the old fashioned way, creating your own worn look with some low-tech tools and a little creativity. Check out the tutorial here. [...]
April 4th, 2006 at 10:02 pm
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.”
April 5th, 2006 at 11:27 am
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.
April 5th, 2006 at 7:07 pm
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…
May 5th, 2006 at 12:54 pm
Photoshop+Brushes+Mask and few minutes
May 6th, 2006 at 6:04 pm
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.
August 14th, 2006 at 5:21 am
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.
March 2nd, 2007 at 7:50 pm
garcias !!!!!
April 19th, 2007 at 11:19 pm
AWESOME AWESOME WORK! Thanks for the tutorial. I really appreciate the help
May 10th, 2007 at 8:36 am
Ðаану-ка рбеÑтки голоÑуем!!!
ПроизнавайтеÑÑŒ пркоазники и владельццы Ñайта http://www.attitudedesign.co.uk ))))
ЧТО вы будете делатьо Ñтим летома?!
June 13th, 2007 at 1:10 pm
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
June 24th, 2007 at 8:42 pm
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.
July 3rd, 2007 at 9:10 am
[...] http://www.attitudedesign.co.uk [...]
July 31st, 2007 at 9:05 am
http://www.attitudedesign.co.uk – The most necessary site !
Thank you, I will add it to my bookmarks
Best Regards
Dolly
August 30th, 2008 at 5:37 am
good tips fren, thanks for your informations
October 10th, 2008 at 6:43 am
[...] 48. Worn look Tutorial [...]
October 10th, 2008 at 7:56 am
[...] 48. Worn look Tutorial [...]
October 12th, 2008 at 10:29 pm
[...] 48. Worn look Tutorial [...]
October 26th, 2008 at 11:53 am
[...] 48. Worn look Tutorial [...]
October 28th, 2008 at 9:35 am
[...] 48. Worn look Tutorial [...]
November 5th, 2008 at 9:36 pm
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!
February 1st, 2009 at 1:19 pm
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
March 6th, 2009 at 3:43 am
[...] Worn and Grunge Look Tutorial You’ll learn how to create one of those small details which can really make a design. [...]
April 8th, 2009 at 3:46 pm
[...] 48. Worn look Tutorial [...]
May 4th, 2009 at 5:18 pm
[...] Worn Look Tutorial [...]
July 2nd, 2009 at 4:24 pm
[...] 48. Worn look Tutorial [...]
August 25th, 2009 at 8:29 pm
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.