Menu

How to Create a Grunge Web Design Using Photoshop

How to Create a Grunge Web Design Using Photoshop

In this step-by-step web design tutorial, you will learn how to craft a beautiful and eye-grabbing grunge-themed web layout using Photoshop. This tutorial is geared for beginners and intermediate-level Photoshop users.

This is a two-part tutorial series that will show you how to create a grunge web design using Photoshop, with the second part as a follow-up web development tutorial providing you instructions on how to convert the design mockup to a fully-functioning web page using standards-based HTML and CSS.

Update: The second part of this tutorial series has been posted:

Final Result

Click on the following image to view the full-scale version of the design that we will be creating together in this Photoshop tutorial.

Final Result of Grunge Web Design in Photoshop

Setting Up the Photoshop Document

1 Create a new document in Photoshop with the dimensions 1200px x 1160px and with the document settings shown in the following figure.

Setting Up the Photoshop Document

Creating the Layout’s Background

2 On the first layer, create our background using the Gradient Tool (G). Make sure Linear Gradient is selected as the Gradient type. Set your Foreground color to #9D6000 and Background color to #FFFFFF.

Creating the Layouts Background

3 We will add some texture to our gradient background. Download the set of Light Grunge textures from Bittbox.com. These textures are free for both personal and commercial use but are not to be sold or redistributed in any way. We will use several textures from this set, so for convenience, keep the contents of the set handy throughout the tutorial.

Open the file called 3484741593_7575a6ebc7_b.jpg in Photoshop, File > Open… (Ctrl + O). Drag this texture onto our design and change this texture’s Blending Mode to Overlay. Using the Transform Tool (CTRL + T), make this texture fit the size of the canvas by dragging the transform controls around the texture.

Creating the Layout's Background - 2

4 Using an ordinary feathered Eraser (E) with a 300px Master Diameter and its opacity set at 21%, erase the right side and far bottom areas of the texture. The following figure shows which areas we will be erasing (check the highlighted areas of the image). We are doing this because the website we are about to create is meant to be left-aligned. By erasing in the manner specified, we need not worry about having to tile the textures seamlessly, we only need to tile the gradient background.

Creating the Layouts Background

5 From the of Light Grunge textures set, open 3484744611_f995d6c67f_b.jpg in Photoshop and then drag it onto our canvas. Using the Transform Tool (T), rotate it 90 degrees clockwise. Change this texture’s Blending Mode to Luminosity and the layer’s opacity to 39%. Repeat Step 4 for this texture, erasing parts of the layer with a soft featured eraser.

Creating the Layouts Background

6 Download the Ink Scribbles Brush Set from FudgeGraphics.com. These brushes are free for both personal and commercial use but are not to be sold or redistributed in any way. Activate the Brush Tool (B) and load this brush set by clicking the tiny arrow as shown on the image below.

Creating the Layouts Background

Once the brush panel shows up, click on the other tiny arrow and click on Load Brushes. Refer to the following figure below.

Creating the Layouts Background

7 Create a new layer above the textures. With the Foreground color set to #000000, use the 6th brush from the Ink Scribbles Brush Set we downloaded.

Creating the Layouts Background

Click once on the upper left side of our canvas to apply the brush stroke. It is not necessary to show the entire brush. Position it in such a way that only the bottom right part of the brush stroke will appear on the canvas.

Creating the Layouts Background

Change this layer’s Blending Mode to Overlay and the layer opacity to 52%. We should now have something like the following figure.

Creating the Layouts Background

8 Repeat Step 7, but this time, use the 9th brush from the Ink Scribbles Brush Set.

Creating the Layouts Background

Set the Blending Mode of this layer to Overlay and decrease the opacity value down to 41%. We should now have something like the following figure.

Creating the Layouts Background

9 Create a new layer. We’ll use the 6th brush from Ink Scribbles Brush Set, but with a brush’s’ Master Diameter adjusted to 432px. Click on the upper left corner of the canvas to apply the brush stroke.

Creating the Layouts Background

10 Using the Smudge Tool with a Feathered Brush selected, smudge the layer by clicking and dragging your mouse on the canvas in a downward motion. Do this until you get something like the following figure.

Creating the Layouts Background

11 Change this layer’s Blending Mode to Overlay and its opacity to 35%. Now you should have something like the following figure.

Creating the Layouts Background

Setting Up Photoshop Guides

12 We are now going to add the content. Make sure that our content is centered on the Photoshop canvas, not exceeding the 1000px in width. To ensure that we keep our site content inside 1000px, use Photoshop Guides by dragging them from the Rulers on the left and top sides of Photoshop (refer to figure below).

Photoshop guides.

Making the Website Logo

13 Using the Horizontal Type Tool (T) with a color set to #3A0707, add the title to our mockup; this will serve as the site logo. Here, I used the font called Stam Pete from dafont.com. This font is free for personal use only. If you want to use another grungy font, you can find a large collection of grunge fonts on the dafont.com.

Making the Website Header

Making the Site’s Primary Navigation

14 On the right-hand side of the logo, add the navigation text using the same font and color.

Primary Navigation.

15 Add a division in between each navigational item. Using the Horizontal Type Tool (T) and the same font and color, type the letter "I" in between each navigation item, effectively creating vertical dividers in between them.

Note: the font size of the divider must be increased in such a way that it is slightly bigger than our navigational items.

Duplicate the letter "I" 4 times and spread it across the navigation evenly.

Primary Navigation

Making the "Featured Work" section

16 Below our title and navigation, we will add a "Featured Work" section. Add a photo or screen capture of your personal work (to serve as a thumbnail). Add a description of the work on its left. The same font (Stam Pete) is used in the heading, and the rest of the copy is the web-safe font called Arial.

Featured Works section.

For the featured work thumbnail, add a stroke around it by right-clicking on the layer and selecting "Layer Styles…" on the context menu to open the Layer Styles dialog box (alternatively: double-clicking on the layer will also open the Layer Styles dialog box). Use the settings below for the Stroke blending option. The color of the stroke is #BA5009.

Featured Works.

Making the "More Work Samples" Section

17 Now, we’ll add a "More Work Samples" section below the "Featured Work" thumbnail. For the heading text, use the color #BA5009.

More Works Samples

For the stroke around the thumbnails, follow the same instructions in Step 16. The color of the stroke is #E7C788.

More Work Samples

Designing the "About This Website" Section

18 On the opposite side of the "More Work Samples" section, add an "About This Website" section. Use the same font type, font size and font color that we used for the "More Work Samples" heading. Use Arial for the rest of the copy.

About the Website

Designing the Secondary Content Section

19 Below our "About This Website" and "More Work Samples" section, we’ll create three  sections to accommodate "Get In Touch", "Flickr" and "Twitter" sections. The same font type, font size, and font color from the previous step (Step 18) should be used.

Secondary Content Section

Making the Site Footer

20 Below the three sections we just created, create a selection using the Rectangular Marquee Tool (M). Using the Paint Bucket Tool (G), fill this selection with the color #BA5009. This filled-in selection will serve as the background for the site’s copyright information.

Site footer

Siter Footer

21 Using the Eraser Tool (E), select any of the Ink Scribbles Brush Set brushes we downloaded and change its opacity to 21%.

Site Footer

Erase some areas of the rectangle we just created in the previous step and then add the copyright text at the center of our document using the Horizontal Type Tool (T).

Site footer.

Make sure that when adding the copyright, Anti-Aliasing is turned on. This ensures types in smaller sizes to be more crisp and readable.

Site Footer.

Making the Horizontal Dividers

22 Now, we’re going to add divisions to each of our section. Create a new layer. Using the Pencil Tool (B) with a Master Diameter of 2px, draw a straight line across our across our canvas right to delineate the site header. Hold the Shift key when drawing the line to make sure that the drawn line will be straight.

Horizontal Dividers

23 Select the Eraser Tool (E). Choose any brushes from the Ink Scribbles Brush Set and reduce its Master Diameter to 97px and opacity reduced to 40%. Slightly erase some of the areas to grunge up and distress the pencil line.

Horizontal Dividers.

24 Duplicate the division layer twice by right-clicking on the layer and selecting "Duplicate Layer…" in the context menu. Use the duplicated layers to separate each section; use the following figure as a reference.

Duplicate the dividers.

Finished!

Congratulations, we’re finished with our grunge web layout mockup! If you followed this step-by-step tutorial, you should come out with a web design mockup as shown below.

Finished Result

The "Grunge Web Design" Tutorial Series

This tutorial is the first part of a two-part tutorial series that shows you how to create a grunge web design in Photoshop, then how to code the grunge web design mockup into a standards-based (X)HTML template.

The next post will be published next week and to make sure that you’re notified as soon as part two is published, you have to subscribe to the Six Revisions RSS feed.

Related content

About the Author

Jan Cavan is a Designer, Front End Developer and Illustrator, whose work has been featured in various online publications, books and magazines worldwide. She runs Dawghouse Design Studio, which is also a design blog providing tutorials, freebies and inspiration for the design community. Connect with her on TwitterFacebook, and Dribbble.

This was published on Jun 15, 2009

95 Comments

Ricardo Williams Jun 15 2009

nice. good post, i like the “grunge” style

so easy thanks

thx for the good post well done Jan keep it up ;)

Karly West Jun 15 2009

Thanks! I’ll try this one out!

Andrew Hite Jun 15 2009

Great tutorial. I don’t usually like web design tutorials because they typically end with a bland, basic, and uninspired design that doesn’t illustrate anything beyond basic Photoshop use. I know tutorials are meant to show how to use a tool and not provide a design for people to straight-up copy and use for a production-level website, but it’s nice when the steps provided end with a nice, engaging design. Thanks!

Great tutorial – love the effects and the design style!

Nick Ramage Jun 15 2009

Thank you SO much – i have been chugging along with a content driven site for work fo ages, so your article has given me the inspirational kick in the pants to finally do something just for moi! Being a graphics newbie the design stp-by-steps are great… Cheers from Australia.

N.

Grunge has been used sooo much over the years, yet I seem to still have an undying passion for well done grunge sites like this. Thanks for the inspiration/tutorial.

Nice tutorials, thanks Jan.

Jan, this is a great tutorial! Grunge is a common trend right now, and a tutorial like this is needed. Thanks!

Ifeanyi Jun 15 2009

I definitely learnt a lot from this, great tutorial.

John Arthur Gurondiano Jun 15 2009

Hello!!!

Very nice tutorial and I like it very well, and I would like to ask something can you provide a tutorial that has a content management system included because I want to learn how to create a commercial site in the future.

Thank you and more power!!!

Awesome post! I like the colors used on this mock up. Thanks for sharing! :)

Very nice design, and I’m digging your personal site too.

Ashely Adams Jun 16 2009

Wow, that design is just screaming Curt Cobain (Yes, I’m a big Nirvana Fan). Very nice Jan. The tutorial was not very special but the end-effect was very well achieved.

Excellent tutorial, Jan. Thanks so much

Jon

Iskandar Jun 16 2009

Serously! This was truly amazing design……

I always like grunge style

Barbara Jun 16 2009

Very nice grunge tutorial. I like this layout a lot.

It’s really nice, especially the brushes and the way you use it.

Web Desibn Jun 16 2009

nice post,I like it and i like the color use in the mock up.Nice Tutorial and it is very useful to those who want to learn this.

Ant Davis Jun 16 2009

The original site for the ink scribbles brush set is broken!

Try getting it from Blend Fu

okinawa Jun 16 2009

Love this tutorial, thank you!

Franz Jeitz | fudgegraphics Jun 16 2009

This is a great tutorial and I’m thrilled to see that you used my Ink Scribble Brushes. Unfortunately my site is down at the moment. I’m in the midst of changing hosts. For all those who still want to download the brush set please go to http://fudgegraphics.deviantart.com/art/Ink-Scribbles-116306611

Sorry for the inconvenience.

Anthony J Jun 16 2009

Hey Jan. Good post. I enjoy seeing different ways of creating a grunge style.

Not as a test, but out of curiosity, what would you do for this design to cater for visitors viewing on a monitor with a resolution that’s more than 1200px wide? Or am I jumping the gun for Part 2?

Jacob Gube Jun 16 2009

@Anthony J: Yes, that will be addressed in part 2, and since I’ll be writing part 2 – I might as well answer it. We repeat the body background horizontally (repeat-x) and set the top-left background graphic as the background for the layout container… she did mention that in Step 4 of this tutorial though.

@Franz Jeitz | fudgegraphics: Thanks for the update!

@Anthony J: Sites like mine are left-aligned and there isn’t any problem viewing it in any resolution. My resolution is 1680×1050. You will be able to learn more about it when Jacob discusses Part 2 :)

I’m happy you guys like the tutorial. Thank you!

Anthony J Jun 16 2009

Jacob, thanks for the info. That bit in step 4 must have escaped me. Sorry about that. Look forward to your follow up article.

aussieaubs Jun 16 2009

hi Jan, thanks soooo much for this fantastic easy to follow tutorial. Would love to see more of this style of writing and tutorial about creating other types of website.

Very good, gonna try this later on tonight :)

nidhish Jun 17 2009

very nice design, and colors. but some clients didn’t like grudge design…..

Great website design, I will try some variation this week. Thanks for sharing :)

StriderGax Jun 17 2009

What a great tutorial! I will definitely play with the design this week. On a side note I found this site that is running a contest for tutorials called GuruShare (google it). You might want to check them out. Thanks for the great work!

donohue Jun 19 2009

Great website design!thanks!

Awesome web layout with nice tutorial
I learn lots of new technique because of your awesome & valuable tutorials thanks a lot for your kind effort for always posting great tutorials for us
You are genus
keep up good work
God bless you :-)

Nicholas Z. Cardot Jun 20 2009

Awesome tutorial. I’m absolutely a fan of grunge, textured websites rather than glossy web 2.0 sites. I love this type of stuff. Great work here.

United20 Jun 21 2009

This tutorial is absolute beautiful. It helps me with a new webdesign …

this is great website design………… thanks

Looking forward to part 2. Huge thanks for sharing.

shephard Jun 22 2009

i have aproblem i have downloaded font but i don’t know how to load it to photoshop

where to find feather eraser?
^_^

I am not that familiar about the tools.
hahaha
can you help me?

Great Tut.

This is a photoshop design, which is great for just that, but doesn’t seem to be practical for high volume / constant updated sites.

Wouldn’t it be better to use CSS and java for the images and internal graphics (headliner is fine).

I’m somewhat new to designing, especially photoshop exclusive, so this is an important question in my regards. Not trying to be negative.

shephard,go to windows, font, then paste it there.

awesome tutorial!! *patiently* waiting for part 2!! (jumping up and down)

Ellimist Jun 25 2009

Any idea when part2 will be out? I can hardly wait!
Very good tutorial, so excited to see how to turn this into a working website!

Jacob Gube Jun 25 2009

The follow up is coming very soon.

when?

Nanette Jun 29 2009

This is a great tutorial and a great look, I am hoping you will help us turn this into a WordPress blog… what do you think? I would be willing to make a donation.

pac-creative Jun 30 2009

@Chris that’s the second part of the tutorial where she’ll be slicing up and putting it into CSS/XHTML to be used with a CMS or straight static website. Most website are PSD first then sliced into CSS/XHTML, notice body text is Arial and common web fonts.

Alice Kaye Jun 30 2009

This was a terrific tutorial. Very helpful! I’ve been trying to figure out how some of these intricate web designs are made. I’ve finally gotten back into the designing portion rather then just the coding and these little tips & tricks really help. :) Can’t wait for part 2!!!

Thanks Jan! This was a wonderful tutorial! Can’t wait for the second one!!

Fernando Jul 02 2009

Any news on when is Part 2 coming up?

would really love to finish up this project.
thanks :D

Mnowluck Jul 02 2009

this is awesome and this has helped me in designing a webpage. now I want to slice it and it doesn’t work the way I want and I am waiting fro the tutorial of this. When can I expect the xhtml and css part?

Very nice design, and I’m digging your personal site too.

very very very interetsed in part 2! I’ve subscribed and I enjoy all the other great content – really hoping you post part 2 soon! Thanks!!! -same ‘denise’ who posted 6/24 :)

Paul Ehrenreich Jul 14 2009

Great write up guys!

Just wondering when part two will be coming along?

Jacob Gube Jul 14 2009

I sincerely apologize for the delay of the follow-up. One of the excellent tutorial writers on Six Revisions is on it as we speak. With that said – it’s still significantly delayed and so please do subscribe to the RSS feed on Six Revisions so that you get notified right away when the tutorial follow-up has been posted. Thanks.

Paul Ehrenreich Jul 15 2009

no worries Jacob!

I look forward to part two.

Nice! Nice! Nice!
Thank you very much for this post!
Thank you Jan!
God bless you!

Jasmin Halkić Jul 18 2009

Very nice tut. Thanks!

You’re welcome everyone! Thanks too!

Hussain Jul 22 2009

Very nice and short way to build a cool web template. Thanks for Jan.

Angelica Jul 30 2009

WOW! Thanks

great tutorial. What i would like to see included is screen shots of the designs created by the people that have followed this tutorial to see how this has inspired them. I will be using these techniques and layout for inspiration for a project i am working on. thanks

lhoylhoy Aug 03 2009

great job! great tut to follow for beginner’s like me!

It is unfortunate the second part of this isn’t up. I am guessing the project kind of withered on the vine.

What was presented was very helpful though.

Jacob Gube Sep 03 2009

@chris: The second part is up: How to Code a Grunge Web Design from Scratch.

I can’t love you for this any more. Thanks so much! You genius!

Interesting. Now I’ll try it.
Thnx very much.

@Franz Jeitz: thnx for the update. I was really waste time for the download… :)

Davide aka ilgadda

i like this tutorial..!…thanks…!!!!!!!

Great grunge style – my best website style / design at the moment

useful article stuff for the new bloggers to create creative blog for themseleves.

I can not keep in mind when i last blogged on a website. largely the communities failed to understand what they were talking about. your website has the foremost learned folks on this issue for quite a long time. do you have got other forums or sites i can post on?

Excellent blog with lots of helpful information, Are there any msn groups that you just suggest I be a part of?

Love this. I’d bookmarked this page ages ago to give it a try. I’ve no experience in Graphic design or Photoshop, but this really got me going!

Thanks for the inspiration to learn more about Photoshop!

krishnan Jan 25 2010

really superb!!!

Dr. Atta.ur.Rehman Mian Jan 28 2010

Impressive & Great Work… Thank you so Much!

Thank you , I need help of my work.
So I want know about it.
From CHINA

thank you for doing this, this is what you cal being united! i love when all the designers get together feed of each others knowledge and gain more inspiration! love it! Thank you

Mustafa Bozkurt Jul 13 2010

Thank You

Anirban Jul 24 2010

heya itz realy one of a kind…kinda cool n realy easy duh huh…m a web coder, nt adesigner but i find it realy very esy n nice…keep up author nice work!!!

Rhobert Jul 29 2010

beautiful design I like it so much,,, the tutorial is very clear,, thanks to the author.

yumeijuan Jul 29 2010

Hello This is my name (郁美娟).Icame from china! I like your design. But i’m a junior scholar . I think the design of the better i can give you study? I have a very distant goals become a graphic designer
I like the picture with a picture of the picture’s very sensitive
Although some is not very clear
But i like to see his

Tommy Nilsson Nov 02 2010

How do u download Light Grunge textures from Bittbox.com.

so cool so cool amazing im like so happy you did this!!! :))
very astonishing

i think Joe is so stupid and immature what the hell are you posting stupid things for man geez!!!

Mohammad Danish Jan 28 2011

Thank you for great post, this is what you cal being united! i love when all the designers get together feed of each others knowledge and gain more inspiration! love it!

Thank again.

Emily van der Merwe Mar 21 2011

Jan, thank you so much for an understandable tutorial. First tutorial I used without frustration and where I could actually learn something.

Scottie03 Apr 19 2011

Great tutorial! Easy to follow – very creative. Have you given any thought to make a video tutorial?

Thanks

Thank you! Just right for my new blog, it would be nice.

a designer Jun 29 2011

thats nice, so simple and clean yet grungy hmm, lets get rock and rolling..

Shubhana Jul 15 2011

very very outstanding job. I like it so mush who are the actor plz add me it’s my address [Email address removed for privacy] plz add me in too facebook

irfan sunny Aug 10 2011

thats nice, so simple and very beautiful and creative

superb tutorial. Very thanks

Christian Sep 28 2011

Hi, great tutorial!!

My training work: http://cmiguez.netau.net/wp-content/uploads/2011/09/Diseño-grunge.jpg

thanks a lot

ytsionis Nov 04 2011

nice tutor thnxs

This comment section is closed. Please contact us if you have important new information about this post.

Partners