Advanced Search

Create a Pattern Background with Photoshop

Need a nice warm look for your website instead of a plain, stark, white background? Here, we are going to create a nice background pattern for your website design using photoshop. Usually we will just duplicate a simple symbol all over our background to make a repeating pattern. This is an easy method to make your sweet background in just few steps.

First, prepare a pattern that you wish to have it as your background. Here I started with a new page with the size of 215 X 215 pixel. Then add a new layer and filled it with a color by click Edit > Fill and select the color you desire. For this tutorial i used a pastel brown, #e7e8d4 .

Pattern Create Layer

Next let’s prepare a pattern. I found a nice pattern which I going to use, you can use whatever shapes you like or any pattern that you have. Fiiled the pattern with a slight darker brown so that is stands out.



Now make a grid line in the center of the page. You can get this grid lines by clicking on the ruler of your page and drag, if you can’t see your ruler, go to Views > Rulers. Drag the top ruler to get your horizontal grid line and place it at the sample of your page and for your verstical grid line will be from the left side ruler of your page. Again drag in and place it in the center. Just like below.

Pattern Note: The short-cut key to show the rulers are Ctrl-R. When you dragging to the center page, it actually snap it to the center page than set it yourself so you don’t need to see the ruler whether it is center or not. If it doesn’t click View > Snap

After you have set your grid lines, take the pattern and place it to the center of the page so your pattern will align later in your website design. Just like the diagram below


Now to duplicate the pattern and add it to the top and bottom of the pattern you just placed at the center. To duplicate, select the layer which contain the pattern and click Layer > Duplicate Layer, the place it at the top of the center pattern, and do the same to place another pattern below the center pattern.

Pattern Note: To duplicate in a faster way, click on the layer that contains the pattern and then hold on to Shift and Ctrl key together and move the center pattern. You will get a duplicate layer of the layer.

Now that you have 3 pattern in a row, Merge the 3 pattern together, select the 3 layers and click Layer > Merge Layers. Again duplicate the layer which have the 3 pattern and place it at the left and right of the center row pattern, just like below.


As you can see now, you have filled your page with nice patterns. To fill the whole page of your website design, you doens’t need to repeat the duplicating step, as it will be alot of layers and some might run out of alignment. Now here’s the magic, got to Edit>Define Pattern and give a name to your pattern and press ok.

Pattern define pattern

After you have define pattern, you see like nothing is happening. Hold on, now let’s give it a try how it works. Create another new layer, and filled it with any color you like.

Pattern Create Layer

Now double click the layer you just added, to get the blending option and add the pattern overlay and click on the pattern to choose the pattern you just define and the background will fill the area accordingly with the pattern. You can choose to change the color by adjusting the blend mode.

Note: Blend Mode - Overlay
Note: Blend Mode - Multiply with opacity of 30%

Pattern Overlay Pattern Overlay Pattern Overlay
Note: Click to enlarge    

Now you can see with different blending mode, the result is different base on color. If you wan to change to other color you can always change the main pattern that you did and define another new pattern. Below is the sample of a web template using pattern for the background.

Web Template

  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost