Tutorial: Brick Wall

[Posted 08/10/2009 at 12:01 AM | No Comments]

banner

Designing a brick wall in Photoshop, for some, may be a very tricky or hard thing to accomplish. In this tutorial, I will show you how to do it very easily. A brick wall could be very useful for a splash page for a website. This tutorial will have a lot of steps but when it is done, you will love the effect you get.

Step One

As always, load up Photoshop. You first want to create a brick pattern. Therefore, go to file > new and create a 50 x 50 pixel document with a white background.

Step Two

Go to select > all then edit > stroke. Do the following settings:

You should now have something like this:

Step Three

Now, create a horizontal line at 4px in the middle like this:

Step Four

Then, draw a 4px vertical line in the middle of the top rectangle like so:

Step Five

Delete the left and right lines on the top rectangle like so:

Step Six

Now, you want to define this as a pattern. Go to edit > define pattern and name it brickwall.

Feel free to right click on the finished pattern and copy and then paste it into a new document in Photoshop.

Step Seven

Now you are going to create the brick. Go to file > new and create a white background document per your specs, I used 500 x 500.

Step Eight

Click on your channels tab and create a new alpha.

Step Nine

Stay in your channels tab with Alpha 1 highlighted and go to edit > fill and use these settings:

Step Ten

Now it is time to add some gaussian blur. Go to filter > blur > gaussian blur and use these settings:

Step Eleven

Now, go to image > adjustments > levels and use the following settings.

Step Twelve

You want to add another gaussian blur. Go to filter > blur > gaussian blur and use these settings:

Step Thirteen

Now you want to fade that a little bit. Therefore, you go to edit > fade gaussian blur and use the following settings:

This gave it more of a 3d look.

Step Fourteen

Add noise. Go to filter > noise > add noise and use the following settings:

Step Fifteen

Go back to your layers tab and click on Layer 1. Now select your gradient tool and choose gray to white or #777777 (foreground) and #FFFFFF (background). Start at the top, and draw downward.

Step Sixteen

Now, go to filter > render> lighting effects and use the following settings:
(make sure to choose Alpha 1 in texture options)

Step Seventeen

Now you need to change the color of the brick mortar. To do that, go back to your channel tab, press Ctrl, and click Alpha 1. Go back to your layer tab, click on Layer 1, press Ctrl C (copy), create a new layer, and press Ctrl V.