techimoto

This tutorial will teach you how to create the grunge content boxes you see on a lot of gaming sites. You are going to use the basics of the Pen tool and advanced brush settings.

creating a good looking grunge content box in Photoshop.

result:

1.
start off creating your canvas, use something big like 400 x 400. Be
sure to make your background transparent, this makes things easier to
work with.

2.
To easen the view, I gave the background a grey-whitish background so
we can see what we’re doing. We can delete this layer later on.

3.
Now this might get complicated. We’re going to use the pen tool to
create a basic shape. This may require some practice, but just keep
trying, you’ll get there eventually.
Make a new layer, and select your pen tool ( ). Create these “anchor points” (an anchor point is the dot that you place to set a spot).

Now notice these few things:
-
The document is set on 100%, not zoomed in. Why so big? Easy, working
big is easier than working extremely tiny. We will resize your final
product.
- The anchor points are all straight lines at 90 degrees, this makes it look neater and cleaner than a sketchy line.
- I started with point 1, placed point 2, and after that point 3.

4.
Now we’re going to close the shape. from point 3, click on point one.
But this time, hold your mouse, and move it around until you get a
shape that you think looks good. this is what I did:

5. In your layer pallet, click on “paths”.

6. You will find 1 path, probably called ‘Work Path’ . Right click it, and choose ‘Make Selection’.

7. Make a new layer, and fill it with a dark color. I choose #1D1D1D.

8.
Now create a new layer, we’re going to create some bars to texture
things up. On the new layer, make a new selection on top of the shape,
and fill it with any color. go to layer > style > gradient
overlay, and just choose the random white to black. It might look bad
now, but after resizing it will look just like we want it.

9.
Create some more bars on the sides and on top to make it look a little
more textured. Use your creativity, create something nice. I did the
following:

10.
Create some more random selections and place it over your shape, this
is to texture it up a little more. Make a new layer and set the opacity
at around 50, and just make some random shapes.

11. now to make it look grungy, select your brush () and scroll until you find this brush:

12. Create a new layer, and select ‘Brushes’ on the top right corner of the screen.

13. Now select these settings:

14.
On your new layer, get a light grey color. brush a little bit on the
sides of your shape (I changed the background color to #4A4A4A so its
easier to see the brushing).

.

15. Make a new layer, grab an even lighter color grey, and brush a little more, but this time over the whole shape.

16. keep doing this with darker and lighter colors until you’re satisfied. I ended up with this:

17.
Now delete (or hide) your bottom background layer, select your top
layer, and go to ‘Layer > Merge Visible’. All that’s left is 1 layer
with your basic shape.

18. Go to ‘Edit > Free
Transform’ , select a corner dot, hold shift (this is to keep the shape
without distorting it), and resize it until all that’s left is a small
corner.

19.
If you think your shape is too blurry, go to ‘Edit > Sharpen >
Unsharp Mask’ , and play with the settings. I choose these settings:

20.
Ok we are almost done now, just hold on a little more ;). Duplicate the
shape layer, (left click on the layer > duplicate) , and place it
under the first layer. Select the standard Mouse Tool () and tap ‘up’ on your direction pad. This will move the layer up. Move it till you have something like this:

21.
I know, this layer stuff is a little confusing. But once more, create a
new layer, and place it in-between your shapes. this is what my layer
panel looks like:

22.
Make a selection between the 2 shapes, and fill it with a color you
like (I changed the background color again to view it better).

23.
Duplicate both the bottom and the top shape (left click the layer in
your layer pallet and choose duplicate), then for both layers select
‘Edit > Transform > Flip Horizontal’. Hold shift (to prevent it
to move up or down) and shuv them to the right.

24. Almost there! Once again, make a new layer. Select your pencil tool () and make 2 light grey lines on top and under your header box.

25. grab your eraser () , and select the same settings as you did in step 13.

26. slightly remove little bits out of the white lines until you get what you like.

27. repeat these steps, but this time with your white lines at the sides:

28.
Now this might sound even more confusing than we had before. select the
layer under the layer with the side lines, and press ‘Ctrl + E’ . This
will merge the layer under it. keep doing this until you reach the
background. now you can easily duplicate the layer, and go to ‘Edit
> Transform > Flip Vertically’, hold shift, and shuv it under
your lines.

29.
All that’s left is spiceups. add some text, a background, some more
textures, use your creativity. This is a possible result using the same
method created earlier. as you can see I added a background, text, and
used a drop shadow size 1 on the content. I hope you enjoyed this
tutorial (because it sure took me a hella long time lol) . have fun!

Tutorial written by Skandalouz.