One Way to Pixel a Rock Wall Tile Texture

1. 

   First, we choose a pixel on the edge of the tile (it's 32x32 by the way, but this will work for most any size) somewhere near the corner and color it a highly visible color, like pure red. Now we find the matching pixel on the opposite edge (the other red dot). I drew a blue line between them just to show what we're going for here is two pixels exactly opposite one another (on the same x column).

2. 

   Now, we'll do the same thing with two pixels opposite one another on the vertical edges (still in and around the corner.

3. 

   Once we've got two pixels around each of the four corners, we'll repeat this until we've got several pairs of pixels on opposite edges from one another. In this case, I did three or four per edge. You can increase this number of pairs if you want smaller/more stones per tile.

4. 

   At this point we'll choose a color palette for the stones. The one here is a pretty simple ramp (or series of colors going from dark to light) of blue greys. You can use whatever hues (like blues, greens, pure greys, reds, etc.) you want and as many shades as you want. For our purposes here, we'll only use 4 colors/shades.

5. 

   Go ahead and fill the entire tile with medium shade. In this case the top right displayed in step 4. Don't get rid of those pixels on the edge, tho!

6. 

   So this is the reasone we put down those red pixels: we're going to connect each pixel with it's neighbor using the darkest color. This is the outline of all the edges of the stones in our tile (or the mortar in between them alternately). By connecting the outlines percisely with the red pixels we're more than halfway to making this tile seamless.

7. 

   Go ahead and connect all those red edge pixels to the ones next to them. It's okay to write over them with that darkest color. Now, so you can see what I was talking about in step 6 about how these connections would help us make this tile seamless, take a look at this smaller pic of the current tile: . Those connections or loops we made from red pixel to red pixel have become halves (or quarters) of the rocks. For instance, when this tile (we'll call it tile 1) is set to the left of a copy of this tile (tile 2), the red section of tile 1 becomes the right side of the yellow section in tile 2 . Likewise, the dark green section of tile 1 would become the top of the blue section of tile 2 and the four magenta loops in the corners become a single shape in the center of four tiles when put together. These loops have helped us make it more than half way to creating a seamless tile (at least around the edges). You don't hafta put four together like that to check it at this point, but if you wanna, go right ahead.

8. 

   Now we'll fill that open center section with some rock like shapes. It's a good idea to try and make rocks about the same size as the others you've made (well, you've only made halves of rocks so far, but you can use your eyes to guestimate the size when placed together). It's okay if they're not exactly the same. In fact, it's better if they're not. We're going for rocks and rocks are varied in size and form, so simply play around with it and fill up that space. Also, it's okay if your mortar lines aren't 'clean' (one pixel wide) as, I think, that actually adds to the visual interest. Basically, we're drawing a rough stone wall here so it's okay if it looks rough.

9. 

   Time to start a little antialiasing. Grab the color between the mortar line color and the medium color you used to fill the tile in step 5. In this example, it would be the lower left color in step 4.

   If you've got more than four colors in the ramp you do, go for one about midway between your mortar line color and that base color. You can use all the others left over in that section of your color ramp to more fully antialias and give the rock more detail in the steps that follow.

   Ok, you've got that color, right. Stop and choose a light source. This means you're deciding where the light in your picture is coming from and, thereby, how and where it will hit the rocks in the wall. I usually choose the top right and this tile will be no exception. So the light will be coming from the top right of the tile, we're going to use our color to anti-alias all around the edge of the rock, but a little more heavily on the bottom left, where the shadows from our light source would fall on a fairly rounded rock. So, if you look at the enlarged pic, you'll see a bit heavier anti-aliasing on the lower and left sides than on the top and right. Our choice of light source will also help us out in step 10. (remember to try and keep a consistent light across all your sprites and tiles)

10. 

    So here, we'll start putting some shading on our rock. Since we've decided 1) that our light source is from both above and right of our rocks, and 2) that our rocks are somewhat round (as opposed to being chiseled square or flat by a mason), we'll shade them heavily, mainly on the lower and left sides. Use your eyes here and a non-zoomed view of your tile (zoom out to look and back in to work) to make sure you're getting the shapes you want. Don't make it too uniform either (since these are rocks); make it a little messy and random. I tried dithering first (which works pretty well on rough surfaces like rock)....

11. 

    ...but decided to go with a more blobby, solid shade instead. It's up to you. Experiment and see what you like.

12. 

    We'll continue to all the rocks and shade them. Remember that the rocks on the edges are parts of other rocks and shade them appropriately.

13. 

    Ok, we've shaded all the rocks. Now, we'll move into our lightest color in the ramp and just dot in some highlights. Try to keep these lighter pixels inside the base colored areas of your rocks, as, if they end up touching a darker shade pixel, you get a really high-contrast / possibly jagged looking area. Try it and you'll see. If you like the look, keep it. It definately can work sometimes, especially in the case of stones and rocks. Here, tho, I wanted a fairly smooth transition, so I kept my highlights from directly touching the dark pixels too much. Ok! We're done. Kindof...

14. 

    This last step (in this section), is just to show you a low-contrast version of the whole tile. Sometimes the tiles created by your color ramp can get way too contrasting. In other words, you end up with a very dark mortar line and very bright highlights. This can be ok, but remember, your background tiles are just that: background tiles. If you've got a lot of contrast in one tile, it tends to bring it to the 'front' and make it more prominent in the player's view. That can drown out the location of the more important elements like object or player sprites. Bringing the contrast down (decreasing the 'distance' between shades in your color ramp) can move that tile back into the background and allow the more important elements, like player sprites, to stand out. A player sprite on this tile will stand out much more than one on the original.

1. 

   Now we'll use a technique I found on the web a while back to ensure the tile we made in the first section will seamlessly tile with copies of itself. First go ahead and either make a new pic twice the size of the tile (in this case, 64x64 pixels). Next, paste in the tile at the upper right. Make sure you line it right in the corner without cutting of any of the edges.

2. 

   Then, paste in three more copies in the other corners so we'll have four copies right next to each other. We can step back here and see if we did a good job of making a seamless tile in section 1.

3. 

   It looks pretty good. If we had screwed up on either the right or left edges we'd see some wierd pixels next to each other right down the middle (where the green line is in the pic). Looks ok. Nothing obvious. But...

4. 

   ...check out the green line in this pic. That's where we'd have any problems if we'd screwed up the top or lower edges of our tile. The area immediately around that line is ok, but just below it, we've accidentally made a pretty strong line with our mortar color (around the dashed red line). Check the pic in step 2 of this section again and you'll see it without any help from me. If we tiled a bunch of these tiles together as it is now, player's would easily see this line and the whole area would look 'tiled'. We're trying to prevent this, so we'll need to break up that line somehow.

5. 

   This is what we'll do: right in the center, we'll erase the work we did on two of those stones and meld them into a single stone that will break up that horizontal line we're trying to eliminate. Also, we'll take the rock right to the left of that new stone and extend it down a bit (making the stone below it shorter).

6. 

   Now we'll shade those new rocks just like we did in section 1. We'll put in the darker shade.

7. 

   Then, we'll go ahead and highlight it.

8. 

   Now, here's the trick that makes this work. We going to use the rectangle selector tool to copy the center section for our new, improved tile. We'll take the size we need (32x32) but start the upper left of our selected rectangle half the width (16 pixels) to the right and half the height (16 pixels) down from the top of our four grouped tiles (the red rectangle). We're effectively taking a quarter of each of our four original tiles. Once that area is selected, hit cntrl+C to copy it to the clipboard. That will be our tile. While editing this or any other seamless tile to clean it up, try and stay away from editing the area just around the inner edges of that red square. If you do, you'll be in no better position that when you started.

9. 

   Now, we'll repeat steps 1 and 2 from this section with our new tile to see how it tiles. Looks better, right? Go ahead and create a new pic file and save the tile (the 32x32 one). There's your seamless tile. This technique of grabbing the center can be used for almost any texture: grass, brick, metal, wood planks, etc.