Grunge Template in 10 minutes
Posted by admin on 02/14/08 in All, Web Graphics
![]()
I absolutely love when clients want a grunge or gothic looking template. They are by far the easiest to create simply because they are chaotic, random, and should look rough around the edges. For this tutorial, I set my stop watch for 10 minutes to see what I could create in that time. Without further ado, here’s the 10 minute grunge theme.
We’ll start with an 800×900 image:

We’ll also create a second image in order to make a custom grunge brush. In that second image I simply made a bit of a scribble and then defined it as a custom brush below:

After I defined the brush, I then selected it from the brush menu. I hit F5 to bring up the Brushes box, which allows me to edit a brush and turn it into a well designed tool. In our case, let’s enable shape dynamics with the following settings:

Also, we’ll enable scattering with the default settings, smoothing, and finally Dual Brush, with the following settings:

With our brush defined, let’s use it to create this:

Using the text tool, I’ve now written our site’s name. I used a light outer glow set to blue:

Now let’s change the brush to gray and let’s fill in the body like so:

Next, let’s use the Rectangle Tool to create a black box. We’ll then create a new layer above the box and use the brush (back to black) to make the sides look like they’re leaking:

Combine the box with the layer above it into a new smart object, and then rasterize the layer. We’re doing that, because now we’re going to add a light blue Stroke, set to 1px and inside. Once that’s done, convert the layer to a smart object again and rasterize. Then select Filter > Blur > Motion Blur and set the Angle to 0 and the Distance to 42px:

Now let’s go down below the very first layer and add some pink splashes with our brush:

On the sidebar, let’s create a pink box using the Rounded Rectangle tool. We’ll want a 1px black stroke, a pink color overlay, an overall opacity of 90%, and the following Bevel and Emboss:

To top it off we’ll add a menu (the text has a 3 px, light blue stroke.)
And with the 10 minute alarm going off, here’s our final result:

tag this
Emo | Feb 21, 2008 | Reply
That seems so easy :o! Maybe I should try it on my site.
admin | Feb 22, 2008 | Reply
Maybe you should. You have an interesting site there but it does have quite a traditional look considering your subject. Why don’t you run a poll or something and see what people think.
Nauman | Mar 12, 2008 | Reply
i will make a similar one using your tutorial for my professional site.
thank you very much
ray | Mar 15, 2008 | Reply
Really cool tutorial. Thanks.
Adrianna | Apr 19, 2008 | Reply
Wow. Really cool. What photoshop did you use?