I've noticed that there aren't very many tilesetters working on the Breeze style. As you may have figured out from the title, I will attempt to teach you how to sprite a world in the Breeze style.
Note: For these tutorials, you'll need some spriting ability and a graphics program, preferably one that supports multiple layers.
Note: For these tutorials, you'll need some spriting ability and a graphics program, preferably one that supports multiple layers.
Breeze generally uses either a six or four color palette. This tutorial will use four colors: main, shadow, highlight and outline. For colormagix palettes, I'll use these setups -
sixth color=Outline
Fifth color=Shadow
fourth color=Fill/Main
Third color=Highlight.
Also, keep in mind that Breeze doesn't use heavy shading - it's a fairly simplistic style. More will be added to this section later.
sixth color=Outline
Fifth color=Shadow
fourth color=Fill/Main
Third color=Highlight.
Also, keep in mind that Breeze doesn't use heavy shading - it's a fairly simplistic style. More will be added to this section later.
Here I'll teach you to sprite a simple brick wall, such as you might see in a city or town.
Step 1:
We'll start with a basic, 3x3 blank space.
http://img514.imageshack.us/img514/6913/step1yn1.png[/img]
Step 2:
For this wall, I'll be using a color palette I found on colormagix. It's called Cardinal.
Breeze generally uses either a six or four color palette. This tutorial will use four colors: main, shadow, highlight and outline. For the colormagix palette, i'll use these setups -
sixth color=Outline
Fifth color=Shadow
fourth color=Fill/Main
Third color=Highlight
Fill the center square with your fill color. Then, make roughly equal rows, for the bricks. I've made four 7pixel rows with borders of my outline color.
http://img523.imageshack.us/img523/4954/step2tl1.png[/img]
Step 3:
Now, work away and make roughly equal-sized bricks.
http://img213.imageshack.us/img213/1981/step3zt7.png[/img]
Step 4:
Check to make sure that your center tile is tileable. If not, go back and edit it until it is.
http://img205.imageshack.us/img205/8342/step4ab3.png[/IMG]
Step 5:
Copy the center tile down to the three tiles below. Clear off the bottom of the bricks so that the wall has a solid base.
http://img510.imageshack.us/img510/2574/step5ad3.png[/IMG]
Step 6:
Now, copy the center tile to the sides of it.
http://img512.imageshack.us/img512/6701/step6jw0.png[/IMG]
Step 7:
Copy the CT to the three remaining tiles. Do the same thing we did in Step 5.
http://img49.imageshack.us/img49/3338/step7jy9.png[/IMG]
Step 8:
Edit the sides of the wall so that there are 2 or three empty pixels on either side of it.
http://img337.imageshack.us/img337/4387/step8rd9.png[/IMG]
Step 9:
Rearrange the bricks so that they're roughly even, making sure not to mess with tilability.
http://img252.imageshack.us/img252/4069/step9ts0.png[/IMG]
Step 10:
Shading - now we'll use our shadow color. Shade each brick like shown in the zoomed in screenshot below.
http://img252.imageshack.us/img252/7110/step10mb7.png[/IMG]
Step 11:
Highlighting - Highlight each brick similarly to the way below. This isn't the way to do it, but it's the way I do it. Feel free to find your own style if you wish.
http://img204.imageshack.us/img204/8481/step11lx1.png[/IMG]
Step 12:
This is time-consuming, but essential. Shade all the bricks.
http://img250.imageshack.us/img250/5886/step12jb9.png[/IMG]
Step 13:
Well done - you've made a perfectly good wall. However, it's only good for one direction, which isn't what we want, is it?
Increase the canvas size so that your picture is 5 tiles in height. Keep the same width. (5 tiles =160 pixels)
http://img250.imageshack.us/img250/2451/step13of4.png[/IMG]
Step 14:
Make the side walls by adding a line of your outline color to the sides of your walls.
http://img522.imageshack.us/img522/5798/step14xa5.png[/IMG]
Step 15:
Now, fill in the interior of those side walls with your fill color. Make sure the front and side walls blend well.
http://img250.imageshack.us/img250/1046/step15ql7.png[/IMG]
Step 16:
Add highlights and shading to the side walls. Basically, just follow the shadow and highlight around the wall.
http://img250.imageshack.us/img250/493/step16in5.png[/IMG]
Step 17:
Nearly done! Add the back of the wall, using the same techniques described above.
http://img511.imageshack.us/img511/9660/step17io7.png[/IMG]
Step 18:
The last step! Congratulations, you've made it all this way.
Fill in that last bit of empty space with a very dark (but NOT black) color. I used RGB 3,3,3.
http://img259.imageshack.us/img259/4900/step18ib7.png[/IMG]
You're done with a basic wall! It doesn't have connectors, but otherwise, it's perfect! Connectors will be added soon.
Step 1:
We'll start with a basic, 3x3 blank space.
http://img514.imageshack.us/img514/6913/step1yn1.png[/img]
Step 2:
For this wall, I'll be using a color palette I found on colormagix. It's called Cardinal.
Breeze generally uses either a six or four color palette. This tutorial will use four colors: main, shadow, highlight and outline. For the colormagix palette, i'll use these setups -
sixth color=Outline
Fifth color=Shadow
fourth color=Fill/Main
Third color=Highlight
Fill the center square with your fill color. Then, make roughly equal rows, for the bricks. I've made four 7pixel rows with borders of my outline color.
http://img523.imageshack.us/img523/4954/step2tl1.png[/img]
Step 3:
Now, work away and make roughly equal-sized bricks.
http://img213.imageshack.us/img213/1981/step3zt7.png[/img]
Step 4:
Check to make sure that your center tile is tileable. If not, go back and edit it until it is.
http://img205.imageshack.us/img205/8342/step4ab3.png[/IMG]
Step 5:
Copy the center tile down to the three tiles below. Clear off the bottom of the bricks so that the wall has a solid base.
http://img510.imageshack.us/img510/2574/step5ad3.png[/IMG]
Step 6:
Now, copy the center tile to the sides of it.
http://img512.imageshack.us/img512/6701/step6jw0.png[/IMG]
Step 7:
Copy the CT to the three remaining tiles. Do the same thing we did in Step 5.
http://img49.imageshack.us/img49/3338/step7jy9.png[/IMG]
Step 8:
Edit the sides of the wall so that there are 2 or three empty pixels on either side of it.
http://img337.imageshack.us/img337/4387/step8rd9.png[/IMG]
Step 9:
Rearrange the bricks so that they're roughly even, making sure not to mess with tilability.
http://img252.imageshack.us/img252/4069/step9ts0.png[/IMG]
Step 10:
Shading - now we'll use our shadow color. Shade each brick like shown in the zoomed in screenshot below.
http://img252.imageshack.us/img252/7110/step10mb7.png[/IMG]
Step 11:
Highlighting - Highlight each brick similarly to the way below. This isn't the way to do it, but it's the way I do it. Feel free to find your own style if you wish.
http://img204.imageshack.us/img204/8481/step11lx1.png[/IMG]
Step 12:
This is time-consuming, but essential. Shade all the bricks.
http://img250.imageshack.us/img250/5886/step12jb9.png[/IMG]
Step 13:
Well done - you've made a perfectly good wall. However, it's only good for one direction, which isn't what we want, is it?
Increase the canvas size so that your picture is 5 tiles in height. Keep the same width. (5 tiles =160 pixels)
http://img250.imageshack.us/img250/2451/step13of4.png[/IMG]
Step 14:
Make the side walls by adding a line of your outline color to the sides of your walls.
http://img522.imageshack.us/img522/5798/step14xa5.png[/IMG]
Step 15:
Now, fill in the interior of those side walls with your fill color. Make sure the front and side walls blend well.
http://img250.imageshack.us/img250/1046/step15ql7.png[/IMG]
Step 16:
Add highlights and shading to the side walls. Basically, just follow the shadow and highlight around the wall.
http://img250.imageshack.us/img250/493/step16in5.png[/IMG]
Step 17:
Nearly done! Add the back of the wall, using the same techniques described above.
http://img511.imageshack.us/img511/9660/step17io7.png[/IMG]
Step 18:
The last step! Congratulations, you've made it all this way.
Fill in that last bit of empty space with a very dark (but NOT black) color. I used RGB 3,3,3.
http://img259.imageshack.us/img259/4900/step18ib7.png[/IMG]
You're done with a basic wall! It doesn't have connectors, but otherwise, it's perfect! Connectors will be added soon.