Design Project – Get Grunge

After my last Techniques article on Grungy Fun, it became quite apparent that people needed a real world example of what exactly a Grunge piece was, and how to create one.

Before I get into the deep and dirty, I want to clarify 3 things. First, before last week I hadn’t opened Photoshop in 3 months. Second, I’ll be writing this article from the Photoshop perspective, but, so long as your graphics application allows for layers, adjustment layers and custom brushes, you should be fine. Finally, I am not a "Grunge Master". In terms of learning and experience I am really more of a "Novice". That said though, hopefully what I write here will allow others to go further than I have with this emotive art style.

The Story

Before I get into the "How", it is often important to decide the "Why". Why are you creating a Grunge piece? My reason was simple. I was involved in a Photoshop Tennis match at SitePoint Forums and wanted to floor my competitor in the first round.

As far as the emotion behind the piece, I was looking for something truly dark and brooding. Not so much freaky, as "stirring". I wanted it to be a piece that I knew I would want to hang on my wall, but not really show anybody because of the comments I might receive. You could say I was trying to design a love/hate relationship.

The Basics

Right, now we need to get down to the nitty gritty. Our first step — the one that will really define how the piece plays out — is to figure out:

  1. The dimensions of the piece
  2. The primary colour/feel

I’ll design a longer image, as I’m sick of square ones, and I’m going to go with something dark. I’m really trying to create something that’s darkly emotional. Something that shocks you, but at the same time, makes you want to look deeper. We’ll see how I do, shall we?

For dimensions I’ve chosen 300 x 1200 pixels, filled in black (72dpi since I’m designing this image for the Web). First off I need to find a picture. To be honest, I only go 3 places for pictures:

I’m looking for a full-body shot of a man looking dejected. I tried intuitivmedia, but they didn’t have much, and DA was slow, so I went off to Google and did an image search for "man standing". About 7 pages into the results, I found the perfect image:

896_man

It’s a striking image, because it’s a real picture of 4 guys just before they were sent to the gas chambers in Nazi Germany. The emotion I’m going for is palpable even at this early stage.

The Canvas

Every artist has a canvas, and ours is looking very empty and black right now. In this first series of steps we’ll simply import our image, give it some boundaries and generally open the lid.

Our first step is to drag our image onto our canvas, which results in this:

896_image1

Obviously, I want the length of this guy’s body to basically fill the screen, so we resize the image to something like this:

896_image2

Next, we want to remove a lot of the superfluous stuff around our main character, so we use a layer mask, so we don’t lose any of the original image (it’ll still be available should we need it later).

I’ve painted away some of the useless stuff, and here’s what we have now:

896_image3

Colours, Feel, Dirt

My main goal in this step is to pick a colour, add a few elements, and start making the image look really "grungy".

Before we begin, I have 3 standard Adjustment Layers I use for Grunge design. The settings change, but the use of all 3 of them gives me a lot of control.

Here they are:

896_image4

And here are the details:

896_image5

896_image6

896_image7

Now, here’s the image with my default settings:

896_image8

It’s really starting to resemble what I’m aiming for! Now it’s time for some serious Grunge Texturing. Basically, to do this, I usually download a whol load of brushes from around the Web (here’s the best spot, though), and dab these brushes onto the palette, as I explained here.

After some dabbing with a variety of brushes, I’ve come up with this effect. Obviously for your Grunge pieces, you’ll want to concentrate your dabbing in the areas you want to accent the most:

896_image9

So our image looks like this:

896_image10

At this point, I realise that the top part of the image looks a little hazy — there’s not much happening there. So I go back to our original image and take the top portion of it, as this space has a lot of detail and texture. Here’s the top portion:

896_image11

When I turn my blackness layer back on, and add some more dibs and dabs, the image starts to come together:

896_image12

Finishing The Imagery

Okay, to be honest, I don’t really like the right side of the image. I generally hate colours that run solidly onto borders in Grunge pieces, and as I’m going for an elongated feel, I might as well get rid of this effect.

One of the brushes we downloaded before (from www.dubtastic.com) is a gorgeous "erratic vertical stroke" which looks like this:

896_image13

By taking this stroke, rotating it a little, and placing it alongside the original, I get an effect I’m happy with:

896_image14

We’re going to keep on dabbing at this later on, as it’s so cluttered, but next I want to get some burns and darkening happening. Because of our adjustment layers up top, it doesn’t really matter what colour our burn strokes are, or how erratic they appear. So, I’m going to do just a few different layers, which basically look like this (before their blending mode is turned to colour burn):

896_image15

Basically, I’ve got a few which are 100% burns, and others which are 30-50% burns. The burns at 100% will actually burn black right into the image. The 30-50% ones will burn whatever the Hue/Saturation colour is into the image. It’s a great technique, and one that I’ll probably use more of in this image.

Here’s the image with the burns turned on:

896_image16

I really like how this is coming together: his eyes are very haunting, which is just what I’m after.

However, I don’t like the bottom of the image, so I’m going to need to burn that out as well. One technique I’ve found to be really effective in creating a random feel in grunge work, is to take an existing image, increase the contrast/brightness, and then select one of the stronger colours to use on a random basis.

Here’s the image I used (from DeviantArt’s stock section this time):

896_street2

By increasing the contrast in this image to 100, we get a very bright red area:

896_image18

Now we simply select this red area as a random filter pattern with Select > Colour Range:

896_image19

We now have an area that we can fill in with black, and then burn into our main image so it looks like this:

896_image20

The Text, The Style, The End

Okay, now its time to go hunt for some Grunge Fonts. I really like SimSun, as it isn’t too chunky, but isn’t what you might "expect", either. Serif fonts are normally really good for Grunge work — the more intense the serifs, the better (often artists will extend the caps on certain key letters to make it even more impacting, but I’m not that intense).

As I know the story to this picture (which is one of the reasons why the image is so moving), I figured I’d simply make the picture the story, something like:

"Four Men Walked Into The Gas Chamber… Only One Returned".

I’ll make the text white, drop it on the picture, and see what happens:

896_image21

Not too bad. The image still needs something though… The text is just sitting there…

I remember having seen an image for a rock band that had a random line between the lines of text, so I’ve tried that:

896_image22

The image is just about done. I’m not happy about the text, though: it looks too "fresh". So I’ve dabbed some more dark spots all around the text, and I’ve also added the words "Dead Man Walking".

Here’s the final image:

896_plat

Final Thoughts

Working with this image really sparked a new love for design in me. I believe a Grunge piece should stir your emotions — it isn’t something to be entered into lightly, and it’s often a pretty draining exercise.

Grunge isn’t about perfection in terms of shapes, but perfection in terms of emotion. Often, emotion is random and unpredictable. Use the tools to express yourself. We’d love to see some of the fruits of your labours — so send them our way!

Reader Grunge Gallery

Submit your work to appear in our Reader Gallery. Special thanks to all contributors!

896_Davidimage
Journey By David Song

896_bgreen
Soldier By Brandon Green

896_mcarter
The Beast of Essex By Mark Carter

896_mquinn
Untitled By Michael Quinn

896_warishell
War Is Hell By Steffen

grunge_sig
Money or the Grunge By Harkatur

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.