How to Create Grunge Brushes in Photoshop

Create a Grunge Texture Brush in Photoshop

Textures are commonly used in web design and other types of graphic design, and fortunately, they are relatively easy to work with. You can use a photograph to create texture, but Photoshop brushes also present a simple way to add texture to your work.While there are a lot of Photoshop brushes available for creating texture, there will be times when you’ll want to create your own. By creating your own brushes you’ll have more control over the final outcome and once you have the brushes completed you will be able to re-use them whenever you want to quickly add texture.What you will need to follow the tutorial:

  • A few textured images (preferably at least 2500 pixels by 2500 pixels).
  • Photoshop

The process we’ll be using will combine a few images with minor adjustments to create our brush. The images I’m using are from the Pavement Textures – Part I and Concrete Textures sets at Vandelay Premier. If you’re not a Vandelay Premier member you can substitute other images that you have available and the process will be very similar.

Here are the images we’re using:

Create a Grunge Texture Brush in Photoshop

Create a Grunge Texture Brush in Photoshop

Create a Grunge Texture Brush in Photoshop

Ok, let’s get started.

Step 1: Creating the File

Go to File – New and create a new file that is 2500 pixels by 2500 pixels. This is the maximum size of Photoshop brushes, so that is what we will start with. All of our images are 4000 pixels by 3000 pixels, so we have plenty to work with. We’ll create the brush in the maximum size because it can always be easily reduced to a smaller size whenever needed.

Step 2: Add the First Image

Now that we have our photos and our new file opened, we can get started creating something useful. When we create the Photoshop brush it will basically ignore the color, so it is easiest to desaturate the images first so you can see it more accurately as you are working. After desaturating, it will look like this:

Create a Grunge Texture Brush in Photoshop

Now we want to add the image to our new file, so go to Select – All, and the Edit – Copy and you’ll have the image on your clipboard. Then go to the new file that you just created and go to Edit – Paste. That places the image in a new layer, but we will want to position it. Go to Edit – Free Transform and drag the image to reposition it. I want to get rid of the edges so we’re working mostly with the middle of the photo. After re-positioning, it looks like this.

Create a Grunge Texture Brush in Photoshop

Step 3: Add the Second Image

Now take the next image, desaturate it, copy and paste it on top of the layer we just edited. Again, use free transform to position it how you want it. My image now looks like this.

Create a Grunge Texture Brush in Photoshop

The second image that we pasted in is now covering up the first one, so we’ll want to change the blend mode. Double click on the second image’s layer in the layer’s palette to bring up the layer style options.

Create a Grunge Texture Brush in Photoshop

You can experiment with some different blend modes, but I am going to be using Soft Light at 100% opacity.

Create a Grunge Texture Brush in Photoshop

The image now looks like this.

Create a Grunge Texture Brush in Photoshop

It’s not a huge change from the image with just one layer, but when viewed at full size the second image does add some additional texture.

Step 4: Add the Third Image

Next, desaturate the third image, copy it and paste it on top of the other two images. Use free transform to align it, then double click on the layer in the layer’s palette to open the layer style options. On this layer, I am setting the blend mode to overlay at 100% opacity. The image now looks like this.

Create a Grunge Texture Brush in Photoshop

Again, this image also adds a subtle change. The first image is the most noticeable, the other two just add some additional texture and character.

Step 5: Adjustments

We’ll now make some adjustments to the image that will improve the outcome of our brush. Right now the image is rather light and there are only a few dark spots. We’ll darken it up a bit and the brush will still be very versatile, it will just be easier to use with darker colors and shades.

There are a few different ways to darken an image. I often use levels, but on the grunge texture brush set, I used brightness and contrast instead. So go to Image – Adjustments – Brightness/Contrast. I’m going to set the brightness at -150 and the contrast at 100. Note: if you are using different images you will need to experiment because these specific numbers will not be relevant to you.

Create a Grunge Texture Brush in Photoshop

That is really the only adjustment we are going to make to our image. You can also experiment with other adjustments or filters if you like. This is how our final image looks.

Create a Grunge Texture Brush in Photoshop

Step 6: Create the Brush

Now that we have our image ready it is very easy to turn it into a brush. Go to Edit – Define Brush Preset and you will be able to name your brush.

Create a Grunge Texture Brush in Photoshop

You can now use your brush! Here are some examples of how it will look when simply applied with color.

Create a Grunge Texture Brush in Photoshop

Create a Grunge Texture Brush in Photoshop

Create a Grunge Texture Brush in Photoshop

Creating a Softer Grunge Photoshop Brush

The use of soft or subtle textures in web design is very common right now. Extremely grungy designs with heavy textures are used in some situations, but a more subtle use of textures may be needed in others. These softer textures are ideal for website backgrounds or for applying to specific elements within a design.

Here is a preview of the texture that will be created by this brush:

Create a Soft Grunge Brush in Photoshop

Here is a look at the 3 photos that I’ll be using:

Create a Soft Grunge Brush in Photoshop

Create a Soft Grunge Brush in Photoshop

Create a Soft Grunge Brush in Photoshop

Following the same steps from above, we’ll create the new file (2500 pixels x 2500pixels), desaturate the image, and paste them in the same image.

The first layer will just be the first texture that you paste in. Mine looks like this:

Create a Soft Grunge Brush in Photoshop

Then with the second layer, double click on the layer in the layers palette and set the blend mode to “overlay” and the opacity to 100%. The result will be a combination of the first 2 textures:

Create a Soft Grunge Brush in Photoshop

Then do the same thing with the third layer to set it to “overlay” and 100%.

Create a Soft Grunge Brush in Photoshop

This gives us a light area at the top, which will be good for blending it to make a subtle transition with the background.

Then, adjust the images. For a softer, more subtle brush, you don’t want much contrast as the previous brush we made. To get to the levels options, go to Image > Adjustments > Levels. The specifics of how you adjust the levels will depend on the images that you are working with. For my images, I am bringing the two outside levels in a little bit towards the middle, which will lighten the lighter areas and darken the darker areas. I’ll also move the center (gray) level to the right which will darken the image a little.

Create a Soft Grunge Brush in Photoshop

After adjusting the levels my image looks like this:

Create a Soft Grunge Brush in Photoshop

Use the Lasso to Make a Selection

Creating brushes with blocky edges is fine, but having at least one soft edge makes the brush a little more versatile because you make it fade or blend to the background  color. So we’ll create a soft top edge to our brush, and the first step is accomplishing this is to make a selection with the lasso tool. This step isn’t absolutely necessary, but it helps to create a more varied top edge to the brush.

Create a Soft Grunge Brush in Photoshop

Copy all layers within the selection (Edit > Copy Merged) and paste it into a 2500 pixel by 2500 pixel file with a white background.

Create a Soft Grunge Brush in Photoshop

Apply a Gradient

Set the foreground color to white and select the gradient tool. Make sure it is set to a linear gradient that fades from white to transparent. Apply the gradient to the top of the image with the white part of the gradient at the top of the image.

Create a Soft Grunge Brush in Photoshop

Touching Up the Edge

Our top edge still has a bit of an outline to it, and we want to fade to white, so it will need a little work. Create a new layer. With the foreground color still set to white, select a brush for touching up the top edge. You could use the default spatter brushes that come with Photoshop, but they are very small and it will take a long time. I like to use an existing grunge brush. In this case, I’m using one of the brushes from our first set of soft grunge brushes at Vandelay Premier. I’m just applying that soft grunge brush at various spots around the top edge of our image until the result is a gradual fade to white with no noticeable lines. Here is an up-close look at the result:

Create a Soft Grunge Brush in Photoshop

And here is the entire image:

Create a Soft Grunge Brush in Photoshop

Our image is now ready to be saved as a brush. Go to Edit > Define Brush Preset to give it a name and save it.

The brush is now ready to be used whenever you need a soft texture. Here is a look at a few samples that I quickly created by just using the brush on a solid background (the images are at 100%, so you are only seeing a small portion of the brush). You can get varied results by using multiple brushes on top of each other, adjusting blend modes and opacity, or experimenting with darker and lighter uses of the brush.

Create a Soft Grunge Brush in Photoshop

Create a Soft Grunge Brush in Photoshop

Create a Soft Grunge Brush in Photoshop

Create a Soft Grunge Brush in Photoshop

Go Experiment!

Creating brushes can be a lot of fun, and it gives you a library of brushes to use whenever you need. If you’d rather not create your own brushes, you may be interested in some of the sets that are available at Vandelay Premier:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.