Pete Bauer on Photoshop
Seamless Patterns & Textures, Manually and with ImageReady

Patterns and textures have a variety of purposes in our graphics world, from Web backgrounds to shadows with the Lighting Effects filter. Some look and work better as an identifiable repetition of the same object, others should be seamless -- no visible break between tiles. Here's one way to make those seamless patterns.

The first step is to determine the size of each tile. Smaller tiles download faster for Web backgrounds, larger tiles allow more room to work and play. We'll use a 50 pixel by 50 pixel sample, so we need to work on a canvas that's at least 100x100 pixels, with a transparent background. The first thing I do is make the grid visible and snap-to, using the appropriate commands under the View menu. I also add guidelines to delineate my "tile."

What we're aiming for is a pattern that seems to have no distinct beginning or end. The way we'll do this is to have elements that run off the left edge re-appear on the right side of the tile. First we draw some things hanging beyond the left edge.

Using the Rectangular Marquee tool, we'll select everything that is outside the guideline and Option-drag (Alt-drag on Windows) into our tile, aligning to the right. Holding down the Shift key will ensure that you drag straight across the tile.

Next we'll repeat the process, going from top to bottom. Again, draw lines or create objects that extend beyond the edge, then drag-copy the extended parts to the lower part of the tile.

Now use the Rectangular Marquee to select those parts of the pattern that are outside the guides and delete them. Now turn off the grid and fill in the blank spaces in the middle, being careful not to extend beyond the bounds of the guidelines.

Once we've complete our artwork, we need to define the pattern. Use the Rectangular Marquee to select only what falls within the guidelines. Then use the menu command Edit> Define Pattern. Save the file and keep it open.

Open another document or create a new document, much larger than your tile, and select the area to be filled. Use the command Edit> Fill, and select Pattern. This will show you what the tiling of the pattern will look like.

Zoom out to 50% magnification or lower to look for areas that seem to repeat unnecessarily. Here, we seem to have a rosette pattern emerging.

This can be remedied, if desired, in the original image. Then redefine the pattern and test it again. When you are satisfied with your pattern, the original image can be cropped down to the edges of the tile, in this case to 50x50 pixels, and saved to be used as a texture or as a GIF to be used on a Web page.

That was the hard way to create a pattern for a Web page. Now let's do it the easy way.

Open ImageReady. use the menu command File> New and in the dialog box, give it a name and make it 150x150 pixels so there's some room to roam. The background can be white, your background color, or transparent. We'll create Red Ducks in a Yellow Sky as our background, so we need to make yellow our background color before we choose the menu command.

We've pre-loaded the Assorted Brushes into our Brush palette. (You'll find them in the Goodies folder within your Photoshop folder. Use the Load Brushes command from the palette pop-out menu.) Using the Pencil with red as the foreground color, we can click around in the image. make sure not to go off the edge -- ImageReady will handle that for you. Once you've drawn some of the pattern, use the menu command Filter> Other> Offset.

In the dialog box, forget the 50/50 preset and use something less symmetrical to minimize obvious repetition. I used 35/25.

You can now draw in the empty areas and use Command-F (Control-F on PCs) to re-apply the filter. Do this as many times as necessary to fill the pattern to your needs. Avoid the temptation to click or draw in an area that runs off the edge -- just hit Command-F (Control-F) to re-apply the Offset filter again.

Next use the menu command File> HTML Background... Choose View as Background. Click OK. Now go to File> Preview In... and pick the browser of your choice (if you have more than one installed).

Assuming it looks good to you, pop back to ImageReady and click on the Optimized tab of the document window. Make sure you're set to GIF and reduce your Color Table as necessary, using only Web-safe colors if desired.

Save your image using Save Optimized As... and it's ready to be used in your Web creation tool of choice.

One final note: Last week I mentioned ePeople, the net-based tech support operation. Apparently Adobe is as impressed as I -- starting last Friday evening, the Adobe Support Web site carried a link to ePeople at the top of the page under the heading "Adobe Support Exchange." Check it out at http://www.adobe.com/support/main.html .