Seamless tile tutorial -Photoshop

There are quite a few tutorials out on the web that will teach you how to create a seamlessly tiling image.

This tutorial, like most others, will teach you how to use the Filter >> Offset feature to identify and remove seams from a tile. I also cover a couple of methods for setting up your workflow, and testing your image before you throw it to the web or on a 3D model.

If you're serious about web art creation, including color theory, image compression, and best practices, check out Lynda Weinman and Bruce Heavin's great book, <coloring web graphics.2>, published by New Riders Publishing.

Lynda has a site on the web: lynda.com, which is well worth checking out.

The images from this section are from the Macintosh version of Photoshop 5.5, but the methods used here will work on all versions of Photoshop 4.0 and on Windows as well as Macs.

A note about images: this tutorial uses a continuous toned image, like a photograph, but the same principles apply if you are using images like colored line art or logos.

Also worth considering: I gave a speech on best practices for creating tiling textures at the 2000 Game Developers Conference in San Jose, and you can read the white paper for that talk here.

The images in the paper deal mainly with landscape textures for Flight Simulator 2000, but again, the same principles apply.

Let's create a tile from scratch!

We start by creating two new images: one that will tile, and one that we will use to check the work.

Although a self-tiling image can be non-square, it is much harder to accurately proof. I also always start with an image size based on a power of 2 (i.e. 2 X 2 X 2 X 2 = 16). Why? There are two main reasons, the first being that many of Photoshop's filters (most notably Clouds) will create already seamless tiles, but only if the original image is based on a power of 2. Secondly, powers of two are easy to manage and check.

Heck, even your monitor resolution is based on a power of two.

Step One: Getting Set Up

Go to File >> New

This will be our tile. Under image size, type in your image dimensions. Make sure that you're using pixels as a unit of measurement, and that your image resolution is 72 dpi.

For checking the pattern, create another image, using all of the same settings except for size. Input a file size that is some multiple of your tile. For example, a tile that is 128 by 128 pixels might have a "checking" file of 768 by 768 pixels. This will repeat the tile six times across and six times down, and will give you a good idea of what the resulting pattern will look like.

Now let's get tricky.

Go to File >> Preferences

Choose Guides and Grid

Set up your guides to show you where the edges of your tile are when repeated in on our checking file. Taking our 128 by 128 pixel example, we would set up a gridline every 128 pixels, and maybe a subdivision of 2, to show where the center of the tile is. Choose a style and a color that you are comfortable with.

To view your guides (or turn them off), choose View >> Show Grid

Step Two: The Tile

I started by picking a base color, and then going to

Edit >> Fill, choosing the foreground color.

I then reset my colors to the default of black and white (select "D" on the keyboard), and chose Filter >> Render >> Clouds, which renders a fractal image using the foreground and background colors on top of whatever color may already be present.

To give the tile some interest, I then chose Filter >> Texture >> Texturizer and chose the preset of Sandstone, playing with the settings there.

Edit >> Fill

Filter >> Render >> Clouds

Filter >> Texture >> Texturizer

Step Three: Getting it Seamless

First I duplicate the layer I'm working on:

(Layer >> Duplicate Layer)

Then I choose Filter >> Other >> Offset, choosing offset values 50% of my texture's dimensions (in this case 256 X 256). I also make sure that "wrap around" is selected.

At this point it's now easy to edit out any seams that are visible, by erasing to the image below. You can also use the rubberstamp tool to paint back in areas. As you can see from the example image, I create a very rough cross shape, trying not to make the cross shape too obvious. This helps eliminate those annoying horizontal and vertical lines that you will see in many patterns across the web.

Filter >> Other >> Offset

A very rough cross shape

Step Four: Check Your Work

Now let's make this baby sing!

To have Photoshop make a pattern, first go to Select >> Select All. With everything selected (it doesn't matter what layer is active, only what's visible), go to Edit >> Define Pattern.

Now let's switch to our checking document.

Choose Edit >> Fill. Select the "Fill with pattern " option.

Voila! Your image is tiled. Turn your grid on to see where your edges are.

Now at this point I generally go back and work on the tile image until I've reduced as much of the obvious patterning as possible. If you are finished at this point, flatten your image (choose Layer options, and select flatten) and save it as your file of choice.

You're done! Rock on!

Edit >> Fill ( Select"Fill with Pattern " )

View >> Show Grid