Tileset Tutorial in English

Please use this banner if you want link to this tutorial, thanks!

This is my first tutorial, and my first article in english, too. Let me know if somewhat needs an adjustment.

I don’t want to write about the creational process of these rocks. That would be a tut about painting, but i want to talk about seamless tiles. To create tiles without visible seam is quite an art.

Above all it has nothing to do with the graphical skills of a person, but with planning. As our example serves a block of nine rock tiles. We will encounter almost all difficulties of tiling with it.

9er-Block farbig

Look at the colored bars on the picture. You can see which borders of a tile have to be equal with borders of other tiles.

You can avoid many mistakes, as well as much unnecessary work and corrections, when you are always aware of these border connections. Be aware of it before you start painting, as well as during all the process of creation till its end.

It is (relative) simple with the eight outer tiles. They have only two sides each. But this contains a nifty little fact: they have also corners.

4 Ecken

As you can see at this picture, all tiles and all colors meet each other at the four corners of the center tile. You need to be cautious what color, hue and brightness you use at this place. The most critical thing of the corners is the fact, that the sunny, bright side meets here with the dark and shady side. You may say (as i said when i started this tileset): no, they don’t meet, there is the center tile between them. but at this point i totally had forgotten the overall reason of tilesets. you can combine these nine tiles to get four different shaped rocks. and of course in some of these rocks the bright tile will meet the dark tile.

This is what i mean when i say: „You need to be mindful all the time when working your tileset!“ I wasn’t, and so i had finished the tiles by maybe 80%, when i noticed the tiles wouldn’t work together. So i had to work over the entire piece.

Tileset SkizzeBut let’s start at the beginning.

Like i said, a tileset needs a plan. First of all there should be a scribble. At least if it’s going to be your first tileset. Don’t underestimate the power of a piece of paper. You can (maybe should) draw as much combinations of your tiles, so you get an overview of the connections.

Never ever start with the center tile. It is impossible to fine-tune its four sides with the outer tiles. I always start with the upper left tile, but only because i like that. You can start at any of the four corners.

Tileset Tut 1

You can finish the corner tile without furter ado and almost finish the three tiles around it. But before you paint the borders of the three tiles around, start thinking. Look at the picture. In order to match later properly, the border of the corner tile must be copied to the border of the flanking tiles.

I always copy a strip of border pixels, only a few pixels wide or high. As you start, you will feel save with a very wide stripe. Then you paint over that stripe to make it match with the rest of your new tile, but remember not to paint over the boundaries of that tile! Every big change at it will destroy the seam.

Use a grid if possible. With Photoshop, you can show/hide the grid here: „View > Show > Grid“. The size of it you can change at „Edit > Preferences > Guides, Grid & Slices“. When copying, turn on „Snap“, that’s also under „View“. When painting, turn it off.

Don’t make the copied region too big. Your tiles may be seamless afterwards, but everyone will see the tiling anyhow. Copy a strip which is only one pixel wide and paint the rest new. This will be the best for the quality of your tileset. Every copied, but not changed region will look awkward later in your game.

If the first three tiles are finished, proceed in copying borders. Look at the arrows.

Tileset Tut 2Tileset Tut 3Tileset Tut 4

The graphics i used for this tut show an already finished tileset. But if you start painting your own, you will start from ground up. You will need to paint over borders all the time, and that’s okay. But every changed border must be updated in other tiles. And this can be very dangerous. Always be aware of the tile connections! If you don’t work mindful enough, you will forget to update borders, what will cause a not-seamless tileset. This will annoy you very much, because it is always much work and refining it later is a pain in the ass. But likewise you could easily make another big mistake. Updating borders of tiles which aren’t meant to connect. Be attentive.

Et Voilà: the final rock block!

9er-Block final

In closing some tips for Photoshop: You don’t need to zoom in and out all the time if you work at little graphics. Just open a new window for your picture: „Window > Arrange > New window for …“

This is very helpful, since you can view your picture at one window at original size, and at the other window you can work at 800% zoom! You can also have one pic with grid and the other without.

So, i hope you like this tutorial and find it useful. Let me know about things to improve by comments!


6 Antworten to “Tileset Tutorial in English”

  1. mruk Says:

    Nice tutorial. Texture is also very well drawn.

  2. Markolainen Says:

    Nice tutorial!
    Your tileset looks awesome!:)

  3. robotriot Says:

    Nice in-depth tutorial! However, it’s not „impossible“ to start with the center tile. I always do that because I believe it’s the most important tile of the whole set since it gets repeated so often. To make the center tile seamless, I always use the offset-filter in the Photoshop. If you’ve got a proper center tile, the rest of the process is identical to what you described.

  4. Hailstone Says:

    Very great written Post, im learning english at this time and i come back very often to your blog, very helpfull the most time.
    regards from the uk

  5. Stesch Says:

    Very nice tutorial. I’m just at the beginning of understanding game programing and this here is just what I needed right now.

  6. One Man Band Games Says:

    Good thing I read this before I started to make my first own tileset….I hope I will be able to avoid the quirks and dangers you have mentioned in your article. Thank you for writing this!

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:


Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )


Verbinde mit %s

%d Bloggern gefällt das: