Creating Unique Grunge Patterns for Your Website Backgrounds

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.

Preview:

How to create patterns in Photoshop

Pattern 1

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.

Step 1

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).

How to create patterns in Photoshop

Step 2

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.

How to create patterns in Photoshop

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!).

How to create patterns in Photoshop

Step 3

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.

How to create patterns in Photoshop

Step 4

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.

How to create patterns in Photoshop

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:

How to create patterns in Photoshop

Perfect! The first pattern is done.

Pattern 2

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.

Step 1

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).

How to create patterns in Photoshop

Step 2

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!).

How to create patterns in Photoshop

Step 3

Desaturate the texture by pressing shift+ctrl+U. Then set the layer blending mode to overlay and reduce the opacity to around 84%.

How to create patterns in Photoshop

Step 4

We already have a nice looking pattern, but there’s a problem. Try saving the pattern and making a test on a large background:

How to create patterns in Photoshop

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.

How to create patterns in Photoshop

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:

How to create patterns in Photoshop

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):

How to create patterns in Photoshop

Step 9

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:

How to create patterns in Photoshop

Do the same with the other piece. Now you can see how the texture is more uniform.

How to create patterns in Photoshop

Step 10

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.

How to create patterns in Photoshop

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.

How to create patterns in Photoshop

Step 11

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:

How to create patterns in Photoshop

We’ve finished guys! Now you can create your own grunge patterns.

Related Posts

feat month

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

Sebastiano

Howdy! I'm a self taught graphic designer who loves to create amazing stuff using every kind of media. I'm currently living and working in Italy.

19 Comments

(+add yours)
  1. alessandro

    nice tutorial, ++++

    • Yeh Nice tutorial

      thanks for sharing

      :)

  2. PRATEEK GUPTA

    Hi,
    Sebastiano sir great tuts thanks for this

  3. I was speechless for the greatness of this tutorial. Thanks Sebastiano and all the team for sharing all your valuable experiences.

  4. Thanks for the feedback guys! If you’d like to explore more in depth specific web design graphical elements, just let me know

  5. GopTun

    Thanks for your tut. I followed it and used a few – for me – easier steps than you described. Like Step 3: instead of marquee tool I used the pencil. And in the 2nd bg pattern I thought it might be easier to use the Offset filter as you may have to adjust the top and bottom lines as well.

  6. Great tutorial and techniques well explained.
    Thanks for sharing…
    Bookmarked!!

  7. Very nice tuto.Thanks for sharing.

  8. Tanks!
    Nice techniques and
    great way to teach it !

  9. Great post!
    Very useful and interesting…
    Thank you!

  10. Once again a great Tut, many thanks.

  11. Great tutorial. Thanks for this… and all the the other great posts on your site. Cheers.

    • Thanks for introducing a little rationality into this detabe.

  12. Antonio

    Well done dudes, a question, why didn’t you used, for seamless texture the offset method and then, Clone tool around it?

    • Hi Antonio,

      The best in Photoshop is that you can use several techniques to obtain similar results. Offset filter and clone tool will work too. It’s just the way (copy,paste and delete) I’m more comfortable with ;-)

  13. nina

    Thank you so much for this useful tutorial!

  14. good work.thanks for sharing

  15. hadi

    very simple but usefull…

  16. Wonderful post! We will be linking to this great content on our
    website. Keep up the great writing.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team