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