Create an awesome background using patterns

This tutorial will show you how to create some flawless patterns, which we will use to create some amazing backgrounds that you can use for your desktop, websites, posters…whatever you want. The great thing about patterns is that once you get comfortable with them, they can be an important part of your Photoshop arsenal. Enjoy!

If you have a version that you created, I’d love to see it. Put a link to it in the comments below.

Step 1

We are going to give you two different background patterns to work with, to get a better grasp of patterns, so to create the first one, lets open up a 100×100px document in Photoshop.

Step 2

Make a circle at about the same side I did (around 10×10px) and fill it with a dark gray (make sure it isn’t black) by clicking on the foreground color, and the alt + delete. I used #333333.

Step 3

Now we are going to give the circle an inner shadow. On the layers palette click on the circle with a “f” in it and go to inner shadow. Adjust your settings like I have below.

Step 4

Time to make the pattern. Do control + J to duplicate the layer and move it over to the left. Duplicate the layer again and move it up to the top. Try to get the shapes to be equal distance apart from one another.

Step 5

Continue duplicating and moving until you get something like this.

Step 6

Now we are going to drag in some guides. Click and drag the ruler (this will give you a guide) and drag four guides out so they are in the middle of the circles like I have.

Step 7

Click on your background layer and change the color to #CCCCCC. This will give it a darker feel to it.

Step 8

Go to your layers palette, click on the right arrow on the top right and click flatten image.

Step 9

Go to your rectangular marquee tool and make a box using the guides. If your box hangs over the edge of the guides you can get rid of it by using alt and dragging a box over the area you want to get rid of. Now go to edit>define pattern. Call it metal pattern and click OK. Thats it, now that pattern is done.

Step 10

Now we are going to create our second pattern. Open up another 100×100px document.

Step 11

First create a new layer. We are going to create a carbon fiber looking pattern, so we are going to take our square marquee tool and make a black box that is 4px wide by 2px tall. We can do this easily because if we zoom in (like to 800%) Photoshop snaps our square into place by one pixel increments.

Step 12

Click the up arrow twice to move it up 2px and fill it with #333333. Repeat it with #666666, and then #999999, so that you have four different color blocks touching each other, 4px wide by 2px tall each. So it ends up being a rectangle 4px wide by 8px tall.

Step 13

Duplicate the layer with control + J, move it to the right 4 times then down 4 times. Do that until you fill an area like I have. (It ends up being 5 layers/objects)

Step 14

Flatten the image, like we did on the last pattern and select an area like I have here.

Step 15

Now go to edit>Define Pattern, and call it carbon fiber

Step 16

Lets go and open a new document, this will be the one we are working with. I’ll make mine 1680×1050

Step 17

Create a new layer and use the pattern stamp tool to paint the entire document with either one of the patterns we created.

Step 18

I am going to add in a focal point to this so lets create a square using the marquee tool and fill it with any color. We can add an image or icon to it later on. To center it on the page we are going to pull up our guides first click on the background layer then drag a guide to the middle of the document. Photoshop will snap the guide into place at the center. Hold down alt and shift and starting at the very middle, click and drag out to make a square right in the middle.

Step 19

Now we are going to add some layer styles, so go in and add a shadow and bevel/emboss like I have below.

Step 20

We want to add a highlight on the background so it looks like our square is pressed in it not just laying on top. Take the square we made and do control + J to duplicate it. Drag it below the original square layer, click and drag the effects in the trash. Now do control + T , and we are going to make it bigger by holding down alt and shift and dragging it out.

Step 21

Drop the fill down to 0%, then open up the layer styles and add an inner glow and outer glow like I have below.

Step 22

Using the ellipse tool create a circle and angle and adjust the size so it is something like what I have.

Step 23

Hold down alt and click on the original square layer, then alt + control click on the circle layer. You should have the part of the square selected that the circle isn’t covering. Hide the circle, and click on the gradient tool. Change the color to white (make sure your gradient goes from white to 0% opacity), and make a gradient from the top left to the middle area of the circle.

Step 24

Keep playing around until you get something you like.

Step 25

Now we are going to darken the outer edge of the document. Click on the marquee tool, change the feather to 100px and click and drag a square around the entire document. Do control + shift + I to get the inverse selection, and fill it with black.

Step 26

Finally put your logo or text in the box, in between the box layer and the refection layer.

Use this as a starting point, there is a lot you can do to enhance it. Enjoy.