Tile Tutorial by Radnen
From Spheriki
So you want to know how to make some pretty impressive tiles, but don't know where to begin? This tutorial is designed to follow you through on creating a basic floor-tile. It'll show you steps that both make it easy to draw and awesome to look at.
Contents |
Creating a tile
To start off with, I'm going to use the wood floor tile from my game Tyberia. It's a 32x32 sized tile, but following this tutorial will prep you for any tile size.
Outlining a tile
First you'll need to outline the tile, lay down some lines that dictate how it should look. For a floor tile, I want to see panels. So I make 4 horizontal lines:
But, then when tiled there will be horizontal lines going all across the screen. What to do then? Well, we break up the space. To break up the space we put in vertical lines into the tile.
Great, now we finished outlining the tile.
Coloring a tile
Outlining it was the easy part, the hardest part is coloring. But it's a lot harder than it looks. You would need to choose colors that are close in proximity with the midtone. You'll need at least 3 colors: a midtone, shade and highlight. We will focus with the top most panel:
We will fill in the outlines with a dark color - also close in hue to the darkest shade. Then lay down the midtone.
After that we fill in the shade:
Then the highlights:
Look at how the shading was done. It gives off the impression that the panels are made of wood and you can follow it's grain. Great. We've got the top part done, but what about the rest?
For the rest we just copy and paste that top part and slide it back and fourth to create some variation:
Depending on how you color it in, and what outlines you use, you can turn this tile into a brick wall:
Notice the use of dithering on the tile. Dithering is like crass-hatching, it's a shading method in which you alternate the order of the pixels to create a more rougher appearance. It can even be used to blend two colors together depending on the contrast.
Finalizing the tile
To know the tile really works, you would need to see it in a field. This is the only way you can tell it repeats just fine.
Notice that the brick tile looks like it has slanting pieces, but it's only an optical illusion. This is actually a bad illusion. So the tiling needs to be fixed. The vertical lines in this case shouldn't be within 1px away from the other vertical line. They should be more like 2-3px away to create a nice tiling effect.
And there you have it. A very decent and complete floor tile. This should always add a kick to whatever room you are designing in your video game.
