PSDFan Extra

Making the ‘Clean Grunge’ Blog Design

‘Clean Grunge’ as a Trend

I’m not really sure whether ‘clean grunge’ is an official trend of web design, but in my eyes it’s definitely an important one. For me, clean grunge websites are a combination of the grungy with the functional, the messy with the ordered. The results of this are some of my favorite all time designs. Too often purely grungy websites loose out on usability, and are more works of art than they are functional websites. Similarly, clean websites often lack the creativity demonstrated in more grungy/artisitic designs. Therefore for me ‘clean grunge’ has the best of both worlds.

Clean Grunge designs typically exhibit similar characteristics, which I will try to capture in today’s design:

Clean edges combined with messy edges
Defining, but messy outlines
Grungy elements/patterns which are subtly presented.
Low Opacity Textures
Washed out Color Palette
Beautiful and Handwritten Typography
Strong Attention to Details

Final Image

This is the finished design that I’ll be showing you how to make from scratch:

Images+Extras Used

This is a quick references for all photos, textures and brushes used in the making of this design.

Free Paper Texture
Ink Splatters Brush Set
Cardboard Texture
Free Twitter Character

Step 1

Open up a new document (1050X1500px). This won’t be the width of our main layout, but will take into account parts of the background to the side of our main content areas. Create a new layer set called ‘background’ and create a new layer called ‘main background color’. Select all (option+a) and fill this layer with a light cream color (ECE5D9).

Step 2

Now open up a new document (960X1200px). 960px is the perfect width to accommodate for everyone using a 1024X768 screen resolution, as you don’t want to risk side scrolling. In your new document create a new layer and use your rectangular marquee selection tool to select the left 3/4 of your canvas. Fill this with white. Then select the remaining right 1/4 of the canvas using your magic wand tool. Fill this with medium gray. Then select this entire layer and return to your original document. Grab your zoom tool and right click+fit on screen. Then paste in your white/gray image. This should paste the image directly into the center of your canvas.

Step 3

Now select you ‘main background’ layer and create a new layer called ‘header dark’. Select near top part of your canvas (leaving a light area right at the top) and fill your selection with a dark brown color (928673). Hide your white/gray shape layer as we’ll be working solely on our background for now.

Step 4

Download a free paper texture and paste this into your document onto a new layer above both of your current background layers. Full size the texture is a little blurry so go to filter>sharpen>sharpen more. Then set the layer blend mode to ‘multiply’ and reduce it’s opacity to 50%.

Step 5

Select your header dark’ layer and use your magic wand tool to select the light area above and below it. To have both selections active at the same time hold shift when making your second selection, in order to keep the first selection active. Then return to your paper texture layer and go to image>adjustments>brightness/contrast. Increase the brightness to +100 and reduce the contrast to -75.

Step 6

Now download the awesome free brush set Ink and Splatters from Q Brushes. Create a new layer above your paper texture layer called ‘ink splatters’ and set it’s blend mode to ‘overlay’ and opacity to 50%. Then apply various brushes from the set all over your canvas. You don’t need to apply them too much in the center of your canvas as this will be covered by your content area. Mainly apply them around the edges of your canvas and in the header area.

Step 7

The brush marks over the dark brown bar area are too bold compared to the background. To fix this return to your ‘header dark’ layer and select the dark bar using your magic wand tool. Then return to your ink splatters layer and use a very large eraser brush (50% opacity) to brush over the entire bar, reducing the brush marks opacity in this section by half.

Step 8

Now if you remember earlier we pasted in our white/gray shapes image into this document and made the layer invisible. Make the layer visible again, and then create a new layer set called ‘main area’. Select the white rectangle using your magic wand tool, and then copy/paste it onto a new layer in your ‘main area’ layer set. Then hide the white/gray guide layer again.

Step 9

We want the layout to line up nicely, as consistent lines are important in any design (even a grungy one). So I move up my white content area to line up with the dark brown bar. Then I type out some menu items above this (font: Arial, size: 11pt, color: 3B3026, kerning: -50). Then I create a layer called ‘menu hover’ below my text layer and create a white rectangle behind my ‘home’ link to create a tabbed effect.

Step 10

This step is very important, as it creates definition and structure, but also great grungy detail. Use your line tool to draw 1px black lines around your white content area and menu tab, creating a border effect. Each line shape will be created as a different layer and a vector shape. You’ll need to rasterize each line layer and merge them all down into one single layer. Then use your eraser brush to erase away parts of your border, to give a really messy outline to your content area. To achieve this make sure to use one of the ink splatter brushes as your eraser brush and reduce it’s opacity to 50%.

Step 11

Now create a new layer set beneath your main content area layer set called ‘sidebar 1′. Make your white/gray guide layer visible again, and create a new layer in your ‘sidebar 1′ layer set called ‘sidebar bg’. Create a rectangular selection the same width as the gray area in your guide layer and fill it with a medium brown (B8A689). Then repeat the same technique used to give your main content area a rough outline on this sidebar area.

Step 12

Now download a free Cardboard Texture. Copy/paste it over your sidebar area layer and then resize it to fit perfectly over it. Then change the layer blend mode to ‘overlay’ and reduce it’s opacity to around 80%.

Step 13

Now select your rounded rectangle tool and set it to a radius of 15px. Then draw out a rounded rectangle shape near the top of your sidebar area. Reduce this layer’s opacity to 20% and rasterize it. Then use your ink splatter eraser brush to erase away parts of your rounded rectangle, making it look more grungy. Then add in some heading text, and also content within your sidebar box. For the learn more button I used a low opacity ink splatter brush to give it a grungy backdrop. I also used one of the ink splatter brushes to give a little extra detail to the bottom right corner of my sidebar box.

Step 14

Now the beauty of having all the layers for this sidebar box in one layer set is that now we can right click on the layer set and click ‘duplicate layer set’. Then simply move the duplicated layer set 20px beneath the current one. This is the basis for my other sidebar content, but I want this box to be less bright and obvious, as often the top sidebar box is designed to capture the most attention. To make this second box more subtle I select my ‘sidebar bg’ layer within the layer set and then go to image>adjustments>hue/saturation. Then I reduce the saturation to -75 and up the brightness to +25.


Step 15

Now keep duplicating layer sets until you have enough boxes in your sidebar. This is a good point to look over your layout as a whole and try to find areas that aren’t looking quite right. For me, the bottom right background brush strokes were a little too bold, and were detracting away from my sidebar content, so I went in with a 50% opacity eraser brush and softened them up a little.

Step 16

Now create a new top layer set called ‘header’. Select a grungy or handwritten font. I went with ‘Green Piloww’ which you can download free here. Then type out a nice grungy looking logo.

Step 17

Now go to your custom shapes panel and select the shape that looks like grassy reeds. Draw out this shape just above your top sidebar box, and make it a light, bright green color (C4FA44). Then rasterize it, and go to edit>transform>define brush present. Call your brush ‘grass brush’. IMPORTANTLY: be sure to hide all other layers (do this by turning off the visibility on all your layer sets), except for the layer set containing your grassy shape. This is so that when you define your brush shape it will only pick up the data from this shape.

Step 18

Now go to your brush options menu and select your ‘grass brush’ brush. Select scattering, and then input 206% scatter, with count: 1, and counter jitter: 24%. Then select ‘shape dynamics’ and input: size jitter: 0%, minimum diameter: 100%, angle jitter: 0%, roundness jitter: 0%. Now delete your original grass shape, and create a new layer called ‘grass light’. Then paint in the grass just above your top sidebar box. For some reason the brush marks are very faint, so to fix this I duplicate my brush marks layer 10 times, and merge all of these layers together.

Step 19

Now create a new layer called ‘grass medium’. Draw out some more grass using the techniques in the last step, but this time make your grass color 94C51E. Then create another layer called ‘grass dark’, and paint in some more grass (5D800A). Then finally use your rectangular selection tool to delete the parts of the grass on each layer that overlap into the content areas.

Step 20

Now I download a fantastic free Twitter character icon offered at We Function. I fit this character into the grass, and then to make the top of the bird stand out a bit more against the light header background I apply a subtle inner shadow.

Step 21

Now I move my Twitter bird to the right a little and make way for a speech bubble. I create a white speech bubble, and then using my logo follow write out ‘follow me’ to complete the Twitter section of my header. To make my speech bubble stand out a little more I apply the same inner glow that I applied to my Twitter bird. To do this I right click on the Twitter bird layer and click ‘copy layer styles’, then right click on the speech bubble and click ‘paste layer styles’.

Step 22

Now create a new layer set BEHIND your ‘twitter’ layer set. Call this layer set ‘rss area’. Grab an RSS icon (I just googled this) and paste it onto a new layer (‘rss icon’). I move the icon so that it appears to be emerging from the top of my layout. I also rotate it by going to edit>transform>rotate. Then I apply a drop shadow to give the impression of depth (settings below).

Step 23

Now I find a great photo of some torn cardboard and paste this onto a new layer BELOW my rss icon layer. To hide the white parts of the image I set my layer blend mode to ‘multiply’. Then I rotate the cardboard to fit nicely at the top of my header, and finally add some subscribe text using my logo font.

Step 24

Now create a new layer set called ‘blog post 1′. Add in the content for a blog post over the main white area of your layout. Be sure to use a large, clean font for your post title (I went with Georgia). You can obviously present your content however you like, but the aim of this tutorial is to show you how to create an attractive framework for such content.

To create the grungy line beneath my blog posts I used the same technique as I used to create my rough borders. Simply draw out a black line and erase it using the ink splatter brush eraser.

The reason for putting the blog post in it’s own layer set is because it allows you to duplicate this layer set and copy out more blog posts very easily, to act as fillers until you code your layout.

Step 25

Now return to your background layer set. Duplicate your dark brown bar layer and move the bar down to the area below your main white content area. Go to edit>transform>scale and scale it to fit nicely below your main content area. The paper texture and ink splatter brush marks should be on layers that are above this duplicate layer, so the ink splatter marks are too obvious, just as they were with the original dark bar. To fix this repeat the technique shown earlier – select your dark area using the magic wand tool, and then select your ink splatter marks layer and use a 50% eraser brush to erase over the ink splatter marks. This should tone them down. Also repeat the technique used to draw out the rough lines and borders in the rest of the design, and give the dark area a nice grungy border.

Step 26

Now create a new layer set called ‘footer’. Fill in your dark footer area with text. For the copyright bar select your dark footer area and go to image>adjustments>brightness/contrast and reduce the brightness to -40.

Step 27

Now we want to give the impression that the left column of the layout is in front of the sidebar, and that the sidebar boxes are really just tabs of this main area. To do this, I want to create a little depth. I create a new layer set between my sidebar layer sets and left column layer set called ‘main area shadow’. Then I use my marquee tool to make a long selection, about 5px wide spanning the entire length of the white content area, just to the right of it. I fill this with black, and then reduce my layer opacity to 10%.

Step 28

To finish up I add a couple more simple details near the bottom of my layout.

And We’re Done!

I really hope you enjoyed this tutorial, and would love to hear your comments on it. You can click the image below to view the full-sized layout.

Download Source File for this Tutorial


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

156 Comments:

  1. Brilliant tutorial. We all have out individual work flow and breaking it down like this, just make our work seem so simple ;) .

    This just show what an incredible result you can get from a little clever use of brushes and textures.

    I have only recently started using free textures, brushes and patterns. I used to make all my own from scratch but found that with the quality of brushes available online, it isn’t really worth it.

  2. Thomas says:

    Thanks for this tutorial, much appreciated!

  3. Greg says:

    Sweet! Great tutorial!

  4. Tom says:

    Thanks for the comments guys, I’m glad you enjoyed this one :)

  5. Andrew Houle says:

    Wow, Tom this is fantastic! Great work, I love this style. Maybe you should chop and code this up into a WP theme for sale or freebie.

  6. Nokadota says:

    This is pretty sweet. I think I’ll use my own textures though, it’ll seem like I’m learning more.

    • Tom says:

      Thanks guys.

      Andrew: Yeah I’m considering offering it as a theme, although I’m not sure about selling it as the psd will be available soon on the members area.

      Nokadota: Cool, I’d love to see the outcome if you’d like to share it :)

    • mary says:

      your texure?what do u mean?

  7. Joy says:

    Awesome tutorial! :) Thanks!

  8. Tom says:

    Thanks Joy, welcome to the community :)

  9. Awesome tutorial! thanks a lot..

  10. Thanks for the great info.

  11. werther says:

    The outcome is nice but I think it might be better if the background layer were some kind of a pattern and not one huge image.

  12. Tom says:

    Thanks for the kind words guys.

    Werther: Yeah I see your point, a pattern would probably work better, with perhaps just large brush strokes in the header area for extra detail.

  13. Clean and Grunge is kind of an oxymoron, but the result is really good.

  14. josie says:

    agreed that Clean and Grunge is an oxymoron but it works!… great tutorial, great end result, thanks!

  15. purwasila says:

    good tutorial, .mybe can you gave me CSS for you layout website ?

  16. Tom says:

    Yeah it is a bit of an oxymoron, but at the same time I think it’s possible to combine elements of both design trends.

    Purwasila: Sorry, but at this time the layout has not been coded. I’ll post it here though if/when it is.

  17. [...] Making the ‘Clean Grunge’ Blog Design I definitely agree with what Tom of PSDFan has to say in this post. ‘Clean grunge’ is gaining momentum as a current trend in web design. Which is cool with me, because when done right, it looks awesome. This tutorial steps you through how to mock up a cool clean grunge site in Photoshop.   [...]

  18. Sineload says:

    I would like it a little bit dirtier but Great tutorial.

  19. Tom says:

    Thanks Sineload. I thought about making it more grungy, but was worried that that would take away from the clean aspects of the design.

  20. [...] 3. Making the ‘Clean Grunge’ Blog Design [...]

  21. I’ve been wanting to learn how to design a grungy layout in Photoshop but the earlier tutorials I’ve seen were either too difficult or didn’t like the design.

    Your tutorial was very detailed. I learned some new techniques and I really love the design. Really amazing tutorial Tom!

    Thank you so much!

  22. Tom says:

    Hi Raymond. I’m really glad that you enjoyed this tutorial, I’ve got some more web design tuts lined up, so I hope you’ll check back soon.

  23. Lewis says:

    Great tutorial!

    I will use this, i’m now even more keen to try out the Clean Grunge effect!

    Thanks!

  24. Kaiser says:

    Awesome tutorial. The problem is on how to convert it into wordpress.

  25. Jeremy says:

    You seem to be interested in seeing peoples work, well here’s what I made after reading your tutorial.

    Thanks alot. You’re designs are always simple, but so effective.

    http://img8.imageshack.us/img8/3130/layour2uu5.jpg

  26. Tom says:

    Thanks guys.

    Jeremy: That’s a really cool result you’ve got there. I do love seeing how people interpret my tutorials. I would suggest adding in more isolated details (like I did with my rss area and twitter bird). The layout can look a little empty before you add content and these kinds of finishing touches. It can work for any kind of site… for instance if yours was a gaming site, perhaps have a game character or something above your right column, shooting a missile at your logo area.

    I’d love to have your work showcased in the PSDFAN flickr group: http://www.flickr.com/groups/psdfan/

  27. Enk. says:

    Hey Tom,
    I think your Signup Button at the end of Posts is not correctly linked.

  28. Enk. says:

    Hey Tom,

    Nice Theme tutorial there..
    I got plenty of designs in my mind and in my computer but Can’t convert even one of them into xhtml or real theme. :( :(
    I know no coding.

  29. Jeremy says:

    Thanks for the reply Tom. I’m keeping the upper right space of the header open for an ad. I made some subtle changes and added some content and this is what I came out with:

    http://img7.imageshack.us/img7/3364/layour2st1.jpg

    Any more suggestions?

    Also, keep up the great tutorials. I NEVER leave comments and rarely even add tutorial sites to my favorites. But this one is full of very high quality, useful tutorials.

  30. base says:

    sweet tutorial, great outcome. Thanks a lot!

  31. tatilblogu says:

    useful tutorial.thanks

  32. Jon says:

    I’d like to sign up to view the psd file, but I can’t? when will that feature be added online?

    if its going to be a while could you e-mail it to me?

    • Tom says:

      Hi Jon. Thanks for your interest in the members area. It actually should be launched by now, but a completely unforeseen bug came up that I’m trying to work out with my developer. I’ll announce it as soon as we launch though, which hopefully shouldn’t be too far off. Thanks for your patience.

  33. Jon says:

    Hi Tom

    Thanks for the reply

    I really look forward to the launch of the members area!

  34. RAouf says:

    thats too great tutorial and thank you for your design and great end result, thanks!

  35. darlyn says:

    That’s great tutorial I ever need… and the design is so cool and for sure it SEO friendly :D great

  36. Mayanktaker says:

    What to do after making this layout ?
    :O
    I mean is there any software to conver this psd to css or other… ?

  37. Mayanktaker says:

    Anyway, cool layout and detailed tut. ;)

    • Tom says:

      Thanks Mayanktaker. I haven’t formally announced it, but I actually have a new site planned in which I’ll show how to turn layouts (including this one) from .psd to html/css. Stay tuned!

  38. Amy says:

    Thank you for the tutorial, absolutely fab! Now to turn it into a WordPress theme, looking forward to the new site!

    Thank You

  39. Amy says:

    Thanks for a great tutorial, now just to convert it to a wordpress theme!

    Looking forward to the new site too.

    Many Thanks again,

  40. Mei says:

    I’m not sure I understand. This isn’t a blog is it, it’s just a _drawing_ of a blog?

    • Tom says:

      Thanks right. All websites generally begin as Photoshop images, which a coder will then ‘splice’ into a working website.

  41. teuingsaha says:

    nice , thanks

    I`ll try

  42. GauppyNal says:

    Sweet blog. I never know what I am going to come across next. I think you should do more posting as you have some pretty intelligent stuff to say.

    I’ll be watching you . :)

  43. Jack says:

    This is a great tutorial for designing the actual look of the website. but how do i convert it into html to be a well working blog like this?

    i believe i have some of the design talent, but have 0 html/css talent.

    i’ve looked into rss feeders like feedburner, but they just dont do want i want.(or at least i dont think so)

    which is to make a website just like this which i can update easily but still looks great!

    • Tom says:

      I would recommend using WordPress as your platform for uploading content, and then you’ll just need to look at some PSD to WordPress tutorials (I recommend nettuts.com for instance)

  44. Klip says:

    yes useful. thanks

  45. Lanea says:

    Hey Tom,

    Could you explain step 5 a little more I can select the space above and below the header dark area and then when I click on the paper texture and go to Image -> Adjustments -> Brightness/Contrast, the Brightness/Contrast is not selectable how do I go about fixing this? Thanks

    La

    p.s. great tutorial!

    • Tom says:

      Lanea: Thanks for the kinds words. I’m actually not sure why brightness/contrast wouldn’t work. Make sure that you don’t have a selection in place, then make sure that your paper texture layer is selected before you go to brightness/contrast settings.

  46. wonderful tutorial.thank…

  47. [...] Making the ‘Clean Grunge’ Blog Design [...]

  48. lhoylhoy says:

    nice one! functionality and arts combined! thanks man!

  49. roblesrt says:

    luv this…can’t wait how to code this in your next tutorial..kudos!

  50. alex says:

    great tutorial. tank you very much!

  51. Behnam says:

    Perfect! and the color scheme is really easy on the eye.
    Thanks :-)

  52. Wow very nice one, continue doing it im sure, most people will find it useful and for sure it can help

  53. Great tutorial! I really dig the Clean Grunge look. I coined that word quite a while back. :)
    I featured this post in one of my articles here: http://psdden.com/the-20-best-we…als-on-the-web/

  54. I love this blog post. Thanks for including the containers, it helped that you made everything step by step

  55. great and particular tutorial, thanks!

  56. BloggerDude says:

    I don’t know If I said it already but …I’m so glad I found this site…Keep up the good work I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog. Thanks, :)

    A definite great read….

  57. Angel rodriguez says:

    hey great great tutorial , i love the style , but are some tutos for make this layout into html and/or WP?? i really want to learn that , thx 4 te tuto .

  58. very informative tutorial and its easy to follow.

  59. Outercircle says:

    Thanks. Great Tutorial :)

  60. sumi says:

    Finally, I found step by step tutorial to make blog theme. Very useful.

  61. [...] Making the ‘Clean Grunge’ Blog Design [...]

  62. PSDDude says:

    I like the result very much! It is a style that i love, very cute and cartoon like! Nice Work!

  63. Sherri says:

    Great tutorial. I love Clean Grunge! Is there instruction on how to make a PSD file into a template for Blogger?

  64. April says:

    This tutorial was really helpful! i was so stuck for design ideas and i finally have something i really like :]
    THANKYOU! Great work

  65. Constantin says:

    man that took some time :) , but I managed. Thank you!

  66. wow!!! Amazing. Thanks for sharing.

  67. Rikki says:

    This is an awesome tutorial, maybe I should direct my web developer here so that he can build me a nicer and better theme… :) Thanks for sharing this..

  68. Nick says:

    Awsome tutorial :)

  69. Ajinkya says:

    really awesome tut, Loved it. I love all nature based & tweety layouts :D

    btw some of you can try these Tweety icons > http://webicongallery.com/cute-twitter-iconset/

    & some Grungy Icon sets > http://webicongallery.com/free-grungy-social-icon-set/

    cu. Thanks again for grungy layout tut :)

  70. Roncarrmusic says:

    Great Tutor! Amazing.

  71. Wepasa says:

    Wow!!! Wow!!! Wow!!!

  72. Ramalho says:

    Hi WEB FAMILY,

    What skill TOM! Very useful & great inspirational tutorial.

    Thanks for sharing

  73. useful article for beginners like me.. this would be of great use to me thnaks

  74. Great work! Thank you for this nice Tut. The next thing on a weekend i will do..

  75. Jakub says:

    excellent tutorial, thanks

  76. Web Design says:

    Very nice thank you for sharin

  77. ipad apps says:

    It looks very clean, colors are good, I got to see my blog

  78. Mark says:

    very nice things, I like it very much ty for this!

  79. Agi says:

    Great tutorial! :)

  80. Hi , excellent tutorial, thanks

  81. Quentin says:

    Thank you very much for this great tutorial and your inspiration. I have to go through it one more time but I think I will master it.

  82. webdesign says:

    Finally, I found step by step tutorial to make blog theme. Very useful. Keep on the good job!

  83. Nice tutorial, would suit an easy going style of personal blog. The techniques are useful in other situations too.

  84. tisdalefreak says:

    hey! I made this for an ashley tisdale fansite im going to create, I really love it! here’s my outcome (I hope I can use it without any problem, you know legally talking xD. I even wrote tutorial: PSDFAN and im going to put a link up to your website in my first post ;p.)

    I did some stuff different and decided to not do the RSS part. anyways here’s my outcome:

    http://i28.tinypic.com/2uiulhw.png

    I really love it! thanks for this AWESOME tutorial :)

  85. Loved it! Simple, easy and to the point. Great tutorial.

  86. Wanda says:

    Thank you very much for these detailed information. I’m still learning, but with these hints I can really get better.

  87. Awesome tut!! ‘Clean Grunge’ is definitely a cool trend!!!
    Keep up the great work.

  88. This is a very nice tutorial. I really like the finished grunge blog design. I’m going to use these methods in my future designs.

  89. apple says:

    this a very handy tutorial awesome thanks

  90. water cooler says:

    Really I want to create a little depth. I create a new layer set between my sidebar layer sets and left column layer set called ‘main area shadow’. ;)

  91. Düzce Haber says:

    Great and particular tutorial, thanks!

  92. very nice tutorial, will help in general, not just with the grunge theme:)
    thanks alot guys

  93. Great tutorial. There are so many designers that just use plain block colours and I think it is essential to involve textures and patterns to lift a website and make it far more interesting!

  94. I don’t think that this type can challenge the same new product from another company.

  95. Very well done! I’m kinda used to working in Illustrator on things like this. I know I know, that’s pretty unusual. Have to admin, learned some very great stuff from this tutorial. Keep it up!

  96. Dukan dieet says:

    Please make a tutorial about converting this layout into html!

  97. Eiwit says:

    This links: “This is a quick references for all photos, textures and brushes used in the making of this design.”

    Are not working any more! Please update :-)

  98. Interesting post. To convert this into HTML use the CSS to add background images/textures related to div tags, ex.
    background-image:url(‘yourimage.png’);
    background-repeat: no-repeat;
    background-position: top left;

  99. Webdesign says:

    Very nice tutorial, i like your style very much.

  100. Browsergames says:

    Wow, very nice tutorial!

    The most stunning thing for me was the nice top menu. I will try to follow your tut and bring in my own thoughts as well.

  101. Nice article! I’m a big fan of grunge design. I love the way it makes your website actually look a bit dirty. Keep it up!

  102. mikswillson says:

    I even wrote tutorial: PSDFAN and im going to put a link up to your website in my first post ;p.)
    thank you for sharing

  103. Dimple says:

    excellent and awesome tutorial…. Thru ths tutorial i easily learn that how to create psd in photoshop.. Thanks for this tutorial…

  104. Nice tutorial and beautyful result! Thanks for haring this!

  105. Jeriko says:

    Great post, helpful descriptions and useful tips :)

  106. thanks.. Loved it! Simple, easy and to the point. Great

  107. braindump says:

    This is nice blog.I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog, I will keep visiting this blog very often.Thanks for nice info. It’s useful for me. Can you give me some more information with details? I will wait for your next post.

  108. erd says:

    Very nice template, i love the way you create the paper look, been trying to get it a long time :)

  109. kiwi online says:

    Thanks Tom, a very nice template im going to use it for some of my blogs with a few adjustments :)

  110. Excellent tutorial, it gives a good idea on how to create a richly layered template to work with.

  111. That was amazing… Pulling off a grunge design always requires a lot of thought… Your work here is excellent… Thanks a lot for sharing!!!

  112. i? ba?vurusu says:

    thanks for sharing this article. that was usefull for me. thanks again

  113. wart removal says:

    Cool Clean Grunge Designs you got here. I am so fascinated by this. I think I would get your link and post this on my friends’ wall for them to see.

  114. I¡¦ll right away grasp your rss feed as I can not to find your e-mail subscription hyperlink or newsletter service. Do you’ve any? Kindly let me understand in order that I could subscribe. Thanks.

  115. Well This post remind my old days when i was just started these things as I was new one but now i fully understand this stuff and must appreciate how positive you write

  116. herbal says:

    thanks for sharing this article. that was usefull for me. thanks again….

  117. Neat, saved sit down and may share with my own freinds who also have a tabata mp3 that they use.

  118. Great work…..very nice templates
    Thank you so much Tom

  119. Webdesign says:

    Thanks al lot Tom! Very good tutorial! And i dit it! Greetz, Webdesign Think Internet

  120. Webdesign says:

    Nice post. Like it and will use it. Thx

  121. Carroll says:

    Hello, excellent website. Is extremely good design. I just got completed with cosmetic classes and want to start-up my own personal web-site. I appreciate you for the amazing article!

  122. Long read, but very usefull if u need this kind of webdesign! Cheers!

  123. Loved it! Simple, easy and to the point. Great tutorial.

  124. I love this blog post. Thanks for including the containers, it helped that you made everything step by step.

  125. Thanks for sharing this tutorial, a great resource!

  126. Just what I was after, thanks!

    It’s such a mix of a clean yet worn look that makes the design look so good.

  127. Very nice article, bookmarked it for future use!

  128. nice post thanks for info

  129. Good tutorial. Just what I was looking for. Thanks a lot!!!

  130. good work, but i think the twitter bird is a little to big.

  131. Nice Desgins thnx !

  132. This is a cool project because you can really tweak it and get creative. The clean grunge is cool, but you can mess with the background and textures if you want to add a bit more grit to the “grunge” factor. I’m not a design guru, but I can definitely get this going. Thanks. for the tutorial.

  133. FredGames says:

    Very detailed tutorial, I liked how you broke down the steps, made everything very clear.

    I was able to follow this, thanks!

  134. sd says:

    its awesome tutorial…thanks a lottzz

  135. Piet says:

    Yes, yes yes, Loved it! Simple, easy and to the point. Great tutorial.

  136. Nia says:

    I love the grass technique.

  137. baju senam says:

    Thank you for sharing this nice tutorial. Your design is great, it has colors that are not flashy and cool for the eyes.

  138. wowww, excellent and great tutorial. I’m learning wordpress theme designing and this tutorial really helped me to learn more. it is nice blog to learn designing. thanks for sharing.

  139. Nice design, and a exellent tutorial. Thanks for sharing

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY