For many people Tiles seem to be a book with seven seals.
With this course I’ll cover most principles of tiling in an RPG view,
As well as tips on how to cleverly reuse shades in different tiles. Also,
It should give you a good idea on how to shade tiles in general.

This course is supposed for the intermediate Pixel artist.

Before you start:

Before you start, you should decide on which tile-size to use. Usually, Tiles
range from 8x8 over 16x16 to 32x32 pixels in size, but virtually you could use
any size. Just keep your platform or tool in mind. It’s often best to stick to
the standards though.

When you have decided on the tile size, you should open up your favourite pixel
Program and create a new file in an approximate tile-set size, so if you have 8x8 tiles

A size of 256x256 would probably work best. But you can also just multiply your
Tile-size, in this case, 8 with the desired tile count (+ the same for the other axis).

When you have created your new file, and your program supports a grid,
you should modify the grid-settings to match your tile-size. If your program doesn’t have a grid, you should create a check-board pattern with rather neutral colours.

You can also use the one provided here:

If you have pallet restrictions, you should also consider using a pallet.

Many graphic programs allow palletizing inside the program, but personally
I prefer to use an easy to use pallet in its own file, or layer. This will provide
A great way to fiddle with the colours.

I personally always use these palettes,
Which are your standard 16 colour pallets (15 + transparency). the top left being
The transparent shade.

now, we should be ready to start one of these lush RPG tile-sets!

The basic ground/dirt tiles:

I’m going to use an 8x8 tile size, but working on bigger “tile-chunks” is
Often useful, since one tile alone looks pretty repetitive.
I’m going to work with a 2x2 Chunk.

First, you’ll have to decide your basic colour. Depending on the look you want,
You can use more yellowish and grey colours for “dead Earth”
Or red brown/ Greys for a desert. I’ll stick to your every day’s brown for this tutorial.

Once you have decided your basic brown, add some scarce shadows here and there.

Again depending on the shading you will get a different look.
I choose to have a rather muddy ground, so I used some rather curved lines.
Be careful to have several “connection-pixels” on the depending sides,
If you have structures that leave to the borders of the chunk.  

After you are satisfied with your basic structure, you can add a highlight-shade.

Keep in mind:

If you place a light shaded pixel closely to a dark pixel you always
Get a more apparent edge and vice versa. This is very useful, if you want to
Loosen an edge at its ends.

Add some scarce shadows here and there within the dark areas; with a new shade… and the dirt tile-chunk is done!

You should now have 4 shades + transparency.

Be sure to save your tile-chunk on a new layer or as a new file now, so you’ll have it ready for your final tileset.

Now you can copy your chunk and start fiddling with the placement of the tiles, as shown in the picture.

 If your engine supports Tile-flipping, or you can spare some extratiles you can flip tiles inside the chunks too as well as the whole chunks.

The Basic Grass tile:

For the basic grass tiles I used 4 Shades as well. When shading grass, always make it kind of curved in shape. The ideal form would be a very slight “S” curve.
For the actual shading of the grass tiles, you should first fill the tile, with your basic green, and add small strands of grass here and there, with a lighter green.
Now choose your darkest green. Be careful not to get too dark with this shade, as you’ll only want to use it here and there in the dark areas of your grass-patch.
After that select a green/slightly yellow highlight colour, to make some strands pop out. Be Careful not to overdo it with the highlights on the strands though.
  

Adding the connection-tiles:

 When you are finished with your 2 basic tile-types you should arange them in chunks the way I illustrated below.

You’ll probably notice that each material pops out in the other, piercing your eyes with it’s square unnatural shape;

Don’worry though we’ll correct that now!

  
Add a shadow rim of your darkest brown on the outer edge of the mud tiles. Now choose a pretty dark brown colour. Give it a slight blue or purple tint, to add some more atmosphere and depth to the tiles.

Make sure the top shadow-line “seems” to be the most defined shadow.
you should have 9 colours by now.

 

Now add the grass tips that the surrounding grass tiles suggest.

feel free to add some bigger leaves on the connection tiles here and there, too.

 
Now is the time to copy and paste your border connection-tiles in the respective positions.

I used flipping to add more variation to the left and right borders.

depending on how far your grass strands pop out, you might need some some additional corner tiles.

Notice that I didn’t need to add any additional corners, because my grass-strands on the connection tiles don’t leave the grass-tiles very far.

Still no grass-patch is that square in your average RPG-world. That’s why we will add some random looking connection-tiles as well.

Just follow the same process as described above, and “think rough”! Keep in mind though, that your connection tile-chunks should “connect”, with your Materials and basic connection-tiles.

(for example, a 3x2 tile chunk, not a 2.5x2 chunk.)

Be sure to save all your tiles either on a new layer inside your file (Copy layer) or save all tiles in a new file,

Since we’ll be moving them around now quite a bit!

The Mockup and the Eyecatchers:

Now it’s time to build a mockup with your ground tiles, be sure to try out all sorts of weird tile combinations with your tiles in the mockup.

This will help you to get the most out of your tiles, and will give you good direct feedback of what tiles might add to the tile-set.

The animated .gif illustrates how I constructed mine.

in this mockup you can now easily add and try out variouse eye-catchers like flowers, rocks or treestumps.

We’ll make a quick jump here, don’t worry though, I’ll describe all added objects in detail later.

Notice, that I only added one new colour to the palette, that being a bright greenish/yellow, that I used in all added elements. (Plant, Flowers, Cracks, Stones)

And given that colour-count is pretty much everything, that sure is a good thing.

Flowers:

The flowers mainly work because of the high yellow-portion in the in the new shade. Because the lightest brown and the new shade aren’t to far apart opticaly,
They go together well too.

Plant:

The plant is easily done as well; First shade it with your average 4 greens, then add some more highlights with the bright shade. Last, add some small shadow-spots in equivalent positions (meaning under the leaves) to bring in some additional contrast

Rocks:

Because of the high yellow value, the bright green can also be used as highlight for the rather orange bright brown, if used scarce.

Be sure to add some leaves of grass pointing over the sides of the rock, if it is on a grassy surface.

Also keep in mind, that the more contrast there is in a Background-tile, the more it will seem “concrete” for the player.

Cracks:

The crack basicly started out as a dark brown line, that got a tad more highlight at the edges of the crack. Again, the green was used for highlight-spots here and there.


Here’s the complete tileset.

Feel free to edit and experiment with them as much as you like.

I hope you enjoyed this tutorial (being the first I ever did),
and learned a bit from it...
Maybe someone will even find and use the “5 lost shades” ;)

-Squirrel

looks good :)

there should be a forum strickly for tutorials, and another one for like..

tutorial try outs, or something.

oops.. guess it was a pretty good idea then

once again, good job there on this tutorial.