How to Create Tileable Texture Maps (Photoshop and Sampler)

Why do we need to create tileable texture maps?

As we all know, textures are important to 3D game engines to ensure that material characteristics, like “brick wall” or “metal sheet” or “character’s skin”, look and feel right in the experience. In many cases, these textures may need to repeat to give the illusion that an entire object is textured, even if it’s referencing a smaller single image that is just repeated across the object’s surface.

Sometimes, a repeating texture that isn’t properly authored to seamlessly tile will have obvious, visible seams and repetitions. This lack of “tiling” makes a bad looking visual interruption every time the texture repeats across 3d surface. This article shows how to correctly author textures using Photoshop and Substance Sampler so they tile believably using some simple methods.

image

Let’s make a Tileable Texture using Photoshop

First up, open Photoshop. First thing we want to do is to create a new canvas. To do so, go to File → New and create a new document with 1024x1024 pixels. See the image below for a visual reference.

image

Once we have the new document created, we will have an empty white canvas. A Layer, that has no other information on it. Just like a new white blank paper sheet.

image

To save some time, we want to use a new feature from Photoshop called Generative Fill. Before we can use that feature, we need to select the entire blank document.

We can do that by using the Shortcut CTRL+A (Windows users) or by going to the Tab → Select → All as seen in the screenshot above.

Once we are at this point, we can now use the new Generative Fill Feature. It allows you to enter any text prompt you like, and describe an image you would like to create.

image
Enter the prompt to create the image you like and press the ‘Generate’ button

In our example, I created a Brick Texture. My prompt for this image was “cool stylized brick texture, tileable”.

Keep in mind, that every time you run a new prompt, you will get a completely new result.

The generated result is a stylized, cartoony, brick texture. Despite requesting in the prompt to make this texture seamless, the generative ai still falls short of being truly tileable.

How To Check if a Texture is Seamless

At first glance, it might appear as though the texture is tiling on both axes properly, but how can we confirm within Photoshop that the image is tiling on both X and Y axes (both up/down and left/right)?

This is easy by using the Offset Filter.

image

Let’s use the Offset Filter to check if our texture is tileable or not:

Go to → Filter → Other → Offset

Once you click the Offset Button, the Offset Property Window pops up. Here, we can enter any horizontal or vertical offset value we like. In our case, I just use +512 for both directions. As you can see in the screenshot below, we now moved 512 pixels to the right and the bottom. Now we can check if the edges of our texture map are seamless.

image
This texture map is not tileable

As we can see, they are not. We can see the seams, which means the overlapping edges on the end of each side do not match with the continuing other side of the edge. The edges on one side don’t smoothly connect with the edges on the other side. Bummer, right?

How to fix the Seams

There are several ways to fix seams. You can manually fix them by using any brush and manually paint over to remove the seams. With some patience and the right tools, you’ll be able to do that - but it can be very time consuming and results may vary.

There is even a better and faster way to do that using the Generative Fill tool again. With that, all we have to do is to select the area of the seams, and then use the Generative Fill tool on top of it.

So let’s try that. First, choose the Rectangular Marquee Tool from the Tool Bar on the left. And then, let’s create a selection that covers the seams. You can see my selection in the screenshot below.

image
Use the Rectangular Marquee Tool to select the areas of your seams

Once you have this done, we use again the magic Generative Fill Tool. This time, just leave the prompt field empty, don’t enter anything and click the Generate Button. Photoshop will create again three different options for you.

image
I liked the first version the best, as shown above

I liked the first variation the best and chose to go with that one. Our Texture Maps is 100% Tileable and all the seams are gone.

Now, let’s check again to confirm with certainty that the texture is tiling properly. Saved your .psd file and then export the texture. You can save it as a .png or .jpg image or any other format you want.

Then, let’s open the exported texture map again inside Photoshop. Now we can again use the Offset Filter and change the numbers as we like. No matter how many pixels you will offset your image, you should not see any seams anymore.

image
All the seams are gone

Some Advanced Tips

There are a few more things you can apply to fine-tune your texture. The first one I like to use is to check the Brick’s Form. After we applied the offset, we can also see that some Bricks are pretty long. And some bricks do also have some harsh border cuts.

This is super easy to fix. And again, we can use the powerful Generative Fill Tool. Below you can find a screenshot in which I highlighted the areas I would like to fix.

image
Finetuning Form and Shape

So this is totally up to your personal taste and creative wishes. Go ahead and make some selections over these areas and use again the Generative Fill Tool. Important: Make sure you do not make any changes directly on the edges. Otherwise, you will reintroduce seams again because the edges will not match.

image
The final result of our created Brick Texture using Photoshop

After some tweaks, I was pretty pleased with how quickly this came together. But, there was still one key enhancement I had in mind. Even if the texture map seems flawless in tiling, you might spot some repetition when it’s applied to larger areas. This tends to occur due to variations in brightness values. A significant contrast between dark and bright values can create a noticeable repeating pattern effect, so we may need to fine tune this texture map.

Finetuning a Tileable Texture Map with Substance Sampler

To tackle this issue, Substance Sampler offers a magical solution called Equalizing. This process works like a charm to balance out those pesky brightness variations, ensuring a smoother and more seamless result. It’s like waving a wand to eliminate any traces of repetitive patterns, leaving your textures looking flawlessly natural and immersive.

Moreover, in addition to the Equalizing feature, Substance Sampler has even more utility: the ability to automatically generate a set of PBR (Physically Based Rendering) Textures.

Furthermore, Substance Sampler works its magic by generating a base color map that smooths out any stark contrasts between bright and dark areas. This ensures that the tileable color pattern remains seamless and inconspicuous, guaranteeing a visually pleasing result without any noticeable repetition

Note:

After importing my Brick Texture into Substance Sampler. I used Plaster for the Shader Model. See the screenshot below for all the Parameter settings.

image
Category Plaster

Substance Sampler and the Power of the Equalizer Layer

As promised, there is this star tool inside Substance Sampler. The Equalizer Layer.

As mentioned earlier, think of the Substance Sampler Equalizer Layer as your texture’s best friend that evens out any brightness differences, smoothing things over for a seamless look. With this tool, your textures will look flawless, with less noticeable repeats or awkward contrasts.

You can add the Equalizer Filter by clicking the Add Layer Icon in the Layers Tab. See the screenshot below. Once done, change the Radius of the Basic Parameter Settings to your liking.

image
Adding the Equalizer Layer

image
Base Color - notice how nicely the equalizing effect smoothed out the contrast values

image
Normal Map

image
Roughness Map

image
Our Final Tileable Stylized Brick Material including the PBR Texture Map Set

Mastering Tileable Textures from Photoshop to Substance Sampler

In summary, we explored Photoshop and Substance Sampler tools and utilities for tiling. We learned to create seamless textures in Photoshop and fine tuned those images in the Sampler tool - then generated a set of PBR textures from our initial image.

Let me know how these techniques work for you and if you have any questions!

Resources for Download:

Download .zip File that contains the following assets listed below:

  • Photoshop File
  • Substance Sampler File
  • PBR Texture Set
  • Roblox Place
51 Likes

Thank you, I sincerely appreciate all the recent tutorials and effect you put in!

18 Likes

These tutorials are really cool, can we also see a tutorial like this for other apps though?

Photoshop and Substance Sampler are both software that aren’t free and either require an subscription or an up-front payment of like 100 USD which is quite pricey.

I mostly use free software.

For anyone looking for free software that can make tileable materials, I recommend Materialize by Bounding Box Software and AwesomeBump on Github.

I personally use Materialize as I find it very easy and convenient to use, AwesomeBump might be a bit advanced and confusing to use but they’re both great apps, they’re open-source and free alternatives to Substance.

I hope that helps out the people who either can’t afford or don’t want to use Adobe products.

Edit about Adobe policies.

Someone replied to me about this and I completely forgot about it.
Adobe recently changed policies that you’re forced to agree to if you want to use their software.

Agreeing to those policies gives them the rights to use your art and work in any way, shape or form they want, even monetizing your work for their own gain.

You might want to avoid Adobe if those are things you don’t want.

25 Likes

Let me include the recent controversy that occured within Adobe regarding waiving your artwork rights to Adobe for their AI buzzword stuff.

I’m also looking forward for tutorials that use FREE software that everyone can use.

18 Likes

This is a great point. I’m just now* learning to use GIMP and Material Maker. Once I feel I have sufficient expertise in these toolsets I’ll write some articles to highlight them!

13 Likes

How you managed to make it load images? No matter what every image i try to import into it is not loaded at all. Nothing help - reinstalls, path changes, downloads of C++ redistributables, NOTHING?.. All images are shown as blank files.

2 Likes

A bit off topic but this is a bug with the software, it works on my PC but it doesn’t always function properly on different systems.

I recently did learn that file names need to have all-English characters and it cannot open image files if it’s for instance, a .jpg file that was renamed to “.png”.
Also, it depends on DotNET I think? Which is like a C# runtime (the app was made in the Unity game engine and uses C# as the programming language).

Materialize hasn’t been maintained in a while unfortunately, I hope the developer returns some time to patch the bugs.
The app either works or doesn’t work, most of the time it does fortunately.

Meanwhile, you can also try AwesomeBump instead which can essentially do the same things, it just works a bit differently but haven’t experienced any breaking/unusable bugs with it yet so I consider it more reliable.

There’s also other free alternatives but haven’t looked deep into them yet.
Finding free software that can make tileable material textures just isn’t that easy sadly, these two where the best finds I had so far and I use them myself.

5 Likes

Hello,

How is your GIMP learning going and will you be posting a new article using free software?

Thanks!