Making a Seamless Parchment Paper Background

Making a seamless tiling background is not as hard as it may seem – especially when you make use of Photoshop’s offset filter. In this example, I’ll use a stock image of some old-looking textured paper to make a seamless background appropriate for the content area of a web page. This image will be seamless when tiled vertically.

I’ll be starting with this stock image of parchment paper from istockphoto

The content area of my web page is going to be 900 pixels wide, so my first step is to resize the stock photo to 900 pixels wide. Then, I use the crop tool (C) and crop a section of the paper. I try to avoid especially distinguishable patterns or marks that might make the repeating tile too obvious. Make sure that the Crop tool option is set to Delete the rest of the image, not just to Hide it.

Currently the photo is on the Background layer, so I double-click on the background layer in the Layers palette. This allows me to turn it into a normal layer that can be moved around and more easily edited. Then, I duplicate the layer by dragging the layer thumbnail to the “Create a new layer” icon. Now I have two parchment paper layers.

With the top layer selected, I go to Filter > Other > Offset. I set the Horizontal offset to 0 and Vertical to about half the height of my document. With Wrap Around selected, I click OK to apply the filter.

The Offset filter basically moves the layer horizontally or vertically by the number of pixels specified. The Wrap Around option allows the picture to automatically “tile” to fill the resultant space. When you look closely at my parchment paper document, you can see the visible edge that is formed.

The good thing about using the Offset filter, however, is that now the top and bottom of your document will tile seamlessly. So if we can figure out a way to hide the edge, we’ll have a seamless vertically-tiling image.

There are a few different ways that you can hide the edge. The method you pick will depend on the image itself; if it’s necessary to preserve detail, you may want to use the clone tool to make copies of the background to hide the edge and mask the copies as necessary; if you have a pretty flat background, you may be able to simply add similar shapes and remove incomplete shapes.

In this case, the parchment paper image is going to be pretty forgiving, so I’ll make use of my two layers (the top offset layer and the bottom original layer) and blend them together to hide the edge. I’ll first add a layer mask to my top offset layer by clicking the Add layer mask icon in the Layers palette:

If you’re unfamiliar with layer masks, the small white box that is attached to the layer represents areas that you want to show or hide. White areas will show the layer; black will hide; grey areas will be transparent according to the darkness of the grey. You can paint on the layer with black, grey, and white to show, hide, or make different areas of the layer transparent.

I’ll use a soft airbrush to paint across the layer mask in black so that the center edge is hidden and the original layer shows through. In the diagram below, you can see the layer mask on the offset layer with the black representing the areas that allow the lower original layer to show through. I’ve colored the original layer blue in the diagram so that you can see how it shows through.

In this final diagram, you can see that the parchment background tiles seamlessly vertically (the actual tile is highlighted in red). It’s ready to be used as a web page background!