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).
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:
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:
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.
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.
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.
You can experiment with some different blend modes, but I am going to be using Soft Light at 100% opacity.
The image now looks like this.
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.
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.
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.
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.
You can now use your brush! Here are some examples of how it will look when simply applied with color.
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:
Here is a look at the 3 photos that I’ll be using:
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:
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:
Then do the same thing with the third layer to set it to “overlay” and 100%.
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.
After adjusting the levels my image looks like this:
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.
Copy all layers within the selection (Edit > Copy Merged) and paste it into a 2500 pixel by 2500 pixel file with a white background.
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.
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:
And here is the entire image:
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.
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:
- Soft Grunge Photoshop Brushes
- Soft Grunge Photoshop Brushes – Part II
- Soft Grunge Photoshop Brushes – Part III