Creating Unique Grunge Patterns for Your Website Backgrounds
The right pattern can be the graphical element that will enhance your site design. Instead of using flat colors to fill the background, I generally prefer to play with small tileable patterns. In this way I can add a textured effect (that I love!) to the site, along with obtaining quick page loads. Patterns are very small elements, and once created, can fill the site background with a simple css property. In this tutorial I will show you how to create patterns from scratch, and how to make them stand out in your next design.
Patterns can speed up your work flow. If you need them, check out our awesome collection of patterns.
Pattern 1 is super easy to create. We won’t deal with textures, so there won’t be problems with pattern edges. While this concept can be a bit difficult to understand at this stage, it will be much clearer when we create the second pattern.
Let’s create a new document in Photoshop. Size is very small: 12×12 pixels. Zoom in. A useful tip to quickly zoom on the canvas in Photoshop is to hold-down alt (option for Mac users) and roll the scroll wheel on your mouse. Grab the Paint Bucket tool (G) and fill the background with a light grey (#e6e6e6).
Create a new layer and fill it with black. Then go to Filter>Noise>Add noise. Make sure to have black and white as the foreground and background colors before applying the noise filter.
Set the layer blending mode to screen with opacity around 45%. This way black areas will disappear, and the noise will add a subtle textured effect to the background (Apple docet!).
It’s time to add the geometrical element. For this example, I used a pattern created for us by Dima Shiper and available in this set of minimal patterns. However I will show you how to create it from scratch. It’s simple: create a new layer, grab the Rectangular Marquee tool (M), and simply select 1px at a time and fill it with black. Pixel by pixel, create a tileable motif.
We can test the pattern. Just save it by going to Edit>Define pattern. Now create a new document, this time with a larger size. Go to Edit>Fill>Pattern and select the pattern just created.
While working with patterns of small sizes, it’s important to test them on a larger scale document. From 12×12 pixels it’s very difficult to understand if color contrast will work well. Sometimes you may think that an element is too subtle, but after testing it you will see that it has too much contrast.
In this case the geometrical element is too strong.
We need to switch to the pattern document and reduce the geometrical element opacity to a very low value (around 5-6%). Save the new pattern and make another test on the larger document:
Perfect! The first pattern is done.
The process of the second pattern is a bit more difficult, because we need to modify a texture to achieve the final result. But don’t worry! I’ll carefully explain the process below.
Create a new 300×300 pixels document in Photoshop. We need more space to work with a texture. Fill the background with a dark brown (#442a09).
We need a grunge texture. I used a texture from our Subtle grunge textures Vol1. Merge it into the Photoshop document (File>Open>Select the texture). Press ctrl+T to activate the free transform tool and resize the texture (which is in high-resolution!).
Desaturate the texture by pressing shift+ctrl+U. Then set the layer blending mode to overlay and reduce the opacity to around 84%.
We already have a nice looking pattern, but there’s a problem. Try saving the pattern and making a test on a large background:
While the bottom edge is not so visible, the right and left edges don’t match and the pattern unit is visible by the edges. How can we solve this issue?
Let’s switch to the pattern document. Press shift+alt+ctrl+E to merge all the layers into a new one. We will work with this layer from now on. Grab the Rectangular Marquee tool and make a selection of the center area of the texture.
Press ctrl+J to copy the selection into a new layer and move this “piece” of texture on the left, aligned with the left side of the canvas. A tip to quickly align the piece of texture is to activate its layer from the layers window, press ctrl+A to select the entire canvas and use the alignment tool in the tool options bar (top).
In the screenshot below I outlined the piece of texture so you can easily see where to put it:
Duplicate this layer by holding down alt and clicking and dragging the piece of texture. Then flip it horizontally by going to Edit>Transform>Flip horizontal. Move this layer on the right side. Now we have a layer with the texture untouched, and two layers with the same piece of the texture put on the right and left side of the canvas.
What’s the result? With this technique we are sure that the edges perfectly match. The problem is in the center now, but the center is easier to modify. In the screenshot below the edges of the 2 pieces of the texture are evident (the left one more evident than the right):
Select the left piece, grab the Eraser tool (E) and use a grunge brush to paint over the right edge of the piece. In this way the right edge will disappear:
Do the same with the other piece. Now you can see how the texture is more uniform.
Save and test the pattern on the larger document. You can see how the right/left edges merge perfectly now. However there’s a new problem: a spot that makes the pattern unit still evident. We have to remove it.
In the Photoshop document of the pattern, select the 3 layers (texture + left piece + right piece) and merge them (ctr+E). Now grab the Patch tool, make a selection of the spot, and drag the selection over the area you want to use to replace the spot.
Test again the pattern. Now it’s perfect! The last issue to solve are the top/bottom edges, but you can use the same technique applied for the left/right edges: use the same piece of the texture to replace the edges pixels.
Here is the second pattern in action:
We’ve finished guys! Now you can create your own grunge patterns.
We do the best to provide high-quality products that you can use in your commercial projects.