Making Your Textures Seamless

What Exactly Does "Seamless" mean?

If you are new to the world of 3D or web design, you may be wondering what "seamless" means. This simply means that when your image is placed side by side, and top to bottom, the images match up just right so that you can't see the seams. In the images below, the leopard image is tiled 4 times. The image on the left has not been made seamless, while the one on the right has been made seamless. If you look close, you can notice that the pattern repeats, yet the seams are not obvious. The remainder of this tutorial shows you how I erase the seams to create a seamless texture map.

Offsetting Shows Seams	Image with Seams Removed

Scroll down this tutorial to find links to the finished seamless
leopard texture that you can actually use.

This lack of seams is critical in 3D programs, as they utilize such tiles to wrap textures around 3D objects. They are also used for web page backgrounds and desktop wallpaper. The idea behind them is that Instead of wasting a huge amount of memory utilizing a large enough graphic to cover a large area, memory is conserved by using a much smaller graphic, and tiling it multiple times.

Photoshop Rules!

It can be tricky to create such seamless tiles so that they are convincing. There are many methods to do this, I'll share my workflow in Photoshop, so you can see how I work. The principals are the same to make any image seamless, but different types of images do present unique challenges to creating a realistic seamless tile. Photoshop is, of course, invaluable in getting the job done.

In this case, the first step is to restore some color and saturation to the leopard image, as the original looks a little pale. A quick way to do this is to duplicate the layer, using shortcut CTRL-J (Mac: CMD-J), making sure you have no active selection. Set the layer mode of the copied layer to "hard light". Instant saturation. You could also try adding a hue/saturation adjustment layer and boosting the saturation, but this method often produces artifacts if you push the saturation too much. I'm satisifed with the color now, so I move on to the next step, which is to offset the image to make the seams visible.

Merging Layers into a New Layer

But first, I want the saturated image on it's own layer. Right now it's the combination of both layers which give me the image I want. So I select all, CTRL-A (Mac: CMD-A). Then I do Edit-->Copy Merged, or CTRL-SHIFT-C (Mac: CMD-SHIFT-C). Then, do Edit-->Paste, or CTRL-V (Mac: CMD-V). This pastes the merged image into it's own layer, while keeping the others untouched for safe-keeping. Since we need two of these images, simply paste again to get a copy, and make the top copy active (we should have 4 layers now).

Offsetting the Image

Now we are ready to offset the image to make the seams visible, so that we can get to work on them. Go into Filter-->Other-->Offset. Type in 500 pixels for the "x" offset, and 400 for the "y" offset (exactly half of the total image dimensions). Make sure "wrap around" is set. If working on an existing image and you are unsure of it's dimentions, simply ALT-Click (Mac: Option-Click) the status bar at the bottom of the Photoshop screen, and your pixel dimensions are conveniently displayed.

To avoid confusion, we are only working on the top two layers. One is the color-enhanced image, and the very top one is the color-enhanced image, offset.

The bottom two layers are simply copies of the uncolor-enhanced image, that we keep as safe-keeping in case we really screw up and need to retrieve the original.

Non-destructive Seam Removal

Next, we need to work on the seams. Click the "add layer mask" button at the bottom of the layers palette (see red arrow). A layer mask allows us to non-destructively "erase" parts of the top layer, to show the layer beneath it. This is done by painting with black in the layer mask. To "un-erase" the hole's you've punched into the top layer, simply paint with white. Previously erased portions of your image magically come back.

So, with a brush choosen, fairly large with a slightly soft edge, I paint over the areas where the seams are. Note that I'm not painting with color into the image itself, I'm painting with only black and white in the top layer's mask. Where the seams once were, the layer below now shows through. Since this layer was not offset, the seams disappear.

By switching back and forth between white and black (use keyboard shortcut "d" to default the colors to black and white if needed, and "x", to quickly exchange foreground and background colors), we can quickly erase the seams. Follow the contours of the image, so that the transition between the top offset layer and the one below it look natural. For instance, you don't want half a leopard spot to show. In this case, you'd erase more to uncover the full spot. In the example below, I've started the process, and now will work on the problem areas, which don't look quite right (red circles). These are areas in which the layer above has been partially obscured, but leave behind semi-transparent regions or "half-spots" which aren't quite natural:

Notice the layer mask icon above, to the right of the top layer. It shows where I painted with black, and thus where the "hole" is on the top layer, allowing the non-offset image to show through beneath. You can see the telltale cross shape, effectively eliminating the seam. When I'm satisifed I copy the merged layers (what I see on screen, which is really two layers together), and put this on it's own layer: Select all with CTRL-A (Mac: CMD-A), Copy Merged with SHIFT-CTRL-C (Mac: SHIFT-CMD-C), then Paste with CTRL-V (Mac: CMD-V).

Double-checking

Now that we've got our first attempt at a seamless image on it's own layer, it's time to check for any seams we may have missed. For this, go into Filter-->Other-->Offset, and only offset in the X axis. Set Y to zero. This often shows up seams we missed. Since this is only a minor fix, I'll use the Clone Stamp to clone over the seams. Next, I'll check by only offsetting the Y, and clone to fix any errors.

When satisfied, I create a levels adjustment layer. I notice that the histogram doesn't quite extend to the far right, so I move the rightmost arrow to match with the end of the graph. This sets the white point to the brightest points in the image, restoring the full range of values to the image.

Testing Your Finished Tile

Finally, we can test our finished, seamless texture map several ways. In Photoshop, you can manually lay copies of your image side by side in an expanded canvas to test. Better yet, you could automate this task with an action. The action would copy the current layer to the clipboard, create a new document, expand the canvas size of the new document by 200% in both X and Y directions, create a pattern from the contents of the selection, then fill the current document with the pattern. This creates a 2x2 tile of the texture, and you can check for areas that stand out too much, making the pattern too obvioius.

Another way to test the tile is by actually using it as a texture in your favorite 3D program.

That's it! Our next step is to create a matching bump map, and that's exactly what I'll show you in a future lesson. For our next lesson, however, I'll go over how to create non-photographic (illustrative, such as a spaceship hull) seamless tile from scratch. It uses a similar method as the one I've shown, but we will be creating a spaceship hull texture from scratch by using photoshop's native tools, and making the texture "seamless from the start".

I hope this tutorial has been helpful to you - let me know: carl@carlsart.com.

Click on either resolution below to download the finished leopard texture:

Download the 500x400 version
Download the 300x240 version

Happy Rendering!

URGENT NOTICE: Only days left for getting "City and Urban Exteriors vol. I" for $47. Normally $147. I've only got about 10 left for this price. All of the techniques I teach you, I have used in creating this texture CD. The difference is that most textures on the CD are higher resolution than the examples I provide here. Although there are a few scattered lower res textures, most are 1500 pixels wide or larger. They come in 3 convenient resolutions, for users who don't need that much detail (such as web designers, for use as backgrounds).

The textures on this CD can be used not only to create fantastic cities of the past, present or future, but also for sci-fi, fantasy, and industrial themes. In a future tutorial, I'll teach you how you can take normal looking building or window textures from the CD, and turn them into a spaceship hull, military bunker bulkhead, or any number of unexpected things. This technique is like having thousands of textures on the CD, instead of hundreds.

When you see the tutorial I've got planned for you, you will wish you had taken advantage of the $47 price. But I'll be honest - even if you wait until it goes up to $147 it will still be well worth it.

Why let a $147 CD go for only $47?
I'm the first to admit when I've made a mistake, and I have to admit, I made a duesy of one on the first pressing of this texture CD! The result of this screw-up makes the HTML graphical guide inoperable for MAC users on these CDs. It's simply an issue of the file names being longer than 8 characters each. This causes the Mac to truncate them to 8 characters. You can still browse and get to them fine. But the HTML browser expects the longer file names, hence the problem.

There is no problem at all for PC users. Even for Mac users, all $147 worth of textures are still 100% usable, it's just that MAC users can't use my custom graphical browser. My research shows that many people don't use this anyway. When you're in your 3D program, most users just point to the textures they want directly, using the 3D program to browse the CD. So, although it's no biggie, and you probably wouldn't even notice the "problem", I'm letting this lot go for only $47 each. Once they run out, the price goes back up to $147, and this offer will likely never be repeated (unless I screw up again :-). So, be sure to order today so you don't miss out. I will be referencing textures on this CD for some of my advanced tutorials, and it will certainly help for you to have the high-res versions handy, to get full value out of my free tutorials. Textures like this sell for $8/each on major sites, so you are getting 246 for the price of 3 or 4. Enough said!

• How to hand craft realistic bump maps
• Using alpha channels vs. transparency maps
• Creating Black and White textures
• Forging realistic metals
• How to Add Dirt and Grime for added realism
• How to double, triple and quadruple the resolution of your images, with no quality loss
• Texture Maps vs. Procedural Textures: Pros and Cons
• How to Use Textures as Custom Backdrops for Photography
• And whatever you want to learn - just ask me, and if it has wide enough appeal, I'll develop a tutorial for you!
  

What would you like your next personal lesson to be about? Your feedback is critical, as it drives the content on this site. Did you find this tutorial useful? Was it too advanced, too simple, or just right? Send your wish list to me at carl@carlsart.com. Almost no one clicks this link to send me their wishes. What that means is that if you have a specific subject you wish to brush up on, at this point, you are nearly guaranteed of me creating a tutorial on it. I may not be able to say that a year from now, so take advantage of me, please!