Learn how to add a worn look that works well with cartoon-style graphics. Different flavors of grunge styles are popular all over the Web right now. Learn a unique approach to wear and tear that you can incorporate into your next Web site design.
Final Image Preview
Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the full Photoshop file is available via our PSDTUTS Plus membership.
Step 1
Create a new Web document at 1024px by 768px. Fill the background with a color similar to the image below. Grab the Rectangle Tool and draw a rectangle. The rectangle should fill about half of the page with the color given below. Then Rasterize it. Go to Layer>Rasterize>Shape.
Rename this as "top layer." Using the Lasso Tool, draw shapes across the bottom of the rectangle, like in the image below. Then press Delete. This will cut out the shapes from the rectangle. This is a quick way to create this. Of course, you could use a mask, if you prefer.
Step 2
Create a new layer below the "top layer." Grab the Brush Tool. Set it to Soft Mechanical, 100px Diameter, and (#484536) color. Use the Brush to create the shape of the shadow for the "top-shadow" layer. You may need to zoom in and smudge it to get a better result.
Next we apply some layer styles. Apply a 1px outside white stroke to the top layer. Then apply Pattern Overlay, with Soft Light Blend Mode, and use Rust Flakes for the pattern.
Tips: It's best to draw the shadow yourself. Try to make the shadow not fixed, as it may make it look unnatural. You may need to spend some time to draw this part to make it look good.
Step 3
Create a layer above the "top layer." Then Option/Alt-click between the layers to create a mask. With the same Brush, set the color to (#d8ce9d). Then brush along the edge of the "top layer" to create a highlight.
Step 4
Create a rectangle by going to Edit>Free Transform or Cmd/Ctrl+T. Then Rotate to the angle shown below. Use Cmd/Ctrl+T again and this time select Warp. Drag the bottom right corner as shown below.
Step 5
Using the Pen Tool, draw out the shadow below the rectangle shape. Apply Gaussian Blur at 5px. Then set the layer blend mode to Multiply.
Tips: Brush out the little shadow at the top to enhance the effect.
Step 6
First, Cmd/Ctrl-click on the rectangle to bring out the selection. Go to Select>Modify>Contract>10px. Create a new layer above it and fill it with a white color. Next place any photo you like. Then create a mask with the new layer we just created.
Use the Polygonal Lasso Tool to draw the tape. Then create a new layer above and fill it with a white color. Then set the Fill to 47%. Apply a 1px Inside Stroke, (#e4dec3) color, and set the Opacity to 66%. Then duplicate it. Move the duplicate to the left, then rotate the left tape, as in the image below.
Step 7
Use the Brush Tool (B) to create the shadow for both pieces of tape. See the settings below.
Step 8
Type the site title. I am using Bernard MT Condensed, with (#7a745e) color, and 72px size. Type out the primary navigation titles next. Then Rasterize the type. Grab the Erase Tool(E), and with the TB_Grunge Brush, randomly erase the letters to make a worn effect. Or if you prefer a nondestructive method, then use a mask to create these effects.
Step 9
Using the Pencil Tool(B), zoom in, and draw an arrow shape. Then erase it, as we did with the titles we made in the previous step.
Step 10
Using the same technique, create the Search Input field, then the RSS icon. I also added some text next to our main navigation titles.
Step 11
Our "header" is done. We already have our "main body" area colored in as our background, so let's make our "footer" next.
Grab the Rectangle Tool and draw a rectangle at the bottom of the screen about 40px high. Give it a color of (#302e26). Then Rasterize it. Go to Layer>Rasterize>Shape. Then use the same cutting technique that we used to create the "top layer." Only this time, we'll be doing this to the top of the rectangle. Go ahead and cut some shapes out of the top of the rectangle. Then apply the layer styles below. Your end result for this step should look like the last image below.
Final Image
We are almost done now. For the final image, simply add in three white rectangles. Then apply a Drop Shadow layer-style effect. Add in three images of your choice. Mask them to fit within the boundaries of the white rectangles. Our final image is below.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Mister Brito April 19th
Muy bueno el tutorial…
( )Sadar April 19th
Nice
( )Paulo Sales April 19th
cool..!
( )Timmy April 19th
Nice work
( )godonholiday April 19th
cool…would love top see how you guys get these into dreamweaver and add content without messing up the design and layout
( )james April 19th
nice baby
( )Ben Griffiths April 19th
Looks cool, thanks
( )Lamin Barrow April 19th
WOW.. very nice interface you have made there Chan. I see everyone is into this grunge thing now. By the way the design looks absolutely fantastic. Thanks very much.
( )Nick April 19th
I agree, very nice! I would also love to see how you make the transition from an image to a website.
( )giackop April 19th
cool!! thanx Chan..
( )D.A.T. April 19th
nice! I reaaly like the cartoon feel. I’d like to seee how you take this and make it into a webpage. Thanks!
( )goldenthunder April 19th
Very cool, there are a lot of different grunge styles now, and I like how you incorporate a unique type (not just the typical alleyway street look). Thank you!
( )ifindtrends April 19th
Great Tutorial. Would love to see more of these about web design. Maybe in the pay section? Anyone esle agree?
( )Ewan April 19th
Wow! I’ve been wondering how to do something like this for a while. Thanks for sharing.
( )Jesús April 19th
Very nice
( )Daniel April 19th
Good work…
Daniel
( )Eduardomatica April 19th
buenisimo, esta pagina es la mejor que conozco sobre photoshop… sigan asi y voy a unirme a la “membresia plus”
( )Andrew D April 19th
Yay web design tutorials! My favorite!
( )Harry April 19th
Wow nice il like the tape effect
( )HamBoneZ April 19th
That gives me some ideas thanks alot man
- BoneZ
( )Stanley April 19th
looks good and it’s quick and easy
( )Zach April 19th
first off…
very nice tutorial. it is a definately grunge look, but a little more friendly, and imo appealing than some i’ve seen. love it. and thanks.
second…
i would be happy to show how you would transform an image in to a website. i could even use this example if Chan Kai Loon would be okay with it. i am not the greatest CSS/XHTML coder, but I definatley could handle this homepage. i don’t know if it would be possible to post it here on PSD Tuts, but if it is Collis, please post here and let me know how to get in touch.
thanks,
-Zach
( )D. Carreira April 19th
WOW! Another fantastic tutorial! Thanks
David Carreira
( )Vampvess April 19th
Fantastic tutorial, although it step is easy.
( )But I found it is useful.
Thanks you.
jws1 April 19th
very nice use of the lasso and warp, these simple technques can really be useful in modern apps.. although in the final image the text next to “about” etc, look oddly out of proportion. All in all i found inspiration from this. thank you.
( )Snorri3D April 19th
well it is time to give somthing back to this awsome comunity.
I took this design and made it into a webpage or at least i coded it i did not have the psd file so i only used this jpg and made it as a tableless page so css only no tables
you can see the result at -simpleeffect.com/kailoon and if you want the code here it is at - simpleeffect.com/kailoon/kailoon.rar
it is as .rar file with all of the files the pictures the html and the css file feel free to use it as you wish just hope you guys can use this of any kind
Thank you
( )lextertoz April 19th
nice men.. keep on uploading..
( )Gimper April 19th
not bad at all… thanks
( )Joefrey Mahusay April 19th
Cool, thanks guys.
( )fleox April 19th
so funny~
( )Katalog Stron April 19th
I like this kind of design. Thanks.
( )Saswata April 19th
Best way to rasterize a shape is to select the paint bucket tool (G) and click on the shape. Press yes when the pop up appears, and lo! your shape is rasterized!
( )ESD April 19th
Great, great, great job !!!! Thx so much ….
( )Arnaud April 19th
Really cool
Here a cool list of beige design and grunge http://splitdadiz.com/2008/02/27/beige-couleurs-et-web-designs/
( )Shane April 19th
Great to see a website-related tutorial. At the moment, 100% of my graphics work ends up on the web.
Nicely done, and many thanks!
( )nkhat April 20th
coool coool my friend very nice tutorial
my friend why don’t use the video to learn photoshop it’s better of put the photos (( hard work ))
good luck
and thank you
( )Snorri3D April 20th
if you are having problems with the code i wrote around this tutorial feel free to ask
( )samuel April 20th
muy buena ojala yo lo pudiera hacer
( )Daniel April 20th
very nice webdesign ! great ! and thanks a lot Chan kai Loon!
Thanks for the link Arnaud! a very a nice source of inspiration too.
Thanks for coding it Snorri3D.
( )Johan April 20th
I like web design tuts. Thanks!
( )James April 20th
Thanks a lot Snorri. That’s really helpful
( )Ali April 21st
Great tutorial, we want more Web Layout Tutorials!!!!
MORE WEB LAYOUT TUTS
( )Tom April 21st
Nice work. I’ll try it right awway!
( )Aminur Rahman [aka Tom R] April 21st
very nice, within the current trend. would love to see more website related tuts.
( )skut April 21st
finally web layout tutorials, nice tutorial
i hope got more web layout tutorials from psdtuts
( )180degree April 21st
wonderful tutorials
thanks !
( )rob April 22nd
That’s cool. Thanks for the tips…
( )Sean Farrell April 23rd
Awesome tutorial, love the effect, now to make one teaching how to draw the little punk kid. haha awesome!
( )Mchilly April 23rd
Great! I was inspired probably make mine too
( )liu wu yang April 24th
I come from China,very pleasure
( )FlashRipper April 25th
very nice. I like this work and psdtuts!
( )ZaFaR April 25th
great, I like it.
( )Sharing Best Practices! April 26th
Great tutorial! Check out my site I am sure you will like the effects.
( )Cometh April 29th
Good to know your tutorial is published here man… Keep it up…
Two thumbs up..
=p
( )JONxBLAZE April 30th
Awesome tutorial….great job!
( )Patrick May 1st
Great tut! You pay attention to detail which is very important with these.
( )Abhisek May 5th
Awesome! I am falling in love with this site. Thanks!
( )Donovan May 9th
Nice Chan!
( )PhotoshopHome May 17th
nice tutorial.
( )Michael D. May 22nd
Yes it’s good tuto.
( )I like the design style manga
JoaoJunior May 25th
Interesting……very nice
( )Steph June 7th
In step #2, you say you want the pattern to be on top layer, but the pattern is shown in the background?
( )yoyo June 17th
Cool….
( )Bob June 21st
Very nice job in photoshop but am I the only one that notices that if you were to make this a web page it would be way to big of a document size? The guy who put it together above ended up with a page size of 902kb… that’s not practical or good practice.
( )abz June 26th
aii really like this 1 its cool lmfaoooooio hahahaha i love richard
( )ke_giau_mat88 July 1st
nice
( )classifiedsoft July 6th
this is just awesome!!!!!!
( )DJ July 7th
I would love too see this as a blogger template.
( )StuckS July 30th
it looks so stylish
( )very nice
Nalu August 6th
yay =D really love it, design & anime cartoon. thanks 4 sharing
( )GRAPHICS@SBL-Clipping Path services August 15th
really interesting………………
Regards,
( )GRAPHICS@SBL
Joe August 28th
The cartoon style combined with different grunge styles really makes one unique eye catching combo.
( )Manoj September 11th
Oh My God.. this is too good and cute. Such a easy way and it looks Awesome!
( )mauritius September 14th
Thnx for the nice tutorial…
( )Mabuc October 29th
Very nice tut like to see this one here
( )chyasa October 30th
Its looks good and it’s quick and easy to create new Styles
( )why November 19th
Thanks for the tut.
( )[FD]King - Muhammad Usman November 21st
Nice tutorial
( )محمود December 4th
thanks aloooot man very nice
( )شكرا
Eric Shafer December 5th
Tracked back to from here: http://www.presidiacreative.com/amazing-web-design-tutorials/
( )PureBrit January 5th
It would be great to get some of these web design tuts in video format because theye look fantastic..
( )Dhane January 13th
What a nice tut!
( )cooooooooooooooooooooooooool January 13th
coooooooooooooooooooooooool
( )Jamie Allsop April 8th
This is one nice grunge style web design, I would also like to see how you would take this design from Photoshop and make it into a website using CSS. Thanks for the nice tut.
( )maya April 11th
lucu… ^_^
( )Paul April 15th
bad tut. it’s sometimes not explained as clearly as another tut found on this site.
didn’t like it, sorry.
( )CgBaran Tuts April 17th
Great layout thanks
( )faisal April 29th
wow,great.i try to make layout like them.huhu
( )darek May 2nd
this tut was very helpfull for me. I am just trying to desing some grungy auction template for my wife. I did sfg similar to this for her and she liked it very much…
( )raz May 6th
nice
( )Williams May 14th
Wow, So classic, I learned…Thanks Very Much, and I like the site style too.
( )sergey June 5th
Your Message…very very good work!
( )Dioney June 5th
Cool
( )