Grudge style is meant to be quite the opposite of the Web 2.0 Style Design: dirty, and irregular. Often times grunge design features more ‘Down to Earth’ elements, whether it be with photos or texture.

The Core Features of Grunge Style

Here are some of the key features that define grunge design. We’ll need to consider them when making our own Grunge Style Web Design:

• Grunge design almost always includes some sort of texture. Texture is ‘real’, and often times dirty or old.
• Typography in a grunge design usually uses serif fonts, although all fonts can be implemented. A number of techniques, however, should be present to make the typography look old, washed away, and like a real element on the page.
• Grunge design is never perfect. This type of design often features out of place objects, crooked images or textures, and washed away typography or pictures.

Research

As always, we’ll do some research before we start designing, as well as gather some resources. Considering the points above, let’s research grunge design to find out more techniques, and collect grungy fonts, pictures, and textures.

• Grunge Style In Modern Web Design
• 30 Beautiful Examples of Grunge in Web Design
• Ultimate resources for grunge design a massive collection
• Grunge Design Inspiration Showcase
• 200+ Textures, Brushes, and Fonts: Ultimate Grunge Roundup
• GrungeTextures.Com
• SeamlessTextures.net

The Grid

1. Go ahead and create a new document that is 1200×1200 pixels. Let’s fill the background with a dark gray so we can see the grid better when creating it.

2. Make sure the rulers are open by pressing ‘Ctrl R’. They should show on the top and left of the workspace. Right click one of the rulers and make sure it is set to pixels.

3. By dragging the rulers from the left-hand ruler, create side margins at 150px and 1050px. This will create 900px to work with in the middle. With added padding and other forms of spacing, the content should be an appropriate width for anyone with a 1024×768 screen resolution and above.

4. Drag rulers from the top ruler to create horizontal margins. I created 50px margins from the top and bottom to start. Created a top header that is 100px tall, left 20px for padding, a second header that is 300px tall, and then another 20px margin.

From the bottom margin I created another ruler for a footer that is 200px tall, then created another 20px padding margin, and left the rest for the content area.

Click on the image to see the full size. You can see the heights of all the margins I’ve created in the screenshot captions.

Grungy Background

Next we’re going to find a grungy texture put in the background. Like stated above, texture is one of the primary features of grunge design. I found the site below with some really neat seamless textures:

• http://seamlesstextures.net/tagged/grunge

1. Pick out one of the textures. I’m going to use the 4th one down in the Grunge category.

2. Download the image and open it in Photoshop. Go to Edit > Define Pattern and save it with an appropriate name.

3. Next, go to our layout and select the Paintbucket tool (Press ‘G’ on the keyboard). In the toolbar options panel (up above), select ‘Pattern’ in the dropdown menu, and find your newly created pattern in the drop down to the right of that. It should be near the bottom.

4. Fill in your background with this new pattern. Because it is a seamless pattern, you can use the image you found off of the above website as the background in CSS.

Content Background

Our next step is to create backgrounds in the content areas for more legible text.

1. Select the Eyedropper Tool (‘I’ on the keyboard) and select the lightest color you can find throughout our background image. I found #c2b89f.

2. We’ll want to go a bit lighter than this, so open up the Color Picker by clicking the color on the bottom of the toolbar. Manipulate this color so it ends up a lighter version.

3. Create a new layer clicking the ‘New Layer’ icon at the bottom of the layers palette. We’ll create the content background in this new layer to differentiate it from the background texture.

4. Using the Rectangular Marquee Tool (‘R’ on the keyboard), select the area for the first header, and then use the Brush tool (‘B’ on the keyboard) to color it in. Do this for the second header, content section, and footer.

This would be a good time to rename our new layer to something more appropriate. I’ll name mine ‘Content Background.’

5. Our current background for content looks a bit out of place from our design. Let’s add a stroke around all the boxes to give some more effect. Right click the new content layer and go to Blending Options.

Click on ‘Stroke’ on the left hand side, and change it to the following settings:

This will provide our border with some separation of the background, while adding some visual appeal by matching the grungy background’s inconsistency.

6. To make our design look worn, we’re going to switch to the Eraser Tool (‘E’ on the keyboard). Find some grungy brushes if you don’t already have some, through the links above.

7. Find a grungy brush and start erasing the corners and edges of the blocks to seem worn and old. Switch between different brushes to get a variety of erases.

Above is a closeup of the content background layer once some of the edges have been removed.

Title and Primary Navigation

Next we’ll start adding some content. We’ll add the title and primary navigation, and then work with a few more visual details.

1. Switch to the Text Tool (‘T’ on the keyboard) and type the site name. I’ll be using ‘Webitect’. We’ll need some grungy text now. Either find a new grunge font to work with, or manipulate a current font to look grungy. For the purpose of this tutorial, I’ll be altering a current font.

2. Choose the font, text size, and character details (kerning, leading, etc.–settings in the ‘Character Palette’). Make the final alterations to the font, and then rasterize it by right clicking the Text Layer and choosing ‘Rasterize Type’. By rasterizing this layer we can manipulate it more.

I’m using ‘Impact’ because it is a big, bold font that will be noticeable even with the distracting background and extra details. I’m using a dark red: #b20000, and at size 72pt.

3. Use the same technique we used to fray the edges of the content areas with the Eraser tool, only with the title text.

Below is what our current design looks like. Click on the image to see the full size.

Looking at what we have so far, I realize it would be a bit boring to just add the primary navigation off to the right and be done. So let’s tweak the title a bit more, and then add the primary navigation in more interesting way.

4. Let’s make the title on it’s own separate background. Cut off the excess content background in the first header to the right of the title:

Click the image for a larger view.

5. Switch to the Eraser tool (‘E’ on the keyboard) and use the grungy brushes again to get a old, washed out look on the side we just cut off.

6. Using the Rectangular Marquee Tool (‘M’ on the keyboard), and with the content background layer selected, select this whole top piece. Press Ctrl ‘T’ (Cmd T on a Mac). This will allow you to Transform this new area.

Use this new tool to rotate and move the selection into a more interesting position:

Press enter or move to a different tool to bring up the finalization dialog box. Select Apply.

7. In the layer’s palette, select the rasterized text layer. In this case, the layer called ‘Webitect.’ Press Ctrl ‘T‘ again to open the transformation tool, and move the text over the new background and align it.

This provides a lot more interest for our design. Next we’ll start on the primary navigation.

8. Create a new layer and place it under the content background layer. Using the Rectangular Marquee Tool (‘M’ on the keyboard), make a selection to the right of the title, and then fill it in with a darker color found in the background. (Use the Eyedropper tool to select colors.) I found #201003.

Click on the image to see the larger view. Notice I didn’t line up this bar exactly to the borers of the content area. Grunge design is supposed to be imperfect, and a minor detail like this can really bring that out.

9. Using the Polygonal Lasso Tool (‘L’), make some jagged selections around the edges of this bar, and delete.

10. Create a new text layer and type out the primary navigation on top of this bar.

For the font, I chose Mistral because it is a messy, hand-written font that represents a very ‘real’ feeling. It’s 36pt smooth, with a color of #eae2d4.

Extra Background Focus

This whole background may be rich in texture, but it doesn’t have focus. Download some grudge brushes if you haven’t already, and we’ll add some more to the background. The brushes can be abstract or real objects.

1. Create a new layer and place it under all of the other layers, except for the background texture.

2. Randomly place the grungy brush(es) around the header areas to make it more visually appealing. Use grungy colors, like green, red, yellow, and grayed-out tones.

The result above is what I got. I used a variety of brushes from a few different sets to create a very abstract look.

Dummy Text

1. Add some dummy content–both images and text. I made my design seem like a portfolio, so I put some thumbnails of portfolio pieces in the first header. You can do what you want with these three content areas.

The font should reflect the grunge style. That is best done using a serif font– I used Georgia 12pt. I added a 75 kerning and 18pt line height.

Final Design:

So finally, here is our final design:

Click on the image for the full-size view.

This design was fairly simple in concepts for grunge design, but still contains a lot of detail. For even more interest, add vintage images, or grungy photoshop techniques– like with PSHero’s Virtual Duct Tape Tutorial.