Twitter Update:

Sunday, January 29, 2012

Tiling Floors

For the most part, floor tiles can come in all shapes and appearances but today I'm going to explain to you a simple square-tile setup.  In the end, you will have some tiles that can look like this.
 If you'll notice, the square tiles that the character is standing on gives the illusion of each one being slightly different as most architectural stone would be, even if it was cut the same dimensions as each other stone.  The process of this is done with only one tile.  That one tile creates an optical illusion that gives the user the feeling that they are in a more non-perfect environment just like real life.  Anyway, enough yapping.  We'll get down to business with the process.
  1. We start with the tile's base color.  From here we can create our palette by going darker or lighter depending on the section we are working on.  For this, I didn't mess with creating the palette because it was going to be a collection of greys since it was going to be a concrete brick pattern.
  2. We will grab a much darker grey to form our outline of our squares.  At this point, since I didn't make the palette, I just chose any dark grey and figured I could grab a darker or lighter color depending on how it looked in the end.  Since the tile is 32x32 and I wanted to have four bricks, I made four 16x16 squares.
  3. Here we create the pop of the tile by adding a barely lighter shade on two of the 4 sides of each square.  This shade would be one of my mid-tones to transition from the dark grey to the light grey as well.
  4. Here I decided to begin with the transition.  In order to make this seem to be 4 separate bricks, I felt it necessary to get a darker grey than the dark color I already had in there and place it at one of the pixels at the bottom to give it the visual that that is just where two bricks touch.  I also added it in a couple other spots within this and the next step to give a sort of rounded feel to the edge of the brick.
  5. Here we get a much lighter grey than our base color and begin adding the highlight to the top of the brick since that is the general direction our light will be shining on this tile.  I also began creating the affect of the bricks not being an exactly even shape by taking my mid-tone and creating an oval shape for the base color.
  6. Here, I started to do some dots in diagonal shape around the center coming from the edge of the  midtone section.  This gives it a blending effect without having to increase your color count by much (and in my opinion also keeps true to the style that spriters are known for and is what people expect when you do this otherwise you might as well just use photoshop to cause a much more perfect blend with an airbrush!)   I also began working on the edges of each 16x16 square by giving them a more rough and round-er appearance as if they have been stepped on or heavy objects dropped on them etc.  I used the highlight color a little bit more and even removed some of the highlight as you can see for yourself.
  7. And here is your final product.  In this one, I just pretty much repeated step 6 with the center by adding a small circle of the highlight color then adding some pixels of the base color around the edge to blend it in some.
If you do this just right, giving each one of the squares a slightly different appearance than the other, you will end up with a nice pattern that will tile well and not appear to repeat much.  However, you still need to be careful with how much difference you give each square because if they all look too different from each other then you will see a smaller pattern which will provide another problem because then the tiles will appear to repeat too much and that will just look ugly.  With enough trial and error, you can will be able to get it, though.  Now get to drawing!

No comments:

Post a Comment