Tiling Textures | Intro to Tiling Textures

Course Developer: Todd Gantzler
Instructor: Todd Gantzler
Layout: Patricio Sarzosa, all images in this course used with permission.
Editors: Tara MacKay, Gordon Drummond, Rachel Sokol

Todd Gantzler

Tiling textures are fun! And they're also a very important part of putting together a good-looking game environment. Like most aspects of game development, tiling textures is an art that requires a lot of practice to make perfect.
In this class we're going to focus on nothing else, so get ready to tile.

Intro to Tiling Textures

With some Photoshop finesse, you can tile textures seamlessly in your game art.

Tiling textures are simply, well... textures that tile. A game artist is likely to spend the majority of his or her time creating tiling textures for a game—so you'd better like it! (Or at least become good at it.)

Textures are an art form that's not always fully appreciated or understood. The look of a game depends on tiling textures as much as anything else.

In this course, you'll not only develop your artistic talent, you'll also learn important skills for your game career. Making textures that tile and creating texture sets are crucial tasks for any game artist.

Are you ready to tile? Let's get to it.

In this lecture, you can expect to:
Learn how textures and tiling textures are used in game development.
Learn about the value of research, reference, and source imagery to any game artist.
Learn techniques to shoot good source imagery yourself.
Learn how to make a basic tiling texture.

 

 

 

 

 

 

 

 

 

 

 

 

Textures are digital images that simulate the characteristic appearance of a surface such as sand, stone, earth, water, or grass.

 

 

 

 

 

 

 

Game platforms only have so much memory to store textures. Using tiling textures is an efficient way to use texture memory.

 

 

 

 

 

 

 


 

 

 

Several game artists on a development team may spend all of their time creating tiling textures.

 

 

 

 


 

 

 

A texture doesn't necessarily have to look 100% realistic, but it must fit the context and style of the game.

 


 

 

 

 

 

 

 

 

Creating an illusion of depth is also important in developing texture tiles.


 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 


 

 

 


 

 

 

 

 

 

Make a habit of researching some reference materials for every project.

 


 

Even fantasy worlds must be based on aspects of the real world. You cannot create the unreal well without a knowledge of the real.

 

 

 

 

 


 

 

 


 

 


 

 

Learn more about R. Crumb by visiting crumbproducts.com.

 

 

 


 

 

 

 

 

The attitude towards using stock or source images varies from studio to studio.

 

 

 


 

 

 


 

 

 

 

 

 

A high resolution camera with a good zoom will help you take better source images.

 

 

 

 

 

 

 

 

 

 

 

Shooting at a higher resolution means even the smallest parts of your image will have more pixels.

 

 

 

Capture your source images at as the highest quality available. You'll have more pixels to play with.

 

 

 

 

 

 

 

 

 

Shoot source images of textures straight on, without obvious shadows. .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

A typical game might contain hundreds or thousands of tiling textures.

 

Tiling Textures Defined

 

Making a World Less Plastic

Let's begin by addressing why tiling textures is such an important area of game development. Tiling textures exist simply because purely computer-generated surfaces tend to look like plastic. Sad but true. If you apply color to any object in a 3D software program like Maya, the result will look artificial and unnatural.

A simple way to give a 3D surface a better, more natural look is to apply digital images known as textures to the surface. Textures are digital images that simulate the characteristic appearance of a surface such as sand, stone, earth, water, or grass.

The textures are applied to the surfaces of 3D models just like decals are applied to a model plane or car.
In The Sims 3, textures are used to improve the look of every surface: walls, floors, houseplants, you name it.

So that explains the purpose of textures, but why do game artists tile them, you may wonder?

The various platforms that run games—your PC, PlayStation, Wii, or Xbox, for example—are all limited in their performance. In order to create each scene, they can only draw so many polygons per second, and they can store in memory only so many textures. In order to use this limited texture memory efficiently, it is common practice to use textures that "tile."

A texture that tiles is a texture that can be placed side-by-side with a copy of itself and show no seam where the two tiles touch. The advantage of tiling textures is that a relatively small texture can be applied to a large surface by repeating (or "tiling") that texture over the surface.

The Role of Texture Artist

Glamorous or not, the role of texture artist is critical to the game development industry.

Some companies employ artists to work entirely in 2D, and some of those artists may spend all of their time creating textures, most of which will usually be tiling textures (such a person is often called a "texture artist"). But even game artists employed in a wider capacity will often spend more time making tiling textures than making 3D models, or any other type of game art.

Without textures, this image from Unreal Tournament would be unexciting, to say the least.
Much more engaging.

While a game artist may make 3D models for an environment, the environment itself is often made by a game designer. The game designer's job is to focus on gameplay—to make the game fun! The structure of the game world often has a lot to do with the gameplay. For example, in a platform game that involves a lot of jumping, the distance between platforms is an integral factor in gameplay.

A designer may create the 3D geometry of the environment, but he or she will bring that space to life using the tiling textures and 3D models created by the game artists.

Game artists must work well with everyone on the team and often adjust their work to changing project constraints. To do a great job, however, game artists must be artists first. An artist knows what looks good and what doesn't look good (and why!). An artist always strives for the best results within the limitations of the project.

Designing Tiles

Fire up your console to play any current game, and you'll see textures everywhere. The ground in an outdoor game is generally covered with tiling textures, as are walls, floors, and ceilings of buildings. Liquids such as water and lava use tiling textures. Even the sky may use textures that tile.

What separates a great texture from a poor one? Well, first and foremost, a tiling texture must work in the context of the game. It should make the surface look like something other than a computer-generated polygon. It doesn't necessarily have to look 100% realistic, but it must fit the style of the game.

It should almost always appear to have some depth and must appear to be three-dimensional. Creating a convincing, realistic illusion takes some practice.

A ton of practice will help you understand the limits of textures in a 3D environment. For example, you might be able to make a brick wall—even with doorways and window wells inset—very believable. You may even be able to add ivy growing on the wall.

But it may not be possible to create an effective illusion of a tree standing next to the wall within that same brick texture—from the front, it may look fine, but from other sides it will look flat and obviously fake.

The screenshot above is from the map DM-Desertisle in Unreal Tournament. Click to enlarge.
The tiling textures below are used to define the look of various surfaces…
The bark of the trees…
The leaves on the trees…
The ground…
The rocks…
And even the water.

The Value of Research and Reference

Where does a game artist begin the process of designing tiles for a game? Usually a project begins with some research to find reference materials, outside the digital realm.

That's right, off the computer! An artist should always be interested in looking at the world around him. Many artists in traditional media, such as paint, would never think of painting a landscape without going outside and looking at one. Of course, you can improvise on what you see in front of you—you are under no obligation to reproduce the world exactly as you see it.

Even if your subject cannot be found on this world (if you are creating a fantasy or science fiction game environment) your audience will bring to it their experiences of this world. Your imagination can provide you with information on how an invented alien creature moves, but your animation will not be convincing unless you have studied how various real creatures move. You cannot create the unreal well without the knowledge of the real.

If you wish to create a castle, you should look at real castles. If you don't live in a part of the world that has castles nearby, you can still consult books, films, and the Internet. Everyone has an idea what a castle looks like, but it is extremely easy to forget the small details that can really bring your subject to life.

R. Crumb Case Study

Many accomplished artists acknowledge the value of reference materials. R. Crumb is one of my favorite examples.

Crumb is a well-known comic artist best known for his work in the '60s and '70s. In the film Crumb (March 9, 1999, Columbia/Tristar Studios, Terry Zwigoff director, ASIN: 0767821505), Crumb talks in some detail about the value of reference materials and looking at the real world.

If you don't know his work, Crumb has a distinctive, edgy approach to his cartoon line art. And yet he pays a lot of attention to realism. With the help of a friend, Crumb prepared his own reference library by shooting rolls of photographs of telephone poles, wires, transformers and all the related hardware you can see cluttering the landscape of a modern city. He used these as reference when drawing in his studio.

He talked in this film about how we come to ignore these things, about how they fade into the background and escape our notice. The street scenes in Crumb comics are known for their dense grid of wires and poles. His special attention to detail makes his drawings more realistic and more interesting.

Using Source Images

Because game production is such a long and expensive process, many game companies and game artists work from source imagery. Stock source imagery is available in various forms, with collections available on CD and the Internet.

Textures for impressive environments can be found at online hubs like TurboSquid.

You can even find collections of textures that already tile and are ready for use in games. Other source imagery will require work to bring it into line with your specific requirements. Some images are available for a price, some free of charge.

You should expect that all such resources are owned by someone, and that the owner will reserve certain rights to the work. Even if you have purchased a texture library there is probably some stipulation as to how you can use it. You will want to be sure you are aware of such stipulations, and your rights in general—although fully exploring the subject intellectual property is beyond the scope of this course.

Textures that start with photographs are very well suited to a realistic look. Editing a photo in Photoshop can produce a texture that fits with almost any style. However, some artists will want to hand-paint everything, and this can give a unique look to a game.

Which approach you use may depend on where you work. Many studios will use source imagery as much as possible, while others will use few to no source images. Working from source imagery has the advantage of saving time, and insures that you have done at least some research into what your subject looks like in the real world. Painting all textures by hand (using no source imagery) can result in a very personal style, depending on the ability of the artist.

Shooting Source Images

To develop your image library and deepen your understanding of textures, it's a great idea to photograph your own source imagery and build your own royalty-free reference library.

With a digital camera, the world is your oyster. What kinds of source images you need will depend on the needs of your game.

Be on the lookout for specific textures that occur again and again in games. A medieval look is common in games, so a good collection of old stone block photos will come in handy. A selection of different types of brick will also be useful. Be sure to shoot door and window treatments, as these can be great for reference if not for actual textures. Pay attention to roofs and ceilings as well, as most people are challenged when trying to decide from memory what these should look like.

Here are some photographs I've taken for use in textures over the years. They range from the very common to the unusual (all of these were used in preparing examples for this course, so watch for them in future lectures):

These are the photographs that you'll work with (the first you'll use later in this lecture). Click each one for a larger version:

These are tiling textures I made from these photographs (similar to what you'll make during this course). Click each one for a larger version:

Digital Photography

A digital camera is an excellent way to capture an image and get it onto your computer and into Photoshop so that you can begin to produce realistic textures. Digital photography gives you great control over the source imagery that is available. You control what you shoot and how you shoot it.

You are limited, of course, by your access to your subject matter (castles or dungeons are not widely available to photographers in North America, for example), and by the conditions in which you take the photographs.

Film photography still has some resolution advantages over consumer digital photography. One-hour processing is widely available, and you can often choose to receive your photographs on CD. You can also use a scanner to obtain digital copies of your pictures.

I must point out that even when you are taking the pictures yourself you are not completely free from concerns over ownership of the imagery. The owners of many buildings claim rights to control images of those buildings. This applies even to buildings that are historical.

Fortunately the texture artist is generally more concerned with details, such as bricks or stone, windows or doors. These things are less likely to cause problems except in cases where the features are a famous and identifying attribute of a building.

(Please remember that it is not my purpose here to provide legal advice on the issue of copyright and intellectual property. I'm just reminding you that these are important considerations and should not be taken lightly.)

Choosing a Camera

The quality of your camera can have an impact on the quality of the images you capture. Certain features can help you when shooting for textures.

You should use the highest resolution possible. You will not always be able to get as close to your subject as you might like, and shooting at a higher resolution means even the smallest parts of your image will have more pixels.

If you will create textures at 256x256 pixels, you'll need to have at least that many pixels in the portion of the image that you use for your texture. I recommend that you work at twice the intended resolution; so if you will be creating textures at 256x256 pixels, try to shoot so that you have at least 512x512 pixels to work with.

Zoom helps in a very similar way. A camera with good optical zoom capability lets you effectively get closer to your subject, even if you are physically unable to do so. When you can zoom in you can ensure that the greatest part of your available pixel resolution is used to capture your subject.

Digital zoom is helpful in seeing your subject and framing your image to some extent, but if you use digital zoom you will capture an image of lower resolution. Some manufacturers multiply optical zoom by digital zoom when advertising their zoom capability. You should look into this very carefully before purchase.

Also, it can be helpful to have a viewfinder that can be repositioned relative to the camera. Many digital cameras have bodies that twist in one or more axes. This can be helpful because it allows you to hold the camera over your head and still use the viewfinder to frame your shot, or to hold it to one side, or to shoot from waist level.

Some manufacturers make waterproof cases for their digital cameras, and others do not. This can be a good option to have as it increases the weather and other conditions under which you can safely use your camera.

Shooting Textures

If possible, stand directly in front of what you are shooting. Hold the camera so that the line of sight of the viewfinder is perpendicular to the image plane.

For example, if you are shooting a wall, position the camera so that it is in the center both vertically and horizontally, and point the camera directly at the center of the wall. This will not always be possible, but always try to get as close to this position as possible.

Ideally, the sun should always be behind you, but not in such a location that you cast a shadow on what you intend to shoot. It can be convenient to have no shadows at all, but this may not always be possible. It is easier to add shadows in Photoshop than to remove them. While hazy or foggy conditions don't necessarily provide the best lighting or clearest view, they can offer a diffuse lighting that comes from all directions more or less equally, which means fewer shadows.

Zoom in so that your subject uses as much of the image space as possible. Unfortunately, zooming in reduces the amount of light entering the lens, and so the amount of zoom you can use will be limited under poor lighting conditions.

Capture the picture at the highest quality available. Many cameras offer a raw image format, which offers you a great deal of flexibility when working with the image later.

The Game Artist's Workflow

Texture artists often work from source images, as described above, but not always. Most game artists use Photoshop's painting tools as their primary method for creating tiling textures.

Technical limitations will dictate how many textures can be used in a game. The main factor involved is often the amount of texture memory available in your game console or PC.

Since 3D cards for PCs can have different amounts of texture memory (and a range of processor speeds as well), the development team will generally identify a computer system that most game players are likely to have, and plan to make the game run satisfactorily on that system (and with that amount of texture memory).

To prepare you for the realities of making textures for games, bear in mind that a game could easily contain hundreds or even thousands of tiling textures.

When I was making games for the PlayStation, the designers used a compiler to assemble all of the various parts of the environment, models, textures, and so on into the correct formats for the game (this is a very common approach). As part of that process, the compiler code would assemble all of the textures into one large image.

For reference, the game artists could all view that image, which looked like a sort of patchwork of texture maps. Unused texture memory was represented by black space in that image. Looking at that image, we could tell how much space was free, and also which textures were taking up the most space.

The Quake III engine would provide to the designer or artist statistics that indicated the amount of texture memory used. At that time, most 3D accelerator cards had at least 64MB of onboard memory. About 20MB of that memory was usually needed for those bitmap images that were always in memory, such as the HUD (Heads Up Display), player model textures, and other parts of the user interface. So environments needed to use 44MB or less of texture memory.

The image above is from the map CTF-Magma in Unreal Tournament. Click to enlarge. The four tiling textures below are applied to most of the surfaces visible in the screenshot. Can you identify all four of them in the screenshot? How might these textures have been created?

 

 

 

 

 

 

 

 

 

 

 

 

Textures can be organic or architectural (representing man-made surfaces).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Make any adjustments to color or contrast directly to your source image.

 

 

 

 

 

 

Save time by keeping a copy of your full sized, color corrected image. You can return to it over and over.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Preview your adjustments so that you can compare the original with your latest changes.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

When game artists talk about textures in terms of resolution (such as 256x256) they are technically talking about pixel dimensions.

 

 

 

 

 

 

 

 

 

 

Work at twice the resolution you'll use in your game. You'll create more effective, realistic, believable art.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Test the size of your texture against a scale benchmark before you go too far.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Use a grid in a contrasting color and turn it on and off as you work.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Feathering the selections (Select > Modify > Feather) will insure that you leave no hard edges behind as you erase.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Creative use of selections will save you time in Photoshop.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Use "the offset approach" to move the seams to the middle of the image to paint over or otherwise eliminate them.

 


Creating Textures

OK, let's get our hands dirty, shall we? In this part of the lecture I'll show you a simple approach for creating a tiling texture from a source image. We'll simply make it tile: When we place our texture next to a copy of the same texture, we will see no seams. The texture will not necessarily be properly finished, however, until after Lecture Two.

Download the asset pack for this lecture if you haven't already (in the course download area). It contains the file "blackrock.jpg," which you can use to follow along with this lecture. Remember to start with the full-sized version in the course download area, not the smaller version you see below.

We'll first create an organic tiling texture starting from a source image. This image is a digital photo of the floor of Black Rock Desert in Nevada, home of the Burning Man festival.

Before we begin, let's first take a look at the steps we'll take in the process. To create a tiling texture based on the image above, we will:

 
 

1. First, make any needed adjustments to color, contrast, and so on, and save the adjusted image with a new file name.

2. Make sure the grid settings are correct.

3. Select a portion of the image as the starting point for the texture. Be sure to choose one that is fairly uniform, with little extreme detail.

4. Check to be sure the texture is the correct scale for the environment.

5. Using the offset approach:

a. Offset the texture by 256 pixels in each axis to move the edges to the center.

b. Overlay a copy of the original, un-offset texture, and use the Eraser tool to expose the edges of the offset layer. Be sure not to expose the original seams!

c. Tile the texture in Photoshop to see how well it tiles.

d. Rinse and repeat as needed, until the texture shows no seams at all when tiled.

 
 

Let's go to it...

Step 1. Planning Ahead: Adjust the Image

When working from a source image like this, the first thing you'll want to do is think about any adjustments you may want to make to the image. Are you happy with the color? Would it look better with more contrast?

After you make one tiling texture, you may still want to use other parts of the image for further textures in the set. For example, you might want to make subtle variations on the first. It will save you time if you make necessary adjustments before you go any farther, and save a copy of the image so that you can return to it later.

The clay desert floor (below) is very gray in color. Perhaps your environment and set of textures would look better with something that is more red or yellow in color.

In this case, this is the first texture we are creating, and so it is more likely that we may want to make adjustments later, as our texture set develops. This will sometimes be the case—just remember to think ahead and plan as much as possible as you work.

You should always consider the contrast of the image. Increasing contrast can often improve the illusion of depth, making your flat surface have the appearance of not being so flat. Below, the original image is shown with contrast increased by 50 in Image > Adjustments > Brightness/Contrast. Notice that I have Use Legacy checked in the Brightness/Contrast dialog. This gives me much stronger results.

Adjusting Colors in Photoshop CC

Image > Adjustments > Hue/Saturation can be used to adjust the color of the image. Make sure that you check Colorize. As shown below, you can adjust to achieve a brown ground color. As with most of these adjustments, there is a Preview checkbox, and you can check and uncheck it to compare the original with your latest changes.

Now that we have made adjustments to the original image, we should save it so that it is available later. But don't overwrite the original! You may want to go back to that image at some point, and possibly use it for another purpose. Hard drive space is cheap, so save your color corrected image using a new file name.

If you want to really be organized, you should type a short note to yourself about the settings you used, and save them into a file. Why? Well, maybe you shot two or more images when you shot source photos, and maybe you'll want to save some time if you ever need to color correct one of those images.

Step 2. Texture Resolution

Game artists talk about their textures in terms of resolution—they might make textures with a resolution of 256x256, for example. Technically, they are talking about the pixel dimensions. For folks working in other fields, including those who work with printed images, "resolution" refers to the number of dots per inch (dpi) or pixels per inch (ppi). Dpi/ppi isn't an issue that generally concerns the game artist. If you are used to the more accurate terminology, you'll have to grin and bear it as your fellow game artists talk about texture "resolution."

Many games still use a 256x256 resolution as their basic texture size. Some, like Unreal, use textures of up to 1024x1024, but 256x256 is still quite common. Someday this will increase, probably soon.

Note: If you work in a higher resolution than you intend to actually use in the game, you can make textures that you may be able to use again later, in the sequel to your game on a next-generation game engine.

I recommend that you work at twice the resolution that you'll use in your game for another reason: It is usually easier to create effective, realistic, and believable art at a higher resolution. You'll be surprised how amazing and realistic images can look when downsized if the higher resolution version looks good.

We'll assume that we're designing for a game engine that uses 256x256 textures, and create our tiling textures at 512x512.

Step 3. Selecting Your Starting Texture

The grid is an indispensable tool for making tiling textures, and it will be helpful to set up your grid now. If you don't already see a grid on your image in Photoshop, first go to View > Show > Grid. Then you can change the default settings by going to Edit > Preferences (PC) or Photoshop > Preferences (Mac). Choose Guides, Grid, & Slices.

Choose a color for your grid that will show up well against the overall color of your texture. In this case yellow works well. Set "Gridline every:" to 512 pixels, and set Subdivisions to at least 2.

Working with the grid on will allow you to select precisely the right portion of your texture, and also to place your textures precisely within the image window when you move them.

You can easily select a 512x512 portion of the image because your Rectangular Marquee tool will snap to the grid lines if you click near enough to them (if they don't, go to View > Snap To > Grid). The distance between the solid yellow lines is 512 pixels. The subdivisions are represented by dotted yellow lines, and allow you to easily select regions of 256x256 pixels. You can also refer to your Info panel to make sure you have a selection of the desired size.

Step 4. Check the Texture Scale

The image below shows a selection of 512x512 pixels, which is the size you need for your texture. It might occur to you that this would make for some rather large cracks in the ground at this scale. If you thought that, you are really thinking ahead! Good for you!

Unless you already have examples of textures from your game engine to use as reference, you will want to test the size of your textures before you go any further. I'll give you a preview in this case, to save you the trouble of testing this texture for yourself.

As shown in the image below, this detail in this texture is probably too large (a door has been added for reference, since looking at this image doesn't give you the same information as if you had actually entered the game world yourself).

At this point you aren't using any particular engine. In Lecture Two, you will test your textures in Maya. But since in Maya there is no "player" (it is a 3D application, but not a game engine), there is not a specific scale you have to work at.

Therefore, for the purposes of this course, you will only be able to focus on scale in terms of relating one texture to a benchmark—for example, the size of a brick in one texture compared to the size of an image of a doorway in another.

A region of 1024 pixels square will have four times as much detail as 256 pixels square and will be easy to select as well. The image below shows such a region selected.

Press Ctrl-' (Command-' on a Mac) to turn off the grid. Move your selection around and choose the part of the image that has the most uniform pattern. I like the lower left portion of the image.

Press Ctrl-C (Command-C on a Mac) to copy the selected portion of the image into the clipboard. Press Ctrl-N/Command-N to create a new image window of precisely the size of the image stored in the clipboard. Press Ctrl-V/Command-V to paste from the clipboard into the new image. Flatten the image (you currently have two layers, the background and the layer you just pasted in). Resize the image to 512x512, and save it.

A quick test in my game engine shows that this is a much more suitable size for the texture. This can also be tested in a 3D app, which we'll do in the next lecture.

You have your starting texture. You've noticed the seams that are visible in the image above, right? Next, you'll get rid of those seams and make it tile!

Making Your Textures Tile
The "Use What's There" Approach

One way to make a texture tile is to take the part of the original (color corrected) image that lies just to the right of the part you used for your texture, and place it over the left side of your texture. That way you know that the left side of your texture matches the right side.

You'll have a new seam in the middle, and you'll have to use the Eraser tool, and maybe the Clone Stamp tool, to eliminate that seam. And you'll have to take the area immediately above the part you used for your texture, and put that at the bottom, and deal with that seam too.

Let me show you what I mean. Remember how I chose the bottom left portion of the original image as my starting texture (see the selection in the image below)?

I can now easily move the 1024x1024 pixel square selection so that it is immediately to the right of the portion I chose before (see the image below).

So now the left edge of my current selection matches up with the right edge of my starting texture.

You may also remember that I changed the resolution of the portion I chose for my starting texture to half of its original size.

So now I will:

 
 
  • Copy the selection shown above and paste it into a new document.
  • Change the size of the new image to 512x512.
  • Drag the top layer into my starting texture as a new layer. (Note that you may need to "un-tab" your documents in order to drag from one to the other. Drag the file name tab at the top of a document away from the other tabs and it will float independently.)
 
 

The selection shown above is now Layer 1, as you can see below.

I like the right edge of my background layer. Remember, this is the part that matches up with what is now the left edge of Layer 1. Therefore, I'll need to make sure that I erase the right edge of Layer 1 so that the right edge of the Background layer is visible. I'll also repeat this process with the top edge of my texture, so I want the top edge of the Background layer to be visible as well.

Using the Polygonal Lasso tool, I can select parts of the new layer that I can safely erase, including the parts I need to erase and excluding the parts I need to preserve:

Feathering the selection (Select > Modify > Feather) will insure that I leave no hard edges behind as I erase. A feather radius of 1 or 2 pixels is sufficient for this purpose. I'll want to use the Eraser tool at 100% opacity, at least at first, to be sure I completely erase the top and right edges of the new layer. I recommend a round, soft-edged brush to be sure I leave no hard edges behind. The opacity and brush tip settings for the Eraser tool are in the Photoshop options bar at the top of your screen. Set the Hardness of the brush tip to 0% for the softest possible edge.

The new layer doesn't match the pattern of the layer beneath, so it won't be sufficient to erase only the edges. We'll need to erase artistically, looking as we erase for the most natural match between the two layers. You may be surprised at how the cracks will line up as you erase, if you watch what is happening.

Be ready to use undo (Ctrl/Command-Z) if you go too far and want to erase again. Sometimes a slight tweak of the color or contrast may be necessary to make the two layers match better.

The image below shows the erasing I did to my top layer (bottom layer hidden). You should save your work often, so at this point I recommend saving a PSD file, so that the layers are preserved.

At this point, you'll want to check that the texture actually does tile horizontally. You can do this easily in Photoshop by using Image > Canvas Size, and making the image at least twice the resolution in both dimensions (you'll want to check vertical tiling soon enough). Don't forget: "resolution" means pixel dimensions in game art.

I'll later recommend working in a canvas that can contain 3x3 tiles, so I'll go ahead and make my canvas 300% of its current size now (leaving the current image content in the upper left quadrant).

I can merge the two layers (using the Layers panel flyout menu), duplicate the resulting layer, and move it, with the grid on, to place one texture right beside the other. With the grid off, I can see that horizontally at least, the texture tiles seamlessly.

You should be able to imagine how you would repeat the process to make the texture tile vertically by taking the area above the top of the texture (from the original color corrected image), and using it on the bottom of the image. Creative selecting is a very important part of using Photoshop...

Creative Selecting

Thinking creatively when you make selections can save you a lot of time in Photoshop. Here is one example: we know that we want to select the region just above the lower 1024x1024 pixel region of the original (color corrected) image.

We can easily create a 1024x1024 selection using the grid, but placing it precisely where we need it is not as simple. One easy way to approach this problem is to start with the lower left 1024x1024 pixel region selected, and invert the selection (Select > Inverse), as shown below. Then you can simply deselect everything to the right of the desired region. Don't worry that you are left with fewer than 1024 pixels in the vertical axis, you only need the bottom-most pixels to make the texture tile.

OK, so maybe you are clever enough to know how to make that selection on your own. Everyone in this class should have some experience with Photoshop, after all. But I hope that explaining the process was helpful.

So what are the advantages and disadvantages of this approach? Well, it's fairly easy, right? Not the easiest approach perhaps, but certainly not the hardest. But it does become problematic in some situations.

Suppose we had not used the lower left part of the image, but some random part in the middle somewhere. How would you accurately select the neighboring regions later? 

The Offset Approach

I prefer a different method for creating tiling textures. The simplest version of this I like to call "the offset approach." This means simply moving the seams to the middle of the image, rather than the edges of the image, so that you can paint over or otherwise eliminate them.

If we go back to the first 512x512 texture we made, we can use the offset filter (Filter > Other > Offset) to move the edges (and thus the seams) to the middle of the image. Be sure to choose the Wrap Around option so the offset texture will move into the unused space.

First duplicate the background layer, and then hide the new layer and select the background layer again. Then use settings of +256 in each dimension to shift the seams precisely to the middle.

There are now many ways that you could go about dealing with the seams, but perhaps the easiest is to work with the original texture that is now in the top layer.

The main problem with the top layer is that it doesn't tile and you can see this on the four edges of the image. The problem in the lower layer is the seams that run through the middle horizontally and vertically. So, if we carefully (and artistically) erase the edges of the top layer, making sure not to expose the seams on the bottom layer, we can end up with a good tiling texture.

You can use a selection like the one shown below to make sure you don't expose any seams from the bottom layer, but make sure to completely erase the edges of the top layer. You'll probably need to deselect everything to fine tune your erasing.

To get the selection here, you can use your Polygonal Lasso to get straight edges. Hold Shift to create perfectly horizontal, vertical, and 45-degree edges.

Below you can see the erasing I did to my top layer. I did expose the seam area in one spot, but fortunately you can't see it in the resulting texture.

Below you can see the texture tiled 3x3 in a single PSD file in Photoshop.

We can tell from this image that our texture tiles seamlessly. You may see other problems with this texture—but that's OK, we're still in the learning process. We'll learn to deal with other problems in the next lecture.

Save your texture in PSD format, preserving the layers. We'll work on it some more in the next lecture.

     
Learn about technical issues that affect texture development.
Learn what kinds of features are included in texture tiles.
Learn to identify and remove conspicuous or extreme detail that gives away the tiling of your textures.
Learn techniques used for correcting textures.
Learn about the tradeoff between effective tiling and authenticity of textures.
 

Exercise
Research your texture projects and create three seamless organic tiling textures.

Discussion
Share your thoughts and opinions on the process of making a tiling texture.