Photoshop and Unity - How to create a 2D Tileable Texture

In this Unity and Photoshop tutorial, I'll be showing how to create a tileable texture. This will allow you to create seamless graphics to use for your game. (to Join my discord server add a comment and I'll reply with the latest invite code) ► Download Playmaker at https://bit.ly/3dV8JzC ► Downl

A texture that tiles badly announces itself instantly — a grid of visible seams marching across your level. The fix is a Photoshop technique that takes about two minutes and works on any texture you paint by hand. This guide covers painting a rock texture, bringing it into Unity, spotting the seams, and eliminating them with the Offset filter.

Step 1 — Paint the base texture Start in Photoshop with a 256 by 256 canvas. Fill the background layer with a very dark color, then add a layer above it and paint in some rocks with a lighter tone. It doesn't need to be elaborate — a simple set of shapes gives you something real to test the tiling process on. Save it out as a PNG.

Step 2 — Bring it into Unity Import the PNG. It comes in with a Texture Type of Default and a Wrap Mode of Repeat, both of which are what you want for a tiling texture. To preview it, create a 2D sprite square and scale it to whatever size you need. Create a new material named Rocks and drop the texture into its Base Map slot, then assign that material to the sprite.

Step 3 — Set the tiling The texture will look stretched at first. Scroll down to the shader's tiling settings and increase the X and Y tiling values until the rocks are at the density you want. This is also the point where you'll notice the texture is far too dark to evaluate — go back to Photoshop, lock the layer's alpha, and fill the rocks with a lighter color, then save over the original PNG. Unity reimports automatically and the rocks become legible.

Step 4 — Identify the seams With tiling cranked up, the problem is obvious: hard edges run along every boundary where one copy of the sprite meets the next. Nothing in the artwork crosses those edges, so the repeat pattern becomes a visible grid.

Step 5 — Offset one axis at a time Back in Photoshop, go to Filter, Other, Offset. Since the canvas is 256 by 256, offset by half that distance — 128. Do the vertical axis first, entering +128 and leaving the horizontal at zero. This wraps the image around itself and brings what were the top and bottom edges into the middle of the canvas, where you can actually see and work on them. Working one axis at a time is deliberate: it leaves you with a single seam line to focus on instead of a cross.

Step 6 — Paint out the seam With the seam now sitting in the center of the canvas, paint over it so the rocks flow continuously across the line. Once it looks right, run the Offset filter again with the same values to shift the image back — the previously broken edge now tiles cleanly.

Step 7 — Repeat on the horizontal axis Run Offset again, this time putting 128 in the horizontal field instead of the vertical. The remaining seam appears as a line running through the sprite. Repair it the same way with the brush, then offset once more to verify the result reads as continuous.

Step 8 — Save and check Save over the original PNG. Unity recompiles the asset automatically and the sprite in your scene updates. The grid of seams is gone and the texture repeats without any visible boundary.

The technique generalizes: any resolution works as long as you offset by half the dimension, and it applies equally to hand-painted textures, photo-sourced material, and generated patterns.