Tutorial: Brickwork
· Apr 21, 2005, 4:01 AM
#6003
<p>A mini tutorial on brick/rock walls... not really sure if this is at all what you are looking for, but maybe it might help someone? Just a slight warning, it is really late at night here and i am a tired little samurai, so ill try to make this as quick for me so that i am to not fall asleep while writing this... so bear with me 
</p>
<p>Alrighty, lets start with step one... we are going to create a 16x16 tile. reduce color depth so that you can palettize your work (if you have that luxury in your paint program) and we are going to choose 6-8 shades of any color you want. i chose red, because i usually choose a greyish blue and i wanted to change things up a little. heres st0ve's palette.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stonecolors.gif" width="84" height="12" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stonecolors.gif" width="252" height="36" border="0" alt="" hspace="10" /></p>
<p>Oookkk... now, we are going to make the general pattern. i am going to make mine somewhat organized and brick like, but this is the step where you make your tiles as irregularly patterned as you wish. i am going to make a simple grid like tile with the brick/stone's height being split into 4pixel high bricks, and with varied, slightly random width.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone1.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone1.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone1.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>We do this with our second or third lightest colro that we have selected (depending on how many shades you are using.) Now to break up that solid looking grid type tile we have going on right now, we are going to use the next brightest tone of our color to randomly 'splotch' areas of the darker outline to soften it up a little. you might want to keep in mind the form of the bricks, like you shouldnt soften up areas where you want/need a dark crevice in your wall, so try to somewhat plan out where you are splotching. heres what we have after that whole deal.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone2.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone2.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone2.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Whee, doesnt look like much of a change, eh? Alright now we are going to start giving it some form... take the next lightest shade (should be around the middle of your palette gradient at this point) and start filling in the shadows that each brick would make near the crevices... this is a little hard to explain, so the picture will help momentarily... but try to think of it as a small cast shadow by the white empty space that you have so far. here is a picture to illustrate what i mean.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone3.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone3.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone3.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Make sure that you do not color in ALL the way around the brick/stone, just the lower areas. Now choose the next lightest palette color entry, and simply paint fill in the rest of the white space. you can go in and pixel details from there, but i am going to stick to asolid wall for now, so heres what we got.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone4.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone4.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone4.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Now we want to give some of those individual stonebricks some 'pop' or some more depth if you will... so on the top two layers of stonebricks, we are going to add a tiny hint of a highlight with our next lightest shade of color. heres a simple illustration.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>There you have it, your first brick tile.</p>
<p>OK so what if you are going to tile that simple brick tile not only horizontally, but vertically./... you are going to quickly find out that you are going to have a dull and boring wall with no depth at all... heres how to create the illusion without much further work. If you are wondering why we didnt choose our DARKEST shade for the initial stonebrick outline, this is why...heh. make a copy of your stonebrick tile, and then what you are essentially doing, is making every color in the original tile ONE shade Darker... and also do the same process making the original tile ONE shade lighter... heres what the individual tiles looklike.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="64" height="64" border="0" alt="" hspace="10" />
<img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5a.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5a.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5a.gif" width="64" height="64" border="0" alt="" hspace="10" />
<img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5b.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5b.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5b.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Now simply stack these on top of one another... and you get some thing that looks like this... </p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone6.gif" width="16" height="48" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone6.gif" width="32" height="96" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone6.gif" width="64" height="192" border="0" alt="" hspace="10" /></p>
</p><p>Alrighty, lets start with step one... we are going to create a 16x16 tile. reduce color depth so that you can palettize your work (if you have that luxury in your paint program) and we are going to choose 6-8 shades of any color you want. i chose red, because i usually choose a greyish blue and i wanted to change things up a little. heres st0ve's palette.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stonecolors.gif" width="84" height="12" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stonecolors.gif" width="252" height="36" border="0" alt="" hspace="10" /></p>
<p>Oookkk... now, we are going to make the general pattern. i am going to make mine somewhat organized and brick like, but this is the step where you make your tiles as irregularly patterned as you wish. i am going to make a simple grid like tile with the brick/stone's height being split into 4pixel high bricks, and with varied, slightly random width.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone1.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone1.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone1.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>We do this with our second or third lightest colro that we have selected (depending on how many shades you are using.) Now to break up that solid looking grid type tile we have going on right now, we are going to use the next brightest tone of our color to randomly 'splotch' areas of the darker outline to soften it up a little. you might want to keep in mind the form of the bricks, like you shouldnt soften up areas where you want/need a dark crevice in your wall, so try to somewhat plan out where you are splotching. heres what we have after that whole deal.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone2.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone2.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone2.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Whee, doesnt look like much of a change, eh? Alright now we are going to start giving it some form... take the next lightest shade (should be around the middle of your palette gradient at this point) and start filling in the shadows that each brick would make near the crevices... this is a little hard to explain, so the picture will help momentarily... but try to think of it as a small cast shadow by the white empty space that you have so far. here is a picture to illustrate what i mean.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone3.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone3.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone3.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Make sure that you do not color in ALL the way around the brick/stone, just the lower areas. Now choose the next lightest palette color entry, and simply paint fill in the rest of the white space. you can go in and pixel details from there, but i am going to stick to asolid wall for now, so heres what we got.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone4.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone4.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone4.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Now we want to give some of those individual stonebricks some 'pop' or some more depth if you will... so on the top two layers of stonebricks, we are going to add a tiny hint of a highlight with our next lightest shade of color. heres a simple illustration.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>There you have it, your first brick tile.</p>
<p>OK so what if you are going to tile that simple brick tile not only horizontally, but vertically./... you are going to quickly find out that you are going to have a dull and boring wall with no depth at all... heres how to create the illusion without much further work. If you are wondering why we didnt choose our DARKEST shade for the initial stonebrick outline, this is why...heh. make a copy of your stonebrick tile, and then what you are essentially doing, is making every color in the original tile ONE shade Darker... and also do the same process making the original tile ONE shade lighter... heres what the individual tiles looklike.</p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5.gif" width="64" height="64" border="0" alt="" hspace="10" />
<img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5a.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5a.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5a.gif" width="64" height="64" border="0" alt="" hspace="10" />
<img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5b.gif" width="16" height="16" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5b.gif" width="32" height="32" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone5b.gif" width="64" height="64" border="0" alt="" hspace="10" /></p>
<p>Now simply stack these on top of one another... and you get some thing that looks like this... </p>
<p class="center"><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone6.gif" width="16" height="48" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone6.gif" width="32" height="96" border="0" alt="" hspace="10" /><img src="http://pixel-zone.rpgdx.net/images/tutorials/minituts/bricks/stone6.gif" width="64" height="192" border="0" alt="" hspace="10" /></p>
