Tag Archives: background

Photoshop: Create Seamless Tile Background made with a Parchment Texture

How-To

Photoshop: Create a Background using a Seamless Tile with a Parchment Texture

This how-to can be used from version 7 and up.

This how-to shows a method of creating seamless tiles for background textures. The how-to uses the "duplicate and flip" method.

The example creates a parchment-paper seamless-tile.


1)   Create a new document of 200 x 200 pixels:

 

01create

The background contents doesn’t matter.


2)   Set the foreground and background colors to a medium brown and cream:
 

02selectColors 03selectColors
 04selectColor

It doesn’t matter which color the foreground and background are set to.


3)   Make some brown/cream variation by rendering clouds. Select Filter -> Render -> Clouds:
 

05clouds

06clouds


4)   Boost the contrast a bit (Image -> Adjustments -> Brightness/Contrast…):
 

07contrast

08contrast


5)   Add some noise:
 

09noise

10noise


6)   Shrink the image in half:
 

11imageSize

12imageSize


7)   Duplicate the layer three times:
 

13duplicate

14duplicate

You can name the layers if you want.


8)   Flop one copy horizontally, one vertically, and one both horizontally and vertically. Select a layer to flip:
 

15flip

and then use Edit -> Transform and choose either on, "Flip Horizontal" or "Flip Vertical":

16flip


9)   Double the size of the canvas to 200 x 200 pixels:
 

17double

Note anchor the image in one corner.

18double


10)   Move the layers appropriately, i.e. move the horizontally flipped layer to the right, the vertically flipped layer up, and the layer that was flipped both horizontally and vertically to the upper right corner (select the layer and use the move tool):
 

19move  20move


11)   Merge the layers:
 

20merge

21move


12)   Use the Clone Stamp Tool to remove the seems and the mirror "reflections":
 

23cleanup  22merge

Select a size for the tool of about 45 with feathered edges. Before use (or the copied area in later use) set the tool by option-clicking on an area away from the edges that you want to copy. Apply the copied area around the image. It may help to do this step with the image zoomed in (enlarged).


13)  

Save the image as a jpg or gif (File -> Save for Web…) depending on which gives the best result based on image size and quality.

Generally a jpg saved with quality set to 0 (zero) will look OK as a background:

 

24save

25cleanup


14)   Create a webpage to test the image:
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>background test</title>
</head>
<body background="parchment.jpg">
</body>
</html>

26parchment_test

If the image shows seams or mirror "reflections" go back to step 12.


15)   Save the image.


This is the 200 x 200 pixels image produced by the above method.

parchment