Making a Seamless Granite Background From a Photo in Photoshop

By Corrie Haffly
2008-02-14


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

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

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.

Tutorial Pages:
» Photoshop Seamless Granite Background

Related Tutorials: 5 Tips for Photoshop Efficiency Photoshop "Inferno" Typography Tutorial Photoshop Indiana Jones Poster Tutorial Photoshop Plasma TV Design Tutorial Designing a Black Zune 2 in Photoshop Design a Cool Old Book with Photoshop