How to Create a Grunge Web Design Using Photoshop

Jun 15 2009 by Jan Cavan | 95 Comments

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.

95 Comments

Ricardo Williams

June 15th, 2009

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

chris

June 15th, 2009

so easy thanks

Geeee

June 15th, 2009

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

Karly West

June 15th, 2009

Thanks! I’ll try this one out!

Andrew Hite

June 15th, 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!

Nathan

June 15th, 2009

Great tutorial – love the effects and the design style!

Nick Ramage

June 15th, 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.

Greg

June 15th, 2009

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.

T-Law

June 15th, 2009

Nice tutorials, thanks Jan.

Nikki

June 15th, 2009

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

Ifeanyi

June 15th, 2009

I definitely learnt a lot from this, great tutorial.

John Arthur Gurondiano

June 15th, 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!!!

EricB

June 16th, 2009

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

Jarryd

June 16th, 2009

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

Ashely Adams

June 16th, 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.

Jon

June 16th, 2009

Excellent tutorial, Jan. Thanks so much

Jon

Iskandar

June 16th, 2009

Serously! This was truly amazing design……

I always like grunge style

Barbara

June 16th, 2009

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

Fawwa7

June 16th, 2009

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

Web Desibn

June 16th, 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

June 16th, 2009

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

Try getting it from Blend Fu

okinawa

June 16th, 2009

Love this tutorial, thank you!

Franz Jeitz | fudgegraphics

June 16th, 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

June 16th, 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

June 16th, 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.

Jan

June 16th, 2009

@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

June 16th, 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

June 16th, 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.

Murray

June 16th, 2009

Very good, gonna try this later on tonight :)

nidhish

June 17th, 2009

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

SJL

June 17th, 2009

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

StriderGax

June 17th, 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

June 19th, 2009

Great website design!thanks!

tirath

June 19th, 2009

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

June 20th, 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

June 21st, 2009

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

yuvraj

June 21st, 2009

this is great website design………… thanks

PeHaa

June 22nd, 2009

Looking forward to part 2. Huge thanks for sharing.

shephard

June 22nd, 2009

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

cymer

June 22nd, 2009

where to find feather eraser?
^_^

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

chris

June 23rd, 2009

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.

cymer

June 24th, 2009

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

denise

June 24th, 2009

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

Ellimist

June 25th, 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

June 25th, 2009

The follow up is coming very soon.

jp

June 28th, 2009

when?

Nanette

June 29th, 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

June 30th, 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

June 30th, 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!!!

Tance

July 1st, 2009

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

Fernando

July 2nd, 2009

Any news on when is Part 2 coming up?

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

Mnowluck

July 2nd, 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?

Avery

July 7th, 2009

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

denise

July 7th, 2009

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

July 14th, 2009

Great write up guys!

Just wondering when part two will be coming along?

Jacob Gube

July 14th, 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

July 15th, 2009

no worries Jacob!

I look forward to part two.

th3mon

July 18th, 2009

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

Jasmin Halkić

July 18th, 2009

Very nice tut. Thanks!

Jan

July 20th, 2009

You’re welcome everyone! Thanks too!

Hussain

July 22nd, 2009

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

Angelica

July 30th, 2009

WOW! Thanks

Kevin

August 3rd, 2009

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

August 3rd, 2009

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

chris

September 2nd, 2009

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.

Mel

September 5th, 2009

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

Davide

September 7th, 2009

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

Diosan

September 9th, 2009

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

Lance

September 22nd, 2009

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

Nits

October 11th, 2009

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

Senan

January 10th, 2010

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?

Sakda

January 10th, 2010

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

Dave K

January 24th, 2010

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

January 25th, 2010

really superb!!!

Dr. Atta.ur.Rehman Mian

January 28th, 2010

Impressive & Great Work… Thank you so Much!

nisym

March 1st, 2010

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

diana

April 15th, 2010

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

July 13th, 2010

Thank You

Anirban

July 24th, 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

July 29th, 2010

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

yumeijuan

July 29th, 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

November 2nd, 2010

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

Joe

November 29th, 2010

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

lesley

December 1st, 2010

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

Mohammad Danish

January 28th, 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

March 21st, 2011

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

Scottie03

April 19th, 2011

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

Thanks

Roman

June 29th, 2011

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

a designer

June 29th, 2011

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

Shubhana

July 15th, 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

August 10th, 2011

thats nice, so simple and very beautiful and creative

vino

September 17th, 2011

superb tutorial. Very thanks

ytsionis

November 4th, 2011

nice tutor thnxs

Leave a Comment

Subscribe to the comments on this article.