Design a Unique Grungy Website Layout

Design a Unique Grungy Website Layout

Intro

This tutorial will teach you how to create a unique grungy website design. Many of the techniques involved are fairly basic, but through the tutorial I’ve tried to explain my thought process behind certain design decisions as well as outlined how to get the most from your grunge designs.

Final Image

This is the final image that we’ll be creating:

Step 1

Create a new document (1000X800px). Create a new layer for your background and fill it with E3D4B9.

Step 2

Now paste in an image of some lined paper, I used the first photo of our Free Paper Texture Set released right here at PSDFAN. Cut out the paper using your magic wand tool and then go to image>adjustments>desaturate. Then apply the drop shadow settings shown below:

Step 3

Now I grab some images from our Grunge Essentials Pack. I start by placing some coffee stains over my lined paper, then to make sure that they only show on my paper and not my background I select my paper layer, click somewhere around it using the magic wand tool, then select my coffee stains layer and hit delete. Reduce the opacity of your coffee stain layers to 25%. Now position a paperclip image over the side of your paper and use your lasso tool to cut away the part of the clip that should be behind the paper. Then give it a subtle drop shadow. Then paste in images of sticky tape (also from our grunge essentials pack). I also fitted in the post it image, although the next step will explain how I did this in more detail. Finally, I added some text to my post it note (font: Handwriting Dakota).

Some pointers

Grunge design is all about fitting images together nicely. To make the sticky tape blend with the rest of my layout I reduce the saturation of the image to -45 (image>adjustments>hue/saturation). I also reduce the sticky tape layer’s opacity to 90% to give the illusion of slightly variations in the surfaces it covers. For my post it image I drastically altered the saturation and lightness/darkness in order to fit it well with my other grunge elements.
Another tip for grunge design is to vary your visual elements. It’s ok to use the same images over and over, but you can’t have them looking exactly the same. With each use of my sticky tape image I tried to resize/rotate it slightly, as well as subtly alter the brightness/saturation. This helps to build up the messy overall look of grunge.

Step 4

After thinking about how the different elements fit well together I couldn’t help but notice how the grayscaled lined paper image looked a little flat being black/white. To give it a tint of color I went to image>adjustments>color balance and applied the settings shown below. This allowed it to blend with the other elements a lot better.

Step 5

Now I grab a sunburst image from our High-Res Sunburst Set. I paste it so that the center of the sunburst is behind my post it image. To delete the parts of the sunburst overlapping my paper I select my paper layer, click outside it using the magic wand and then select my sunburst layer and hit delete. I also select each of the holes in the top of the paper image and repeat the same step. Then set I my sunburst layer’s blending mode to ‘color burn’ and reduce the layer opacity to 8%. This achieves a cool watercolor kind of effect.

Step 6

Now create a new document and draw a dark brown square roughly in the middle of the image. With your square selected go to select>modify>contract and contract your selection by 10px, then hit delete to leave a kind of frame. Then grab your eraser brush and erase your brown frame using a watercolor brush at low opacity. Now grab an image that you want to put in your frame and resize/crop it to fit.

Step 7

In your frame document hide your main white background layer and then go to layer>merge visible to merge your frame and image. Then copy the merged image back into your original document. Repeat this stage using different images until you have about 3 in your main design. The advantage of creating your images in a new document is that you can easily change the image being framed and then merge/copy this back into your original design. I also added some text and an arrow above these images.

Step 8

Now paste in another image from our Paper Textures Set into the bottom of the design. Be sure to create a new layer set beneath your main lined paper area, as we want this section to be below that area. To blend it nicely with the background I set the layer blend mode to ‘linear burn’ and reduced it’s opacity to 30%. I also applied the inner shadow settings shown below to give the effect of depth.

Step 9

This part is really up to your creativity. Using as many paper textures as you can find begin pasting bits of paper all round your design. Be sure to make them blend together nicely by adjusting the images hues/lightnesses. I also pasted in my sticky tape image a few more times to contribute to the background, but made sure to keep the opacity low so that it wasn’t overwhelming. The trick is to combine as many images as possible without getting too busy or distracting. It’s best to keep the opacity of most layers really low, as then you can build up a really grungy feel without detracting from your content areas.

Step 10

Now I add a few more details such as further coffee stains/paperclips, and I add the label from my Grunge Essentials Pack. Finally I add some text to the label, simply by typing it out and then going to edit>transform>rotate and fitting it properly.

Step 11

Now to create the site’s menu. I type out my menu links over the piece of paper just below my label. Then I use my line tool and custom shapes tool to create some dividing lines and arrows next to my menu links. The great thing about grunge design is that often things don’t need to be too precise. When drawing out your arrows and lines you don’t have to worry about them all being the same size or all aligning perfectly, just draw them out as quickly and roughly as you like. Finally, merge all of your arrows into one layer and then all of your divider lines into one layer. Grab a low opacity, watercolor brush eraser and erase away parts of your lines/arrows to create a more grungy look.

Step 12

Paste in a nice looking image over your lined paper, being sure to position this new layer beneath you post it layer and image thumbnails layers. Cut it out using the magic wand technique explained earlier. Then set the layer blend mode to ‘hard light’ and reduce the opacity to 70%. Finally use a watercolor brush eraser to erase the bottom/side of your image in a messy style.

Step 13

The layout is looking quite good so far, but it’s lacking structure, especially the top area. Despite grunge design typically being very messy, this doesn’t mean that it lacks structure. Some of the best grunge designs still enforce fairly rigid structures, simply because it helps to tie a layout together well. In this case I chose to create 2 dark bars running across my layout. This may be fairly simple to do, but it really helps the layout, as previously it was lacking any real shape or definition. The two lines create planes for the eye to run across and help to frame the messy images in the rest of the design. Remember – messy doesn’t mean unstructured.

Step 14

Now I create a newsletter signup area beneath my menu. The techniques are fairly self explanatory from looking at the image below, but again, the reasoning behind them is integral to understanding grunge design. I deliberately varied the darkness of the text (’Newsletter’ is darker than ‘Name’ and ‘Email’, as this builds up a layered look. I create structured boxes for the sign up form, but reduced their opacity and gently erased their edges a little to give them a grungy feel.

Step 15

I add some text to the bottom of my design. It’s important to note that I combine handwritten fonts and regular fonts – exploiting the mix of structure/messiness that I mentioned before. Notice also how I reused the arrows from my menu. Reusing elements doesn’t make your design boring or repetitive, but can be quite a nice touch of grunge design, drawing your layout together well.

Step 16

Finally, this is a technique that I’ve used for a while. To achieve a nice handwritten style outline around my bottom headers I select a 1px brush a draw a large, rough oval shape. Then a resize this oval to fit around my header. Because I’ve resized it so much, the brush marks that previously looked rough and unprofessional now have a sketchy, detailed quality to them. Finally I grab a low opacity watercolor brush and paint roughly behind my header, just to give it a bit more precedence over the links beneath it.

And We’re Done

Here is the finished design. Click on the image below if you want to view the full sized version.