Background pattern Tutorials

In the wonderful world of web design, it has become normal practice to create designs that utilize background patterns that don’t draw a ton of attention, but have a bit of variation within them. Even if you are not creating website designs, it should be good practice to want to create patterns that are subtle, yet beautiful, and easy to use for any occasion.

Of course, it’s easy to find these types of patterns online so all you have to do is save them and use them, but wouldn’t you love to know how to make them from scratch—to add a little bit of personality to your web design? Well today we have put together 5 short tutorials to help you make five different types of subtle backgrounds.

These are Photoshop tutorials that are best for beginner to intermediate users—I’ll be explaining many of the steps quickly as if you already have some knowledge of Photoshop short cuts and short codes. Either way, I hope you are able to follow along, find out something you didn’t know before, and learn how to make five subtle and seamless background patterns.

First pattern

For this first pattern, I wanted to mimic something that was a little grungy with a bit of texture.

Step 1.

The first thing you want to do, of course, is create your new document. This time around we are going to start with a document size of 100 pixels by 100 pixels.

Step 2.

Once you make your document, you want to choose the color of your background. You can choose from the swatches or bring up your Color Picker dialog box. I wanted to go with a nice dark blue color this time around.

Step 3.

The first thing we are going to do to create our background is to add some Noise. Go to Filter > Noise > Add Noise to open this dialog box. Change your Amount (of noise) to 3%, with a Guassian Distribution and make sure the Monochromatic box is checked.

Step 4.

Next, we are going to apply the filter necessary in creating the remainder of the grunge look. Go to Filters > Brush Strokes > Accented Edges. The Filter Gallery dialog box will pop and look like this. You want to play around with the settings until you find something you like. The settings I used: Edge Width of 6, Edge Brightness of 18, and Smoothness of 6.