Photoshop Seamless Granite Background
In my article “Making a seamless parchment background”, I showed you
how to use Photoshop’s offset filter to modify a parchment paper image
to create a tiling background for a web page. The same techniques are
used in this tutorial, but you’ll see how I handle a photo with an
This photo was taken of a granite countertop. As you can see, the
photo is unevenly lit and was taken at an angle so that there is some
blurring in the foreground and the texture gets smaller in the
background because of the perspective – not an ideal photo to use for a
tiling background image!
I’ll start by cropping part of the photo to use for my background by using the Crop tool.
Following similar steps as “Making a seamless parchment paper background,” I’ll duplicate the original layer, then apply the Offset
filter to the copied layer (Filter > Other > Offset). One
difference is that because I want a seamless tiling image that can tile
both vertically and horizontally, I’ll apply an offset amount both
horizontally and vertically. The pixel amount is approximately half the
width or height of the document.
I add a layer mask to the offset layer by clicking
the “Add layer mask” icon in the bottom of the Layers palette, then use
an airbrush to begin masking out the visible edges. Remember – the
top/bottom and right/left edges currently will tile perfectly, so you
want to keep most of your edits to the center part of the document.
I’ve highlighted the masked areas where the underlying layer shows
through in a different color so that you can see what I’ve done.
Luckily, the granite texture is fairly forgiving, so it blends together
Because I’ve masked part of the left, right, top, and bottom,
however, the tiling will be a little off, as you can see in the diagram
below. The left-and-right edge is very obvious.
To fix this, I’ll combine both layers and apply the Offset filter again. To keep from losing what I’ve done so far, I duplicate
both layers (Shift-click to select both layers in the Layers palette
and drag them together on top of the “Create new layer” icon) and, with
both layers still selected, hit Ctrl-E to merge them together. Then I apply the Offset filter, but I only apply a horizontal offset to fix the left/right edges.
I apply a layer mask to the merged/offset layer and mask out the middle again.
With a different photo, it may have been necessary for me to offset
the image again vertically, but in this case I didn’t need to. The
final graphic tiles seamlessly. The diagram below shows the final
tiling image marked in red.
This type of image would be good for a general page background with
a content area over it that has a different background (perhaps the
parchment background from my other article!). Because of the natural
variance in the granite texture, the background will look obviously
tiled if it’s the only thing on a page. Adding page elements over this
background will help to disguise the repeated patterns.