I love brick walls. Not because they are easy to sprite, but because there is so much you can learn from them. In fact, there's so much you can learn from brick walls that this is a three part series. In this tutorial, you're going to learn how to make a perfect, black and white brick wall. In the next tutorial in this series you will learn to color it, and finally, in the last part, how to take a hammer and make it look beat to hell.
Before we get started, here's an example of the abused brick wall I did earlier.

At the end of this series, you will be able to do this and much more.
Previous Sprite Art Tutorials
Stop! Hold on a second. This tutorial is the first in the Brick Wall series, but the third in the Sprite Art 101 series. If you haven't read those two tutorials, you may want to take a moment and do so. This tutorial builds on things already explained there.
The Brick Wall Framework - Putting in The Mortar
We start exactly where bricklayers don't. With the mortar. You know, that stuff between the bricks that holds it all together. We're going to make the mortar and then slip in our bricks. The mortar is extremely important. It helps us make the brick wall tile to, well, tile properly. Let's take a look at the above example and see how it tiles.

As you can see it tiles pretty well. After being repeated four times, all the sides get a chance to match up with the other sides. All the bricks fit together nicely.
Drawing The Mortar
Our mortar is black because we assume it to be back far enough that the light doesn't hit it. Here's what it looks like :

This may not, at first, look like a complete tile. However, the mortar has been arranged in such a way that when it is tiled, each brick that has a missing part matches up with another brick that has a matching part. Here's what it looks like tiled.

Wow, like magic. Well, not really. To see exactly how this works, I've numbered each brick and traced a blue line around the edge. Here's what it looks like by itself.

And here it is tiled again :

The Perfect Brick Wall Tile
At the beginning of this tutorial I said we'd be making the perfect brick wall. By perfect, I don't mean "the best brick wall tile ever made". I mean spotless. We get to poke holes in it in the third tutorial of this series.
By using the same principles of highlight and shadow discussed in the previous two tutorials you can easily give the wall depth. Here's what it looks like :

And here it is again, but really big so you can take a good look at it:

See, it's just the raised blocks you learned about before. I know, I know, it's in black and white and the first example is color. Well, that's in the next tutorial. For now, take a look at the perfect brick wall tiled :

Conclusion
You now can apply what you've learned to making black and white brick wall tiles. But, more imporantly, you now understand how tiles, well, tile. In the next tutorial, you will learn how to pick colors for shadow and highlight colors and bring color to your brick wall.
Awesome tutorials!
Awesome
Could I use the black and White brick wall as a sprite in my game?
Please. :)
Is it possible to use the image in a game im making? I will make sure I credit this site. Thank you
Hi, I was just wondering if there is any licensing on the above images. I'm an app designer and I'm currently working on an app I'm planning to ship
within the next 5 weeks. May I use these sprites in my app? If you would like credit I can also add that to the game. Please get back to me when you can.
Thanks again
-Brandon Contreras
Post preview:
Close preview