Lots of readers write, on a regular basis, asking about the various aspects of generating seamless background patterns and tiles. While I thought everyone already knows this, I decided to address it this month by digging out the patterns article I wrote several years ago for Photoshop Tips & Tricks. Problem is, I can't seem to find the article. Besides it was for Photoshop 2.5.
__ Little has changes, aside from the fact that there are two dozen utilities online now that create pretty good backgrounds. If you want to do it yourself in Photoshop, here's how:
__ First get the image you wish to use for the texture. Here we just scanned in a piece of blue jean denim. (Imagine me standing by the scanner with my pants off... no, don't!) Actually someone asked a while back for a denim background, so here it is. (I'll post the fruits of our labours along with this article.)


The key to seamless backgrounds
is the Photoshop Offset Filter.

With this, most any texture or 'scene' can be made seamless. If the image is a recognizable object or shape, some care should be taken to plan the positioning of literal images should fall on the tile.
__ I've seen background tiles in all sizes and shapes. It you're building a web page, sometimes it's better to have a wide, short rectangle. Remember that gif files compress smaller to the horizontal than to the vertical. I usually go with a square, because the Offset filter seems to work better, and the calculations are easier on my tired old brain.
__ In our example here, we selected the best looking patch of denim from the scan, and cropped it down to a 144 x 144 tile. Using the Filter > Other > Offset filter, I set the "Wrap Around" radio button, and gave the distance 72 pixels, exactly half of the 144. I didn't have to do that, but if there are pixels that need to be modified, that puts them in the centre of the work area. Using the Clone (Rubber Stamp) tool, it's a simple matter to smudge around, cloning pixels until all of the repetition is gone.
__ You should view your creation often as work progresses so any unwanted, repeating flaw in your texture can be cloned out. I keep a larger file open in the background, "Define Pattern" at each new version of the image, then Fill with Pattern in the backup file window.

Obviously the more aggravated the pattern, the easier it will be to hide any unwanted flaws... smoother the patterns demand more careful attention to any seam that lingers.
__ Once you're satisfied you have a winner, just save it out as a gif file and you're ready to go. For backgrounds destined for printing presses, extra care needs to be taken to retain file resolutions. For web backgrounds always save as a gif file, but NOT a transparent 89a file.
__ If you want your texture available to Photoshop and other plug-ins that utilize textures, save a copy of your masterpiece in the Photoshop > Presets > Textures folder as a dot-pad file.
Be sure to convert it to greyscale, flatten, and remove any paths or channels.
Now it will be 'found' by other programs that automatically look there for textures.

That's all there is to it.

Oh, by the way: to the reader who wanted to know how to put a texture or pattern into typography, our heading was simple... type the text, (In PS5 and 6 drop it to raster type layer) while it's still selected on a new layer (with the racing ants indicating it's selected) simply go to the Edit menu and say "Fill with Pattern", and presto you've filled it with the pattern. There are more complicated methods, but if you know what the type will say, and what texture you want to use, you can quickly do it this way. In our version above we simply applied the Inner Bevel filter to it while still selected to give it that raised look.

Thanks for reading!

Note that a whole collection of background is being added to the Publishers' Warehouse this month. Drop on in and get the directions to the loading dock.

<- back to the first page _|_ back to the Graphics Department Front Page