Featured Templates
Home
Photoshop
Web Layout
Grunge Contentbox
Added: Nov 29, 2005 Rating: 
Level: Experienced Software:
Photoshop
Level: Experienced Software:
Photoshop
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.
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).
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.
- 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:
)
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:
)
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.
)
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.
), 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!
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials
10 Random Photoshop Web Layout :
10 Random TutorialKit Materials: