Worn Concrete Background

This is a quick tutorial that explains how to create a pitted, weather beaten concrete slab which works great for a background on any grungy themed web design. These are also used for textures in many 3d rendering projects. You see these backgrounds popping up all over the place, especially on grunge modular flash sites.

Step 1.

Start a new document of any size, the one I'm using is 350 x 275 fill the background with a dark grey color I used: #474747

Step 2.

Now there are two main parts to the worn concrete slab texture. Pits, and scratches. So lets start with the pits. Create a new layer, press 'D' on your keyboard to reset your color pallet to black/white and go to: Filter->Render->Clouds

if you're not happy with the clouds you get press Ctrl + F to repeat the filter.

Result:

Press Ctrl + J on your keyboard to duplicate this layer.

Go to Filter->Distort->Diffuse Glow and apply these settings:

Drop the opacity of this layer down to 20 percent:

Press Ctrl + E on your keyboard to merge these two layers together.

Step 3.

Go to "Select->Color Range" and apply these settings:

This should create a unique selection like so:

Result:

Create a new layer and fill this selection with black (#000000):

Now delete the layer with the cloud render (the one directly bellow this layer)

Result:

Step 4.

Next click the layer with the black blotches on it and press Ctrl + J on your keyboard to duplicate this layer.

Next press Ctrl + I on your keyboard to invert the colors.

Result:

Step 5.

Get out the move tool ( ) and press the Down arrow on your keyboard once, and the Right arrow on your keyboard once, to nudge the white blotches slightly downward and to the left.

Drop the opacity of this layer down to 24 percent:

Result:

Next drop the opacity of the layer with the black blotches on it to 82 percent:

Result:

Step 6.

So now that we've got the pits in the texture we need to add the scratches.

To create the scratches we will use the brush tool and the diffuse filter.

Get the brush out and apply these settings:

Now create a new layer, and draw a few swooping lines across the canvas. Keep in mind that scratches are (usually) pretty straight with a slight curve in nature. Just don't go overboard:

Next bump the diameter of your brush up to 2 pixels:

and draw a few more scratches (on the same layer still):

Once more, change the size of the brush to 3 pixels:

and draw just a few thick lines, maybe 2 or three:

Step 7.

Okay now go to Filter->Stylize->Diffuse and apply these settings:

Result:

Drop the opacity of this layer down to 58 percent:

Step 8.

Press Ctrl + J on your keyboard to duplicate this layer.

Press Ctrl + I on your keyboard to invert the color of this layer (this should change it to white).

Now get out the move tool ( ) and tap your down arrow once, and your right arrow once.

Drop the opacity of this layer down to 16 percent:

Result:

Now you should have a worn concrete texture to use as a background on any "grunge" type interface or layout. Here's how mine ended up after messing around with it for a few minutes, and adding a random rock concert poster: