May 8, 2008
Photoshop: Create Seamless Tile Background made with a Parchment Texture
|
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: | |
|
|
The background contents doesn’t matter. |
|
| 2) | Set the foreground and background colors to a medium brown and cream: | |
|
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: | |
|
|
||
| 4) | Boost the contrast a bit (Image -> Adjustments -> Brightness/Contrast…): | |
|
|
||
| 5) | Add some noise: | |
|
|
||
| 6) | Shrink the image in half: | |
|
|
||
| 7) | Duplicate the layer three times: | |
|
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: | |
|
and then use Edit -> Transform and choose either on, "Flip Horizontal" or "Flip Vertical":
|
||
| 9) | Double the size of the canvas to 200 x 200 pixels: | |
|
Note anchor the image in one corner.
|
||
| 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): | |
|
|
||
| 11) | Merge the layers: | |
|
|
||
| 12) | Use the Clone Stamp Tool to remove the seems and the mirror "reflections": | |
|
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: |
|
|
|
||
| 14) | Create a webpage to test the image: | |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
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.
|
||
|
|
||
The past week’s re-organization is complete and things are back to normal. 
