Photoshop is often the right tool for web design, especially if you're creating a design using numerous images and brush effects. In this tutorial, I'll show you how to create a complete grunge home page design. We'll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn 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 layered Photoshop file is available via our PSDTUTS Plus membership. You can view the final image below or view a larger version here.
Step 1
This time we're going to create a full web design in grunge style using Photoshop and a lot of stock images. As this is a intermediate to advanced level tutorial, I'll skip the explanation of some basic steps. First create a new document 950 px by 800 px at RGB 72dpi. Show the rulers and drag four guides bounding the document, this will be the optimal area of the design. I'm planning to keep a fixed width layout.
Go to Image > Canvas Size and increase the width and height a lot more, 1200 px by 1000 px is OK, this way we'll be designing for wider screen resolutions. Then add more guides where you're planning to add the containers (Header, Navigation bar, Sidebar, Footer).
Let's imagine this design is destined for a Wordpress template, so we'll need a header, a navigation bar inside the header, and a right sidebar. Take a look at the bottom of the following image. Then fill a background with this color #7A8173.
Step 2
Now we're going to create a pattern for the header's background, which is fairly simple. Create a new document 50 px by 300 px and draw something like the image below. I'm using guides to make my shape as symmetrical as possible. Then go to Edit > Define pattern and save the shape as "pattern 1."
Step 3
On a new layer in our main design file, draw a 300 px height rectangle using the Rectangle Tool. Go to Filters, and add a Pattern Overlay, search for your brand new pattern and apply it. To make it look correct you must click the Snap to Origin button. Change the layer Fill to 0%, create a new blank layer above the shape layer, and merge both, this way you'll have the pattern ready to add some effects to it. Name that layer "Pattern 1."
Step 4
Select "Pattern 1" layer and apply to it some layer styles: Drop Shadow, a Gradient Overlay, and a Pattern Overlay. Try to get something similar to the bottom of image below, using following values.
Step 5
Now we're going to add the navigation bar background. Draw a rectangle hiding a little bit of the "Pattern 1" layer. Apply to that rectangle a Pattern overlay, a black to red black gradient overlay, and a soft Drop shadow. Use the values of the images below as a reference. Next, add a Layer mask > Hide all, and draw a black to white to black Reflected Gradient on the layer mask, you'll get something similar to the bottom image below.
Step 6
Now draw an ellipse (#691E1B) above the "Pattern 1" layer, name it "Light," and Apply a Gaussian Blur to it with a 50 pixels radius. I created an extra guide to draw the light in the center of the header. Delete everything below the navigation bar and change the layer's Blending mode to Color Dodge.
Step 7
To finish the first part of the layout, we're going to draw the sidebar's background. Draw some guides to delimit the sidebar and also edit the existing guides to make them fit on the actually design. Then draw a red rectangle (#3D100B) and apply the following styles: a Drop Shadow, a Color Overlay, and a Pattern Overlay.
At this point, you must consider the way you're going to cut the image into HTML + CSS; that's why I'm using Drop shadows with 0px of Distance the most of the time, and only horizontal or vertical gradients. The texture in this case has many horizontal lines. It needs to be easy to convert this into a repeating background for many areas. Also ,this is a good point to take a break and organize the layers in your folders to keep things organized.
Step 8
Now begin with the details, I want to add the site name in a prominent place, that's why I will use this nice grunge label image. Obviously you must extract the label and place it in the top left corner of our design. Try to get something like the first image below. Next, use the Magic Wand tool to select the little brown circle, then Command + Shift + I to inverse the selection. Adjust the Levels and Hue/Saturation using the values shown below.
Step 9
Now using the Eraser tool and an irregular Brush, delete some areas of the label's border. To add a paper cut effect, select the Dodge tool and use the same Brush shape to apply the dodge to the label's border.
Step 10
We're going to add a shadow to our label next. For this, duplicate the "Label" layer, change the Hue/Saturation > Lightness to -100, and apply a Gaussian Blur with a 10 px radius. Next, change the "Label copy" Blending mode to Multiply and set the Opacity to 75%.
Step 11
A last retouch for the label, change the Saturation to -40 to make it more gray.
Step 12
Now we'll add some support images, try to find images surrounding a concept, but as this is a tutorial about the techniques, I'm choosing a random one. This one is a beautiful picture of a vintage train here in the highlands of Bolivia. Extract the shape of the train however you want. Then change the "train" layer's Blending mode to Darken.
Step 13
Let's add some text, first the page name. Type something using a grunge font; you can find some interesting ones over here. For the title use a black type and change the layer's blending mode to Overlay, then duplicate the layer and change the copy's Opacity to 75%. To get a tiny blur effect, move the copied layer one or two pixels left or right. Add more text using this technique, like a slogan or something. Also, it's a good moment to add the navigation links as well.
Step 14
Now add more stuff, it's grunge style! I downloaded some Jenn B’s brushes from here, these brushes have restrictions. Using those brushes add some numbers, corners, masking tapes and whatnot, feel free to do whatever you want in this step. Just remember add all the layers below both the "Label" and "Label Copy" layers.
Step 15
Now we'll start adding the page sections. First of all, in the header we'll need a search bar. Type a search label. Next, draw a red (#6A0400) rectangle as a search input field, then apply a Stroke and a Pattern overlay layer effect.
Step 16
Now we'll start adding the main content of our design. First we're going to add a field to put some featured text on. Draw a dark gray (#0D0F0E) rectangle into a layer below the sidebar. I created four folders to keep the layout organized: One for the "Header" above everything, one for the "Sidebar" below the "Header," one for the "Content" below the "Header" and "Sidebar," and the last one for the "Footer."
You can add this rectangle into the "Content" layer, also you can add as many folders as needed inside these four folders. Once you've placed the rectangle in a proper place, apply a Drop shadow and a Stroke effect using the values below.
Step 17
Download some grunge corners and borders from here, and paste one over the gray background. Next, apply apply an Overlay effect to the corner with a color of #171612. Also, add another corner over the sidebar's background, but this time bring down its Opacity below 25%.
Step 18
Let's add some text. You can add any sample text, imagine that it's javascript driven text recent posts section, or a featured post section, something like that. I'm using the same grunge display typeface as used for the navigation bar with the color #4D0D0D and Arial with a color of #3F3F3F for the body text.
Apply a drop shadow effect to the title and add the same effect to the navigation items as well. When you convert this PSD into an HTML + CSS file, you'll need to convert these titles to images, so it's OK if you want to add more styles to them. Finally, use some guides to put the text layers into a proper place.
Step 19
Our featured bar is looking a little empty, so let's add a support image. In this case, I used a polaroid shot. You can download the polaroid picture from here. Extract the polaroid, paste it into a layer above the gray background and the grunge corner on the "Content" folder, then change the Hue/Saturation to make the polaroid a little more sepia (Select the Colorize option).
Use the same techniques for the "Label" layer's edges (Step 9). Erase and Dodge the edges of the Polaroid picture. Finally, add a drop shadow using the same technique as used in Step 10 of this tutorial.
Step 20
I had this sepia picture of myself so I'm adding it to the design. Add any image into a new layer above the "Polaroid" layer, select the black square of the polaroid, then Command + Shift + I to inverse the selection. Select the picture layer and Delete all the extra. Next, you can add more grunge details, like some masking tape over the picture, as shown in the images below. I applied a 1px Drop Shadow effect to the added tape as well.
Step 21
It's a good moment to add a RSS icon to the sidebar. Draw a Rounded Corner Rectangle (#99917E), then apply the following effects to it: an Inner Glow, a Pattern Overlay, and a Drop Shadow, use the values shown in the image below. Next, draw or paste into a new layer above the rectangle the standard RSS shape and fill it with black. Finally, change the "RSS shape" layer Blending Mode to Overlay.
Step 22
Now place the RSS icon on the sidebar's top left. Add some text like "RSS FEED." Draw another piece of masking tape, and write the number of subscribers over it. Remember, now we're working in the "Sidebar" folder.
Step 23
It's time to add a single post to our design. Just write some random text as a Title, another line for the date, category, and author. Also, some words as the text of the post. Typography is the most important in this step. I love to use Serif fonts for the titles and Sans-Serif for the body, but is just me. Decide what you feel is best for your design.
Step 24
To give our sample post a little more attitude, we're going to add a preview image, just like in the TUTS sites, but as this is a grunge design we need to add a grunge background to our images. This is as simple as adding padding top and bottom with CSS, then setting a repeating background image.
This image will be of 35mm film. Extract two small stripes from the film, and change their Hue/Saturation using the values in the image below. Next, using an irregular Eraser, Delete some areas of the stripes. Finally, add a Drop Shadow to each stripe. When you have finish with the film, paste any image below the film layers. I'm adding a picture of one of my travels. Finally, apply a Stroke Effect (#2F261D) to that image.
Step 25
Draw a 2px red line below the post and some text for the comments, it's a good idea to add all the post related layers into a new folder called "Post." Then increase the height of the document a little bit, you can do that by using the Crop tool, do this just to see how our design will look if it has two or three posts on it. Duplicate the "Post" group, and change the text and the image, as shown below.
Step 26
Actually it's looking pretty good, now add the titles of Sidebar's items. Yo can create a folder for each item as well.
Step 27
Now add a list icon. You can use any Custom shape. Add some random text, I'm using Georgia for the sidebar. Duplicate the icons and edit one to represent the hover state. Do the same for each Sidebar item.
Step 28
We're close to finished. Add some grunge details at the bottom of sidebar, by adding some grunge brushes into a new layer above the sidebar's background layer. Select the Sidebar's background layer, then go to Layer > Layer Mask > Reveal all. Next, hide some areas of the bottom left of the sidebar's background using an irregular black Brush.
Step 29
Finally, select the Sidebar's background layer and copy the layer style of it. Draw a rectangle at the bottom of the design inside the "Footer" folder and paste the layer style into it. Next, extract and paste this image above the Footer's background.
Adjust the saturation to make it a little bit more gray. Also, you can apply to that sheet of paper a drop shadow repeating the technique of Step 10. Add some text over the piece of paper, maybe a Slogan or something. And also add some footer text, like a quick navigation bar, and the copyright information.
Conclusion
Web design isn't an piece of cake, but I hope this tutorial will help you to improve your skills. It's up to you now, design your own, or sign up for PLUS to download the PSD source and play with it. I'd love to see some grunge web designs in the PSDTUTS Flickr group. You can view the final image below or view a larger version here.
Subscribe to the PSDTUTS RSS Feed for the best Photoshop tuts and articles on the web.
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 )PaulR September 24th
Really Cool Tut. Thanks
( )Dan September 24th
Not really my style but a well written tut.
( )Daniel Olmos September 24th
Alvarito…. no doubt… u’r a really great designer, u’r job is fantastic!.. Congrats ones again!.
( )Jorge September 24th
Nice tuto..
( )Drudoo September 24th
WOW really nice
( )Anthony September 24th
What a great tutorial, this is sweet. Hopefully, you’ll now bring this over to NETTUTS and show us how to code a site like this….eh? eh?
( )yusuf1 September 24th
thats a really brilliant tut! cheers
( )curtis allen September 24th
nices tut. keep up the good work.
( )Make Design, Not War September 24th
This has got to be one of the longest, most thorough tutorials on this site so far. Very in depth, helpful, and the final product is actually pretty cool. I do a ton of web designs and skins like this myself, but seeing it all laid out in a step process like this really shows how much work and skill go into a high quality design. Getting grunge to work artfully really is more work than it seems, but you’ve done a great job. I’d actually be interested in a Part II of this where you take it to a platform like Wordpress or something. Thanks for another great tutorial here! MakeDesign,NotWar
( )Daniel September 24th
This is amazing, I’d never thought to try that zig-zag pattern before, now I definetly will!
( )Webdesigner September 24th
Hello, This is definitely one of the best web design tutorial on the internet. Just more like this
Thank you!
( )EdpeppeRs September 24th
awesome tut, man! thx a lot! it’s very important to me! ^^
thx!
peace out!
( )Moritz September 24th
Wow, I love this tut. Would perfectly fit for my band website. Great inspiration!
( )Jeroen September 24th
Perfect one. I like it very much
( )mdeering September 24th
Great desgn thank you for sharing the techniques.
Not sure the article would belong here or on NETTUZ but I would love to see a follow up on how you would go about slicing and exporting this into the assets needed to mark this up in XHTML.
( )belrock September 24th
Very nice tutorial indeed. As an amateur, I join Make Design not War and would like to know how to put a ps-template into a living website. This would be very helpful and appreciated!!!
( )Qbrushes September 24th
Finally some more layout designs
( )BroOf September 24th
Hey looks great!
( )Geoff September 24th
Alvaro - you love the grunge, man. I’m glad there are no skulls. So sick of skulls. Skulls.
( )SnakeJake September 24th
Now THIS is useful. Awesome tutorial.
( )Nate September 24th
Awesome finished product. You did a great job =)
( )BogDinamita September 24th
wow this is so beautiful and unexpected, i can’t wait to try it!!
( )JTR September 24th
Oh my god! This is really amazing. I waited a long time for a tutorial just like that!
( )EAMejia September 24th
Amazing tutorial!!!
( )Lawrence77 September 24th
looking for this tutorial only [:D]…
( )NICE ONE…
thanks to “Alvaro Guzman” great work!
First of all i thanked you for sharing this much techniques…
Each step is valuable…….
Christian September 24th
It would be nice a detailed tut about exporting it to the web
( )monaye September 24th
Great tutorial !! I always envy of Designer who can create such nice Grunge Web Design.
( )Can I translate this tutorial and put on my future blog? Of course, I will write big note about original author and link to this page and about joining PSDTUT Plus.
Robin September 24th
Please, please, please take this into NETTUTS. Beautiful design. Thank You.
( )tabs September 24th
Awesome tutorial man. Been doing layouts for years now, still, I learned lots of tips and tricks here. Thanks for sharing and keep them coming!
( )Manuel Minino September 24th
so much cool tips in just one tutorial!! amazing!!
( )..and the design is so cool… “grunge” but elegant… congratulations Alvaro!! cool techniques and inpirational layout, now that’s what i call a tutorial!!
ELIAS DE OLIVEIRA September 24th
Muito massa!
Viva Photoshop CS4…
( )Cory Kemp September 24th
That’s fantastic. You proved that grunge can be elegant. It reminds me of the Coal March site, which is also very well done.
( )Alvaro September 24th
I’m really happy that you liked the tutorial. I wanted to make a grunge webdesign tutorial since a long time ago, but also I wanted to keep the clean style of Web 2.0… I think I did it this time
I hope you find it useful…
Thanks for all the good comments
( )insic September 24th
Indeed so nice. I love this kind of design but somehow i cant make one perfectly. Thanks for the tutorial.
( )NaldzGraphics September 24th
nice design.great work!!!
( )chris September 24th
damn this looks awesome. thx
( )macias September 24th
yeeep… please take this to Nettuts to xHTML / CSS it !
Nice lay
( )Misja September 24th
Great Tut! These are the designs everyone likes to make but our customers won’t let us…
I too would like to see you cut this up for Wordpress.
Misja
PS. In step 23 I think the third caracterpallet should not read Georgia…
( )5ivedance September 24th
Thank you for sharing this techniques…Just need it..
( )5ivedance September 24th
macias‘s idea is not bad.;)
( )john September 24th
cool.. looking for this
( )Chris Bauer September 24th
Thanks for the tutorial.
Add me to the list of requests to see this sliced and CSSed. Thanks again.
( )Shane September 24th
Another big thank you from me!
Great tutorial.
( )Joe September 24th
Hmm, yes, very nicely done tutorial but I agree with Dan that the style is not my cup a’ tea - the whole setup reminds of grunge rock which is REALLY 90s.
( )angeloff September 24th
This is great tutorial!
( )Johan September 24th
Thanks! Really nice.
( )nicolas September 24th
Very Nice Tut
Why not continue it in htmltut, with how to cut a template, how making a css site…
( )Andris September 24th
Really nice tutorial. Very well explained. Thanx a lot for this one.
( )Bill Biwer September 24th
Very in depth tutorial, some nice effects demonstrated.
( )Daniel Richard September 24th
Woah. That’s super detailed.
( )Kovilen September 24th
Really cool tutorial
( )David Sparks September 25th
I dig the tutorial however i have to say i think it got off on the wrong foot.
the ideal site width is 960. not 950. its divisible by a very large amount of numbers lending itself very well to grid based design which i believe to be extremely important. heres more info on the 960px width:
http://960.gs/
( )MSOnWired September 25th
Nice tutorial. It’s so fun to get lost in the details of a grunge design. Definitely would make a nice Wordpress theme.
( )Clarissa September 25th
Soooooo now you’ve got me anxious to slice and dice. When do we take this to completion? Are you designing this to fit a template’s measurements or defining your own?
( )Nestor September 25th
This is the one, very great tutorial, congratulations my friend AlvarÃn, good jog.
I waiting for your xhtml + css conversion for this tutorial º_º
Thanks
( )Takumi86 September 25th
Great Tutorial!! Keep them up man, keep them up
( )bergslay September 25th
Great Work Now… the HTML
( )Roy Nottage September 25th
Great tutorial! Grunge will never die (he hopes).
( )Jake Holman September 25th
Ah, awesome! I’ve actually always wondered how people produce sites in Photoshop first - I’ve always been a bit of a ‘hack’ designer, doing everything in raw HTML then seeing if it looks ok.
I’m old fashioned
( )Lamin Barrow September 25th
I love grungy stuff. Thanks for all of your time and effort putting this tut together.
( )Cory September 25th
Great tut. I think the beauty of tuts like this is that not only is the final work very inspirational, but the individual processes are also very valuable inspiration and learning tools. Thanks.
( )MONSTER September 25th
Nice and thorough. I may have to adapt several of these techniques myself.
( )jason September 25th
sweet! now teach us how to cut and code it with css.
( )Naykris Crowley September 25th
Great tutorial, thanks! Add to Favorites
( )Johnny September 25th
Looks awesome. Is there a place to download the psd file?
( )http://www.tranquilblue.com
Dainis Graveris September 25th
Nice design - very good and detailed tutorial!
( )Kelly September 25th
I love it! Thanks for the tutorial. I’d also like to see how you take this from PShop to the web, though, like WordPress or something similar.
( )andi September 25th
really nice end product, look forward to following this tut
( )tca September 25th
beautiful design. great work!
( )Fabryz September 25th
Aww, i’ve always really wanted to create a design like this for my personal website. Time to get inspiration from this article =)
( )liko September 25th
very cool, is it possible to make tuts about how to cut the works into HTML…..
( )Raj September 25th
very nice tutorial
Thanx a lot!
( )Nikhil Patel September 25th
Thats awesome !!!!!!!!!
( )And yeah……want another tutorial for making this a theme of wordpress……hehe
lo.asca September 25th
Please take this to NETTUTS and slice it up for WordPress, please!
( )John September 26th
I just want to extend thanks to you for writing a complete and wonderful tutorial. I personally, stink at grunge designs so i had to do this tutorial for a test of my own will….and it came out great, and now with some alterations here and there(so I’m not a COMPLETE copycat) I have a top notch grunge template in my arsenal thanks again, to you.
( )David Perel September 26th
Well done, great Tut!
( )Pete September 26th
Almost a perfect tutorial, but you spelled Subscribers wrong. So close yet so far.
( )Berkan Akyürek September 26th
A wordy Perfect. very nice tutorial
( )Ivan September 26th
Perfect - one of the best tutorials in psdtuts! fantastic results, very useful!
( )Alvaro September 26th
@pete your right!!! I just notice that hehehe my bad…
( )Small business website design September 26th
thank u r information
( )Navdeep September 26th
Very good one
( )Roach September 26th
I love this design.
( )Love it even more for the complicated CSS build.
Should keep the rip off merchants at bay.
WorldPress… indeed.
Conrad Gorny September 26th
Really nice work.
Conrad Gorny
( )Freelance Graphic Designer
http://www.conradgorny.com
Owz September 27th
Great tut, will be having a go at this tonight…
But I agree with everyone else.. It would be really cool if you did a 2nd part showing us how to code it.
Tutorials Like this are very helpful for me as I can apply these skills in my job..
Keep up the good work
Owain @ icomcreative.co.uk
( )Julio September 27th
Awesome tutorial. I’ll take some of your techniques into consideration. Keep up the good work dude.
( )Grafiko September 27th
Very nice a good tutorial, longest tutorial i have seen so far, but not as log as this cooments
.
( )sabry September 27th
god jop
( )Andrey September 28th
Realy interesting…. I am new in webdesign….
( )Matthew Heidenreich September 29th
great tutorial! Very nice outcome.
( )Joomla templates September 30th
I hope my clients never see tutorials like this because you make it look easier than it actually is. In reality, we don’t just add an element, pick a brush, rough it up and change the blend mode and viola. What sounds like 2 minutes would probably take 20 minutes tweaking and experimenting, undoing and redoing until it’s right.
But, I do love this tutorial and have picked up a few pointers.
Well done. Thank you.
( )Boots September 30th
And what about the second part from photoshop to dreamweaver?? Cheers
( )TiKi September 30th
That was Inzane
( )Daniel & Sophie October 1st
Dear Tuts, I always watch your creations and every time you surprise me. Now I´m trying to change the header of my blog but I cant´t find somebody with your ability, can you help me?. Do you belive in karma? If you´re thinking to came to Buenos Aires, we can give you Tango lessons for free !!!
Anyway, I love your work.
Daniel
( )2XTANGO.COM
Buenos Aires
ARGENTINA
ThePhotoshopper October 1st
nice and easy does it!!! great tute!!!
check out my grunge effect at
http://thephotoshopper.blogspot.com
–the photoshopper
( )Maxerateur October 4th
Wow, that’s really helpfull. Love the Outcome!
( )Great job!
Rishele October 7th
Nice tut! But how do I bring it to life?
( )across October 7th
wow guy awesome
( )romane October 8th
Thanks a lot. Great job.
( )Alvaro October 9th
Thank you guys, I’ll try to find some time to turn this into HTML + CSS
( )Scott May 29th
Still waiting….
Come on, man. Give it to us. The longer and more detailed, the better. Great tut. Thanks.
( )Clinton Montague October 11th
Awesome, thanks! Just learning Photoshop and there are loads of useful techniques here, thanks again
( )Daniel Braha October 12th
You make it look easy : )
( )Tiffany October 12th
Great TUT. I’ve only got half way through so far, but there are so many techniques that I would like to use for my own stuff. Thanks oodles.
( )Orama October 14th
I started working through this tutorial before it even finished loading everything. Little did I know how detailed it was…a few long but educated hours later and I’m done! You have tremendous talent and perseverance to make such a thorough and damn fine looking tutorial!
( )D-Jhun October 15th
Man, This Tut is perfectly expressed, i love it……..really tight! Love ya Man.
( )pablogt October 19th
cool
( )Brandon October 19th
Haha.. I really liked this tutorial.. Pretty awesome.. But you KNOW everyones gona have a grunge site now =P
( )IIAnnexII October 20th
I love creating grunge graphics. This is just my style.
( )youness October 22nd
great tuto
( )thx
Jeba October 23rd
could you please write the next version of this tutorial where we slice it and code it in for wordpress ??
That would be so awesome.. a complete tutorial!!!
Thank You
( )Cristian October 26th
Hola Alvaro,
( )Sot Cristian de Argentina, muy buen tutorial.
Te felicito por las cosas que haces.
Saludos.
Nico van Elk October 26th
This kind of inspired me to redo my website. And thanks to your tips it worked out. Did not steal too much as I like te be original
http://www.nicovanelk.com
Thanks a lot.
( )Azim.Khamisi October 27th
Great Gob . Thanks Alot
( )Azim.Khamisi October 27th
Great Job. Thanks a lot
( )tsauri28 November 2nd
woow.. it’s great..
( )gp November 5th
sooooo nice & I’m lovin it !
( )Mike November 7th
Well… nice graphics. Now make it WAI compliant.
( )Iddouchayt November 24th
Nice Design … I’ll improove my level in english
( )FL4PJ4CK December 1st
Wow, thats a really nice tut and its written in an easy english. i had a lot of fun with it and the result is pretty good. thanks!
( )Greets, Nico
Leeeo December 4th
Excuse me for my minor knowledge about this, but is this compatible with for an example iWeb? Or what is the best way to get it out on the world wide web?
Best regards leo
( )arvind December 4th
hi, can u tell me in describe step 2 plz
( )Chris Longmore Morin December 5th
I just love this look~! I’m going to give it a try soon and I’m saving this in Delicious! Thanks so much!
( )bomel December 13th
thanks for this tutz im using it now for my portfolio
( )aviking December 20th
I am going into my first year of web design and this tutorial is amazing. It will help me develop my skills that I will need to complete my course.
Thanks a million.
( )Juls December 24th
Wow, that’s a good job!
I’m graphic designer, but i’m working as web designer… so… sometimes i have problems to create some stuff for web… here you show us a good way of creating some nice page.
Thanks!
( )Buenos Aires, Argentina.
Rui Alão December 29th
Hey, Alvaro, great tut! I made it from top to bottom and learned a lot! thank you very much.
I think I found an inconsistency, which is in step 23. I think the 3rd block text is not on Georgia, and certainly not with black color… So there must be something wrong with the number 3 of the type boxes just before step 24… maybe you just used the 2nd box two times…
Thank you again and, like the others, I’m hoping for more tutorials like this one.
Saludo!
( )Rui
Mark Cohen December 29th
Hey this tut rocks! Thanks heaps
I followed it mostly step-by-step and built myself this wordpress theme: http://beingmarkcohen.com/
The resources you link to are awesome too. Thanks again for this!
Mark
( )Arch Clan December 30th
Great tutorial and easy to follow! http://archclan.deviantart.com/art/Journal-Rebel-107735124 I tried making my own and did some modifications
( )Tony S January 3rd
Sorry to sound negative - although the tutorial produces a great looking web page mockup, the steps are extremely difficult to follow. I know you mention that this tut is intended for intermediate to advanced users but there are so many assumptions made in the instructions e.g. Step 3. I would really appreciate more of a breakdown in the steps to follow.
( )joyaspx January 5th
very useful,thanks
( )Darshan January 6th
Great great….. no more words….
( )just the trendy….
Juggling Mike January 8th
Great tutorial! Very useful information!
( )Currently revamping my site and I have been thinking of a grunge design.
bee January 9th
Wow, thank you for this great tutorial!
( )Tom January 12th
Where Can I get those patterns From
Thanks
( )Steve January 17th
Grunge is ma thing 4 2009! and beyond!…..
( )DuH? January 23rd
So we can use this tutorial for our own website with no attribution? Or can we just use parts of it/
( )Dark_!Droll January 28th
Thanks men really useful,i think i can made some money whit! jajaja thanks.
( )Oras February 4th
Marvelous!!! I never saw such detailed tutorial about web design before
( )rich February 6th
…just found your web site and the tutorials are great! i’m a novice web designer and would love to create sites just like this but i rarely see any tutorials that cover coding the psd files into css? even the books that i’ve bought do not show this kind of work! maybe something to think about?
all the best!
( )Mallesh.M February 8th
suprerb!!! Plz show how to cut and giving css with dreamweaver
Thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
( )Daniel Linthwaite February 8th
Really Loved this tutorial
( )antony joseph February 13th
very good use of photoshop and skill
great work
thankx
( )Name February 13th
M8…u roCK!!!
( )Thnx 4 sharing!!!
shaz February 16th
I like the way you have taken us through the entire design work flow Alvaro its a crisp professional design and the tutorial was well written.
( )jaspreetsingh February 27th
thank you so much owesome
( )you really deserve my teacher
kim&rock!! February 28th
it’s really nice. u rock!
( )Nebuto February 28th
Nice Work. Thanks for all Tipps o this tutorial.
( )Sebastian March 3rd
Wow! Thanks for this great tutorial. I followed along, adding a few of my own images, of course, and ended with a pretty nice result. Thanks for all the help. This has truly inspired me to do more like this.
( )Alvaro March 3rd
Good job! you followed it really well
( )kaiyajoy March 12th
Thanks a million for this very nice tutorial. I really appreciate all of your time helping us all out. Thanks again!
( )Jamie Allsop March 13th
Nice work on producing a detailed tutorial. It would be nice to see how you develop this site using html and css. I haven’t really created a grunge style web design before, but after seeing this tutorial I think I am going to give it and go and see what I can come up wih.
( )sergius March 13th
As someone said u rock, well done Alvaro from Bolivia..
( )flodan March 16th
Great work, very nice tut.
( )ilham March 19th
wow that”s really cool man, stand out of the crowd
( )chris March 24th
interesting tutorial, excellent imagery. But does this mean you are using just one large image ofr the basis of a webpage? Are there not any dynamic elements? Believe me i am not complaining, just curious. And yes, I am still impressed by this work
( )chen yan March 26th
I like this style，Very cool.Although my English a little difficult to watch, it is possible to study a lot of.
( )Grégoire Noyelle (web designer / Paris) March 26th
Thanks a lot Alvaro. It give me many new perspectives !
( )Take care.
Grégoire
Politik, March 26th
THAT IS AMAZING. PROPS, MAN.
( )Joan April 6th
Well done man, greetings from Dominican Republic.
( )Tony April 8th
Love to say, It is CLASSIC`.
( )judy m April 10th
Grudge is cool but its is a very specific style for specific people. This would be perfect in the appropriate setting.
thanks, -chicago web design
( )2letmec April 13th
hey, thanks for this great tutorial, think I’ll get busy and start mine real quick
( )Mitch April 16th
Here is my wordpress themed version. http://www.subarupoweredprojects.co.uk/
( )Phoenix April 16th
Right. I keep making these beautiful layouts for a site i want to make, from all these tutorials. Yet I have no idea how to code it and I don’t want to pay someone to do it. >.<
( )I fail.
Christian Kahle April 16th
Yeah it’s very cool.. Great Tutorial !
( )directly subscribed the rss-feed^^
Aarti April 17th
Hi,
Great work and great tutorial…It’s very helpful…The detailing you have done is awesome….choice of colours is also wonderful. I have used your concept and tried ..would love to hear from you abt how i fared…..
Thanks a ton
( )Carl114 April 18th
Unbelievable. Beautiful. Really. Thanks a lot for the instructions. Such instructions for us in the Czech Republic do not have.
( )gx2000 April 25th
wonderful tutorial. it helped a lot with some shortcuts and effects that i’ve been meaning to learn.
( )JerichoHM May 6th
I’ve followed every step exactly as you have it and have had to do some major tweaks to things like opacity to get similar but not even close to exact results? I’d like to think that the color blue doesn’t change the results this much!!! Are there simply things not shown in here and you expect us to just toy with it some or no? I love the tut and the final design is gorgeous but I just can’t seem to get the same results.
( )naviyah May 7th
very nice!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
( )Alex May 15th
One word, WOW! I have tried so many times to make a Grunge look like this for my website, but I seem to over do it and end up with a bunch of cluttered elements all over. Thanks for showing us how it is really done.
( )the promise in spring May 21st
very nic! Ilike it ,thanks
( )Natalino May 27th
Nice tutorial, the steps are all there
( )Carmen May 28th
Unfortunately, when I get to Step 2, my version of Photoshop (CS3) doesn’t have a “Define Pattern” command in the Edit menu or anywhere else. Any help?
( )Papilouve May 30th
Wahou !!! thx a lot for your resources and tutorials
( )Showvhick June 1st
Hi I have used it before.It’s nice.I like it.Thank u for such best tutrorials
( )Rohan June 3rd
I’ve developed this into a Wordpress theme for myself. I haven’t put it up yet, but its awesome! Thanks so much, Alvaro!!
( )Tim June 4th
Nice one Alv.
loving some techniques u have used.
( )noelmcg June 4th
cheers, great tutorial
( )Mike Ducey June 7th
I loved how this looked and I can follow how you did this in Photoshop. This may be a silly question, but how do you go about making this useable for a website. Do you start slicing things up and creating and positioning them or use an image map to make the different areas that are in this large .gif or .png image useful as buttons. What would be a next step tutorial that you would suggest?
( )Syed Aftab Ali June 9th
It’s just awesome. Superb work.
( )Bob June 18th
THIS IS A RIP OFF OF BLOG v2 FROM YOUJOOMLA!
( )Alvaro June 22nd
I don’t think so
anyway can you send us a link to check it out? thanks 
( )