Resources and Support
 Pixel Joint Forum : The Lounge : Resources and Support
Message Icon Topic: Tile-Art Tutorial(Topic Closed Topic Closed) Post Reply Post New Topic
Author Message
Squirrelsquid
Commander
Commander
Avatar

Joined: 31 July 2015
Online Status: Offline
Posts: 257
bullet Topic: Tile-Art Tutorial
    Posted: 25 August 2005 at 4:34pm

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

IP IP Logged
Wannahlakujuu
Commander
Commander
Avatar

Joined: 02 April 2005
Online Status: Offline
Posts: 205
bullet Posted: 25 August 2005 at 4:48pm
Great tutorial, although I don't have the time to fully read it, but I did browse it, and I liked it.
IP IP Logged
flaber
Commander
Commander
Avatar

Joined: 03 March 2005
Online Status: Offline
Posts: 130
bullet Posted: 25 August 2005 at 6:11pm
very well written. I just read the whole thing and you left no questoins to me.
Congrats on your first tutorial. Im sure it wil help those seeking advice like this.
IP IP Logged
Citizen_Insane
Commander
Commander
Avatar

Joined: 30 March 2005
Online Status: Offline
Posts: 189
bullet Posted: 25 August 2005 at 10:56pm

looks good :)

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

tutorial try outs, or something.

IP IP Logged
Saboteur
Commander
Commander
Avatar

Joined: 29 January 2018
Online Status: Offline
Posts: 888
bullet Posted: 25 August 2005 at 11:37pm
Contact Pixelblink, he seems to manage the tutorials thread. There IS one, it's a sticky at the top of this forum.
"I was minding my own business and walking across a pebbled path, and a Duck started giving me the business."
IP IP Logged
pixelblink
Commander
Commander
Avatar

Joined: 23 May 2017
Online Status: Offline
Posts: 2865
bullet Posted: 26 August 2005 at 12:00am
There is indeed a tutorials thread itself... mainly for links to those. I'll add a link to this one in there. You should also contact Sedge to put this on the main site. Nicely done I must say :)
IP IP Logged
Citizen_Insane
Commander
Commander
Avatar

Joined: 30 March 2005
Online Status: Offline
Posts: 189
bullet Posted: 26 August 2005 at 12:42am

oops.. guess it was a pretty good idea then

once again, good job there on this tutorial.

IP IP Logged
Blueberry_pie
Rear Admiral
Rear Admiral
Avatar

Joined: 24 July 2015
Online Status: Offline
Posts: 2176
bullet Posted: 26 August 2005 at 1:33am
Wow, didn't read everything but the result looks fantastic. Nice job 
IP IP Logged
Saboteur
Commander
Commander
Avatar

Joined: 29 January 2018
Online Status: Offline
Posts: 888
bullet Posted: 26 August 2005 at 1:46am
Oh, the only thing I'd suggest is patches of grass in the dirt. I'd think there'd be some median between full-out grass and full-out-absence-thereof.
"I was minding my own business and walking across a pebbled path, and a Duck started giving me the business."
IP IP Logged
Squirrelsquid
Commander
Commander
Avatar

Joined: 31 July 2015
Online Status: Offline
Posts: 257
bullet Posted: 26 August 2005 at 3:05am
thanks for the feedback guys :)
I contacted sedge about posting this tutorial before I posted it, and I also submitted news for the front page about it. I also noticed the Tutorial Link thread but didn't post it in there because, well it was meant for links, heh.

@Saboteur:
You'r right I could/should have added some of these tiles... but then again, this tutorial took long enough to write ;)

I might do a 2. course expanding the techniques I described in this tutorial, and such tiles would sure be added then. (as well as elevation in the terrain/cliffs, adding "weird" Material-Tiles, adding structures like houses or Pillars and, of course, more tricks on how to reuse colors.)
IP IP Logged
Kirra
Midshipman
Midshipman


Joined: 12 June 2005
Online Status: Offline
Posts: 41
bullet Posted: 27 August 2005 at 5:39pm
wow that tutorial was great. Really nicely explained too. Thanks. 
IP IP Logged
ehtd
Seaman
Seaman
Avatar

Joined: 24 March 2017
Online Status: Offline
Posts: 7
bullet Posted: 15 October 2011 at 11:16am
The images are not available
IP IP Logged
jeremy
Rear Admiral
Rear Admiral
Avatar

Joined: 14 January 2019
Location: New Zealand
Online Status: Offline
Posts: 1675
bullet Posted: 15 October 2011 at 3:22pm
That's because the thread's from 2005.
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum