Grunge, a genre of rock music characterized by noise, heavy hitting drums and eardrum-breaking lead and bass guitars with distinctly emotional vocals…. CSS has its own grunge thing too with a little help from Photoshop. I’m talking about grunge effect for your images on pages. Here’s an interesting post from Andrew Hardwood that tells us cool stuff on how to make grunge effect for your totally sublime and emotionally charged pages. The technique here explores the strengths of Photoshop in creating grunge images that you can incorporate in your design. Without further ado, here’s the completely unadulterated, fresh from the oven text of Hardwood’s post.

Step 1 — Image Selection
To start your own grunge manipulation, I recommend that you select a picture that already has a dark feel about it. Here’s the one I chose:

Step 2 – Find Suitable Textures
One of the absolute necessities in creating successful grunge effects is texture. Take time to make sure the textures you choose will work well with the image and the effect you’re creating.
Also, keep this in mind: the higher the quality of texture, the better the results.

For this example, I used imagery of cracks in the earth and walls.


Step 3
Concentrate more heavily on the face than the rest of the body for this step. Take the second texture image, resize it, and position it around the middle of the face.

Using a large soft brush with the Eraser Tool (at around 100 pixels), get rid of the main areas of brick that surround the crack. For the more intricate areas, zoom in with a magnification of about 400% and use a smaller soft brush (about 8 pixels).

Once you’re satisfied with your work, change the Textures layer Blending Mode to Multiply.

Step 4 – The Second Texture
Now import the other texture into the workspace, again resize it to your liking, and then apply the Overlay blending option. It should look something like this:

Just like before, use the eraser tool to get rid of unwanted texture, zooming in and using smaller brush sizes as needed. I warn you, this may be quite time consuming if you’re not used to working in this way.
Once you’re done, duplicate the layer to enhance the texture.


Step 5 – Add Text
For a finishing touch, you might like to add some text with a script-style font, and play around with the blending options to see which complements the curves of the text best.

Did you find it rockin’ and rollin’? Well, I guess you better check www.dubtastic.com to find more about creating grunge effect.

With your knowledge on grunge effect right there at your web design arsenal, you have great options on what to do with your images. If you want to style your pages the emotionally heavy way, then, your worries are over because making grunge effect in addition to other methods will surely solve them.

Tags: Who says grunge is only for grunge rock?