Woohoo! We reached 50 replies on January 14th. It's a Very Hot Topic!
This is, quite simply, a collection of tutorials on spriting breeze tilesets. I'll update this every time I write a new tutorial.
This is, quite simply, a collection of tutorials on spriting breeze tilesets. I'll update this every time I write a new tutorial.
Breeze is a simple style to sprite. This doesn't apply only to charsets - tilesets are easy to make as well. Basic guidelines to follow when spriting:
-As always, remember your light source, and where it is. Sprite with this in mind.
-Breeze is a fairly simplistic style - for backgrounds, I tend to use four or six color palettes, depending on the detail required.
-Don't dither. While not an absolute rule, Breeze tilesets look horrible with severe dithering. So please don't do it!
-KIS - Keep it Simple! I can't stress this enough. It's OK to have (relatively) large areas without significant shading. This shouldn't be a reason to ignore shading altogether, though!
-Initiative is important. Don't just frankensprite what's already out there! Go ahead and make something new! It doesn't matter what it looks like, the important thing is that you tried. And hey, your next time will be better!
-Don't ignore basic color theory.This one speaks for itself. Just because it's simple doesn't mean it shouldn't look good.
Please note that these are only guidelines, and not all of them are specific to Breeze. They're fairly important, though.
-As always, remember your light source, and where it is. Sprite with this in mind.
-Breeze is a fairly simplistic style - for backgrounds, I tend to use four or six color palettes, depending on the detail required.
-Don't dither. While not an absolute rule, Breeze tilesets look horrible with severe dithering. So please don't do it!
-KIS - Keep it Simple! I can't stress this enough. It's OK to have (relatively) large areas without significant shading. This shouldn't be a reason to ignore shading altogether, though!
-Initiative is important. Don't just frankensprite what's already out there! Go ahead and make something new! It doesn't matter what it looks like, the important thing is that you tried. And hey, your next time will be better!
-Don't ignore basic color theory.This one speaks for itself. Just because it's simple doesn't mean it shouldn't look good.
Please note that these are only guidelines, and not all of them are specific to Breeze. They're fairly important, though.
For this tutorial, I'm assuming you have at least some spriting skill, and know how to use color palettes. A graphics program that supports layers, while not a must, is highly recommended.
Part 1 : A brick wall
We'll start off with something simple : a basic wall, such as might be used in a street or other urban area.
Step 1: Starting off.
For this tutorial, I'll be using these palettes:
Cardinal
http://www.colormagix.org/Color%20Palet ... rdinal.png[/img]
A wall should be at least 3x3 in the tileset.
So, I'll start with a 3x3 block.
http://img514.imageshack.us/img514/6913/step1yn1.png[/img]
Step 2: Basic Sketch
Next, I'll sketch out the basic design of the wall. To start with, I'll draw the center tile in the fourth color on the palette, and then outline the bricks in the sixth.
TIP: Make sure that the edges on the tile will line up perfectly - otherwise youlll be stuck with a 3x3 wall - no more, no less.
Since the tile is 32x32 pixels, I'll make each row of bricks 7 pixels high, giving me 5 equal rows.
http://img523.imageshack.us/img523/4954/step2tl1.png[/img]
Step 3: Bricks
Now the bricks. Try and make them roughly equal in length.
http://img213.imageshack.us/img213/1981/step3zt7.png[/img]
Step 4: Check
Simply put, check that it tiles correctly.
http://img205.imageshack.us/img205/8342/step4ab3.png[/img]
Step 5: Base
Here, I'll copy the center tile to the bottom three tiles. Then, I'll erase the extra bit on the bottom, so that the wall has a solid base.
http://img510.imageshack.us/img510/2574/step5ad3.png[/img]
Step 6: Sides
Again, I'll copy the center tile to the sides of it.
http://img512.imageshack.us/img512/6701/step6jw0.png[/img]
Step 7: Top
Again, we'll copy the center tile, and cover the top three rows. Again, delete the extra bit on the top so that there's a solid top of the wall, as well.
http://img49.imageshack.us/img49/3338/step7jy9.png[/img]
Step 8: Width Adjustment
Now, we'll work on the sides. Draw a line somewhere near the edges with the sixth color, like so. Delete the extra pixels.
http://img337.imageshack.us/img337/4387/step8rd9.png[/img]
Step 9: Evening things out
Now, you may notice that some bricks aren't even close to the others in size. Let's fix that, shall we?
Go over with the fourth and sixth colors and even out the bricks on the 8 outside tiles.
http://img252.imageshack.us/img252/4069/step9ts0.png[/img]
Step 10: Shading
Now, for the shading.
Breeze doesn't use a very complicated shading system. An object will usually have four colors per palette - outline, fill, shadow and highlight.
Here's the colors I use, according to colormagix palettes.
Outline - 6
Fill - 4
Shadow - 5
Highlight - 3
Now, we'll be using the shadow and highlights to complete the wall.
Now, on the far left side of each brick (just before the outline), make a 1 pixel vertical line using your shadow color.
Here's a closeup of the central tile once this has been done.
http://img252.imageshack.us/img252/7110/step10mb7.png[/img]
Step 11: Highlights
Next, we'll use the highlight color to highlight the bricks. I tend to do that this way.
Again, here's a zoomed in view of the central tile.
http://img204.imageshack.us/img204/8481/step11lx1.png[/img]
Step 12: Filling it in
Now, for the longest, and most time-consuming, step. Apply shadow and highlight to each brick. Don't be discouraged by the time this takes!
http://img250.imageshack.us/img250/5886/step12jb9.png[/img]
Step 13: Good work. However...
Now that's a great wall. However, we shouldn't just stop there. We'll make sides and a back to this wall as well! This is why we didn't let the wall extend the full 96 pixels in width and height.
First, we'll start with the sides. Make sure you do this in an extra layer, if using a program that supports them. If not, save here.
Now, you'll need to extend the canvas size you're using to nearly double what it was. (5 tiles high, 3 tiles wide)
http://img250.imageshack.us/img250/2451/step13of4.png[/img]
Step14: The sides
Now, the sides. I like to use dimensions of 4 pixels wide. Whatever size you use, make sure your picture looks something like this.
http://img522.imageshack.us/img522/5798/step14xa5.png[/img]
Step 15: Editing
Now, fill in all but the edges of the sides you just made with your fill color. (#4) Make sure that the sides join seamlessly with the main wall.
http://img250.imageshack.us/img250/1046/step15ql7.png[/img]
Step 16: Highlights
Now, follow the highlights that should be near the side walls. (i.e. the left wall should have shadow color highlighting, and the right wall highlights highlighting.)
http://img250.imageshack.us/img250/493/step16in5.png[/img]
Step 17: Back of wall
Now, the back. We're nearly done, so hold on just a little longer.
At the very top of the image, make a section the same height as the width of the sides. Fill it with color #4, and color in the outsides with color #6, making sure there is a seamless transition.
http://img511.imageshack.us/img511/9660/step17io7.png[/img]
Step 18: Darkness
Now, fill in the rectangle in the center with a nearly black color.
IMPORTANT: Do not use full black!
I use RGB values of (3,3,3). Alternatively, use a different dark color.
http://img259.imageshack.us/img259/4900/step18ib7.png[/img]
Finished!
And you're done! Add your wall in to a tileset to use it.
(Hint: A good touch is to add a transparent center version. To do this, simply ignore step 18.
Part 1 : A brick wall
We'll start off with something simple : a basic wall, such as might be used in a street or other urban area.
Step 1: Starting off.
For this tutorial, I'll be using these palettes:
Cardinal
http://www.colormagix.org/Color%20Palet ... rdinal.png[/img]
A wall should be at least 3x3 in the tileset.
So, I'll start with a 3x3 block.
http://img514.imageshack.us/img514/6913/step1yn1.png[/img]
Step 2: Basic Sketch
Next, I'll sketch out the basic design of the wall. To start with, I'll draw the center tile in the fourth color on the palette, and then outline the bricks in the sixth.
TIP: Make sure that the edges on the tile will line up perfectly - otherwise youlll be stuck with a 3x3 wall - no more, no less.
Since the tile is 32x32 pixels, I'll make each row of bricks 7 pixels high, giving me 5 equal rows.
http://img523.imageshack.us/img523/4954/step2tl1.png[/img]
Step 3: Bricks
Now the bricks. Try and make them roughly equal in length.
http://img213.imageshack.us/img213/1981/step3zt7.png[/img]
Step 4: Check
Simply put, check that it tiles correctly.
http://img205.imageshack.us/img205/8342/step4ab3.png[/img]
Step 5: Base
Here, I'll copy the center tile to the bottom three tiles. Then, I'll erase the extra bit on the bottom, so that the wall has a solid base.
http://img510.imageshack.us/img510/2574/step5ad3.png[/img]
Step 6: Sides
Again, I'll copy the center tile to the sides of it.
http://img512.imageshack.us/img512/6701/step6jw0.png[/img]
Step 7: Top
Again, we'll copy the center tile, and cover the top three rows. Again, delete the extra bit on the top so that there's a solid top of the wall, as well.
http://img49.imageshack.us/img49/3338/step7jy9.png[/img]
Step 8: Width Adjustment
Now, we'll work on the sides. Draw a line somewhere near the edges with the sixth color, like so. Delete the extra pixels.
http://img337.imageshack.us/img337/4387/step8rd9.png[/img]
Step 9: Evening things out
Now, you may notice that some bricks aren't even close to the others in size. Let's fix that, shall we?
Go over with the fourth and sixth colors and even out the bricks on the 8 outside tiles.
http://img252.imageshack.us/img252/4069/step9ts0.png[/img]
Step 10: Shading
Now, for the shading.
Breeze doesn't use a very complicated shading system. An object will usually have four colors per palette - outline, fill, shadow and highlight.
Here's the colors I use, according to colormagix palettes.
Outline - 6
Fill - 4
Shadow - 5
Highlight - 3
Now, we'll be using the shadow and highlights to complete the wall.
Now, on the far left side of each brick (just before the outline), make a 1 pixel vertical line using your shadow color.
Here's a closeup of the central tile once this has been done.
http://img252.imageshack.us/img252/7110/step10mb7.png[/img]
Step 11: Highlights
Next, we'll use the highlight color to highlight the bricks. I tend to do that this way.
Again, here's a zoomed in view of the central tile.
http://img204.imageshack.us/img204/8481/step11lx1.png[/img]
Step 12: Filling it in
Now, for the longest, and most time-consuming, step. Apply shadow and highlight to each brick. Don't be discouraged by the time this takes!
http://img250.imageshack.us/img250/5886/step12jb9.png[/img]
Step 13: Good work. However...
Now that's a great wall. However, we shouldn't just stop there. We'll make sides and a back to this wall as well! This is why we didn't let the wall extend the full 96 pixels in width and height.
First, we'll start with the sides. Make sure you do this in an extra layer, if using a program that supports them. If not, save here.
Now, you'll need to extend the canvas size you're using to nearly double what it was. (5 tiles high, 3 tiles wide)
http://img250.imageshack.us/img250/2451/step13of4.png[/img]
Step14: The sides
Now, the sides. I like to use dimensions of 4 pixels wide. Whatever size you use, make sure your picture looks something like this.
http://img522.imageshack.us/img522/5798/step14xa5.png[/img]
Step 15: Editing
Now, fill in all but the edges of the sides you just made with your fill color. (#4) Make sure that the sides join seamlessly with the main wall.
http://img250.imageshack.us/img250/1046/step15ql7.png[/img]
Step 16: Highlights
Now, follow the highlights that should be near the side walls. (i.e. the left wall should have shadow color highlighting, and the right wall highlights highlighting.)
http://img250.imageshack.us/img250/493/step16in5.png[/img]
Step 17: Back of wall
Now, the back. We're nearly done, so hold on just a little longer.
At the very top of the image, make a section the same height as the width of the sides. Fill it with color #4, and color in the outsides with color #6, making sure there is a seamless transition.
http://img511.imageshack.us/img511/9660/step17io7.png[/img]
Step 18: Darkness
Now, fill in the rectangle in the center with a nearly black color.
IMPORTANT: Do not use full black!
I use RGB values of (3,3,3). Alternatively, use a different dark color.
http://img259.imageshack.us/img259/4900/step18ib7.png[/img]
Finished!
And you're done! Add your wall in to a tileset to use it.
(Hint: A good touch is to add a transparent center version. To do this, simply ignore step 18.
Step 1: Planning
First, we're going to plan out the house. The house should be designed with an environment in mind ' if it's in a place where it rains a lot, it's going to have a pointed roof. A desert, and the roof will probably be made of thatch. And so on.
Sizing: For the house, we want it to be big enough to have variety and, of course, we want it tileable. For what I'm doing now, I'll stick with dimensions of 3x7. The house will be modern-ish, and will have a flat roof (useable as an extra area).
http://img220.imageshack.us/img220/2042/house1xm9.png[/img]
Next, we'll need to pick our color palettes. For this tutorial, I'll be using Dewkist and,Blue Berry.
Step 2: Front Wall
To start off, we'll design the front wall. This should be 3x3. This way, we have full tileability(is that even a word?) in all directions.
So, we'll fill in the lowest 3x3 square with the fill color of Dewkist.
http://img521.imageshack.us/img521/3966/house2vb0.png[/img]
Step 3: Borders
Now, we'll need to make a border for the wall. I'm going to make mine about 5 pixels thick. Fill the sides and bottom with your alternate color. Outline it. It should look something like this.
http://img232.imageshack.us/img232/7899/house3rk2.png[/img]
Step 4: Shading
As the wall approaches the borders we've just added, it will become darker. Make the area closest to the border shaded, with a 1 pixel width. Note : just do this on the sides. Also, there'll be shadow from the roof. Make this proportionate to how much your roof will stick out from the sides of the house - if it's a lot, shade for about 5 or six pixels. If barely anything, 1 or 2. Don't worry about the amount too much - we'll refine it later if it's no good.
http://img527.imageshack.us/img527/2321/house4al3.png[/img]
Step 5: Sketching out the roof
To start, I usually fill the other 12 tiles with my alternate fill color. After that, you should outline the roof sketch. Now we've got the skeleton of a house! It still doesn't look very good, though. Shade the pillars to the same distance as the wall was.
http://img216.imageshack.us/img216/1065/house5rn8.png[/img]
Step 6: Slope
Now, we need to give the roof some slope on the edges. We'll make a border of our alternate shade color. Mine was 5 pixels in width. It's important that the border is the same width all around.
http://img183.imageshack.us/img183/4382/house6ci8.png[/img]
Step 7: Finishing off Step 6
Now, we need to use our alternate outline color on the slope. Make diagonal lines and an interior border, like so. That's a bit better, isn't it?
While step 7 looks good so far, we still haven't taken into account a light source. I like to envision the light source as being somewhere to the left. So, we'll lighten the front, back and left slopes, and leave the right slope in our shade color. Set the left to your highlight color, and the front and back to the fill color.
You should have something like this.
http://img503.imageshack.us/my.php?image=house7we8.png[/img]
Step 8: Touching it up
I've just realised that the part at the bottom doesn't really look right to me. I'll change it so that it's three separate pieces, with the sides being placed over the horizontal piece.
I've changed the outline a bit to reflect that, and also shaded the horizontal piece a little near the edges.
That's a bit better. However, we've still got a bit left to fix. The front and back slope don't really seem the same length, do they? That's perspective conspiring against us. We'll enlarge the front section and shorten the back, like so.
http://img241.imageshack.us/img241/7369/house8uy0.png[/img]
And there you have it - an extremely basic house. You can use this as a base to make more detailed and sophisticated houses.
First, we're going to plan out the house. The house should be designed with an environment in mind ' if it's in a place where it rains a lot, it's going to have a pointed roof. A desert, and the roof will probably be made of thatch. And so on.
Sizing: For the house, we want it to be big enough to have variety and, of course, we want it tileable. For what I'm doing now, I'll stick with dimensions of 3x7. The house will be modern-ish, and will have a flat roof (useable as an extra area).
http://img220.imageshack.us/img220/2042/house1xm9.png[/img]
Next, we'll need to pick our color palettes. For this tutorial, I'll be using Dewkist and,Blue Berry.
Step 2: Front Wall
To start off, we'll design the front wall. This should be 3x3. This way, we have full tileability(is that even a word?) in all directions.
So, we'll fill in the lowest 3x3 square with the fill color of Dewkist.
http://img521.imageshack.us/img521/3966/house2vb0.png[/img]
Step 3: Borders
Now, we'll need to make a border for the wall. I'm going to make mine about 5 pixels thick. Fill the sides and bottom with your alternate color. Outline it. It should look something like this.
http://img232.imageshack.us/img232/7899/house3rk2.png[/img]
Step 4: Shading
As the wall approaches the borders we've just added, it will become darker. Make the area closest to the border shaded, with a 1 pixel width. Note : just do this on the sides. Also, there'll be shadow from the roof. Make this proportionate to how much your roof will stick out from the sides of the house - if it's a lot, shade for about 5 or six pixels. If barely anything, 1 or 2. Don't worry about the amount too much - we'll refine it later if it's no good.
http://img527.imageshack.us/img527/2321/house4al3.png[/img]
Step 5: Sketching out the roof
To start, I usually fill the other 12 tiles with my alternate fill color. After that, you should outline the roof sketch. Now we've got the skeleton of a house! It still doesn't look very good, though. Shade the pillars to the same distance as the wall was.
http://img216.imageshack.us/img216/1065/house5rn8.png[/img]
Step 6: Slope
Now, we need to give the roof some slope on the edges. We'll make a border of our alternate shade color. Mine was 5 pixels in width. It's important that the border is the same width all around.
http://img183.imageshack.us/img183/4382/house6ci8.png[/img]
Step 7: Finishing off Step 6
Now, we need to use our alternate outline color on the slope. Make diagonal lines and an interior border, like so. That's a bit better, isn't it?
While step 7 looks good so far, we still haven't taken into account a light source. I like to envision the light source as being somewhere to the left. So, we'll lighten the front, back and left slopes, and leave the right slope in our shade color. Set the left to your highlight color, and the front and back to the fill color.
You should have something like this.
http://img503.imageshack.us/my.php?image=house7we8.png[/img]
Step 8: Touching it up
I've just realised that the part at the bottom doesn't really look right to me. I'll change it so that it's three separate pieces, with the sides being placed over the horizontal piece.
I've changed the outline a bit to reflect that, and also shaded the horizontal piece a little near the edges.
That's a bit better. However, we've still got a bit left to fix. The front and back slope don't really seem the same length, do they? That's perspective conspiring against us. We'll enlarge the front section and shorten the back, like so.
http://img241.imageshack.us/img241/7369/house8uy0.png[/img]
And there you have it - an extremely basic house. You can use this as a base to make more detailed and sophisticated houses.
Tutorial 3: Windows
Step 0: Planning
First, we've got to plan out what we're going to do. We're going to make some windows, which will be a bit less than 1 tile in size. We'll make six basic windows - One for daytime, one to be lit at night, and a dark one for a house with no light in it. Then, we'll make copies of those three so that they're in between two tiles. This way, it'll be easier to place windows.
Step 1: Setting the dimensions
As usual, we've got to sketch out what we're going to make. I've decided to start with a basic, square window, much like this one: http://www.mr-resistor.co.uk/admin/uplo ... re_144.jpg[/img]
I've decided to have a roughly 3 pixel boundary around the window, so I'll use a color that will be in direct contrast with the window, like so.
http://img233.imageshack.us/img233/5529/step1ep7.png[/img]
Step 2: Sketch
Now, we'll make the frame of the window. I'm going to use a nice palette I found over at Colormagix called Wood.
We'll make a simple 2 pixel width frame, to start out with.
http://img227.imageshack.us/img227/3465/step2fy1.png[/img]
Step 3: Shading the frame
Now, we've got to shade this frame we've made.
Here's a zoomed in version, so you can see it better. If it's still not big enough, don't hesitate to paste it into your graphics program and zoom in as far as you can go!
Step 4: Frame Interior
Now, to make the inside of the frame. Make a pair of 2 pixel width lines. These will be the interior connectors. There are many ways of shading these, and my way isn't necessarily right. Shade.
http://img519.imageshack.us/img519/3378/step4og3.png[/img]
Step 5: Three Windows
This is where things will change a little. Open a new document three times the width of the old one, and paste your window in three times, so that you have something that looks like this.
http://img105.imageshack.us/img105/3600/step5xx0.png[/img]
Step 6: Panes of Glass
Now, we've got to design the glass for the windows. For this step, I'll be using just one of the three color palettes we're going to need: Calimine Blue.
Fill in the panes on one window with the fill from the new palette.
http://img221.imageshack.us/img221/5851/step6xh5.png[/img]
Step 7: Shading
I made some simple shading with the highlight and shadow colors along the top-left and bottom-right corners of each pane of glass.
http://img213.imageshack.us/img213/7328/step7mm8.png[/img]
Step 8: Second Window
Next just copy the panes of glass you've made over to the second window, and recolor them - I'll be using Lemon Yellow
Step 9: Unlit Window: Night
Again, copy the panes over to the third, and last, window frame. Now, we'll be using Black for the windows.
http://img401.imageshack.us/img401/8330/step9aq8.png[/img]
Step 10: Alternate Windows
This will be a really quick and easy step. First, triple the height of the window - now its 3 tiles square. Now, copy the windows down so that they're half on one square, and half on the one below it. And - you're done!
http://img221.imageshack.us/img221/8805/step10cy5.png[/img]
And here it is minus the grid.
http://img208.imageshack.us/img208/2668/finishedxx8.png[/img]
Step 0: Planning
First, we've got to plan out what we're going to do. We're going to make some windows, which will be a bit less than 1 tile in size. We'll make six basic windows - One for daytime, one to be lit at night, and a dark one for a house with no light in it. Then, we'll make copies of those three so that they're in between two tiles. This way, it'll be easier to place windows.
Step 1: Setting the dimensions
As usual, we've got to sketch out what we're going to make. I've decided to start with a basic, square window, much like this one: http://www.mr-resistor.co.uk/admin/uplo ... re_144.jpg[/img]
I've decided to have a roughly 3 pixel boundary around the window, so I'll use a color that will be in direct contrast with the window, like so.
http://img233.imageshack.us/img233/5529/step1ep7.png[/img]
Step 2: Sketch
Now, we'll make the frame of the window. I'm going to use a nice palette I found over at Colormagix called Wood.
We'll make a simple 2 pixel width frame, to start out with.
http://img227.imageshack.us/img227/3465/step2fy1.png[/img]
Step 3: Shading the frame
Now, we've got to shade this frame we've made.
Here's a zoomed in version, so you can see it better. If it's still not big enough, don't hesitate to paste it into your graphics program and zoom in as far as you can go!
Step 4: Frame Interior
Now, to make the inside of the frame. Make a pair of 2 pixel width lines. These will be the interior connectors. There are many ways of shading these, and my way isn't necessarily right. Shade.
http://img519.imageshack.us/img519/3378/step4og3.png[/img]
Step 5: Three Windows
This is where things will change a little. Open a new document three times the width of the old one, and paste your window in three times, so that you have something that looks like this.
http://img105.imageshack.us/img105/3600/step5xx0.png[/img]
Step 6: Panes of Glass
Now, we've got to design the glass for the windows. For this step, I'll be using just one of the three color palettes we're going to need: Calimine Blue.
Fill in the panes on one window with the fill from the new palette.
http://img221.imageshack.us/img221/5851/step6xh5.png[/img]
Step 7: Shading
I made some simple shading with the highlight and shadow colors along the top-left and bottom-right corners of each pane of glass.
http://img213.imageshack.us/img213/7328/step7mm8.png[/img]
Step 8: Second Window
Next just copy the panes of glass you've made over to the second window, and recolor them - I'll be using Lemon Yellow
Step 9: Unlit Window: Night
Again, copy the panes over to the third, and last, window frame. Now, we'll be using Black for the windows.
http://img401.imageshack.us/img401/8330/step9aq8.png[/img]
Step 10: Alternate Windows
This will be a really quick and easy step. First, triple the height of the window - now its 3 tiles square. Now, copy the windows down so that they're half on one square, and half on the one below it. And - you're done!
http://img221.imageshack.us/img221/8805/step10cy5.png[/img]
And here it is minus the grid.
http://img208.imageshack.us/img208/2668/finishedxx8.png[/img]
Yes, it's finally here. It's been a while, I know, but it should be worth it. This tutorial will cover doors.
Step 1: Planning
To start with, let's make a grid of 8x4 tiles. Each door will end up being about one and a half tiles high, so that a Breeze character can enter comfortably.
http://img90.imageshack.us/img90/4146/step1gc5.png[/img]
Step 2: Outline
Now, we'll sketch out the outline of the door. I'm using the Wood palette from Colormagix again.
http://img132.imageshack.us/img132/8866/step2kc4.png[/img]
Step 3: Basic sketch
OK, there's a fair bit of stuff to do in this step. Take a look at a door - there's some material around it, which supports it. We'll draw that in using colors five and two. Make this about two pixels wide, and three pixels long at the top. Now, fill the rest of the blank area with your main fill.
http://img99.imageshack.us/img99/6887/step3ok1.png[/img]
Step 4: Details
OK, now we'll add details to the door. I've changed the wood itself, so that it looks kind of like it's in planks, and added hinges and a doorknob.
http://img233.imageshack.us/img233/9121/step4hp0.png[/img]
Step 5: Animation
Pretty good so far. However, we want the door to be able to open, don't we? There's not much point otherwise, is there.
Copy the door down to the next section of the grid. Now, we'll have to make a few changes. The bottom of the door, instead of being horizontal, will be at an angle. Now, we'll make the floor. Remember how, earlier, I said that dithering isn't often used in Breeze? Well, here's an exception. The floor will be in three shades, slightly dithered in between each one. See the image for details.
http://http://img49.imageshack.us/img49/3024/step5pj4.png[/img]
Step 6: More Details
Now, we'll add lines to this door, so that it looks similar to the other one. The one main difference will be that they're closer together now than they were before - this creates an illusion of depth. Here's a side-by-side comparison with GR's doors.
http://img225.imageshack.us/img225/1423/step6ha5.png[/img]
Step 7: Nearly there...
Now, copy the first frame down again, and do the same thing. The only difference is that the door should be more open now than in Step 5&6.
http://img100.imageshack.us/img100/8653/step7us3.png[/img]
Step 8: Last frame
Now, copy the first frame down, and completely delete the door. Copy the floor from Step 7, and finish it off. Once you're done, copy the whole thing over so you've got two rows.
http://img49.imageshack.us/img49/7375/step8dn8.png[/img]
Step 9: Finishing Details
Now, fill in the remaining transparent area with dark and light colors. I've used the same ones GR did, as they're pretty good picks for this purpose. Below is the finished charset.
Credit goes to GR for the first row, myself and GR for the second, and myself for the third and fourth.
http://img517.imageshack.us/img517/3964/step9qk4.png[/img]
And, as an added bonus, here's another set - curtain doors. I'm not incredible at shading cloth, so you can take them or leave them, but they should help as an extra set of examples. As usual, I look forward to seeing what you can make.
http://http://img112.imageshack.us/img112/3169/moredoorsfy1.png[/img]
Step 1: Planning
To start with, let's make a grid of 8x4 tiles. Each door will end up being about one and a half tiles high, so that a Breeze character can enter comfortably.
http://img90.imageshack.us/img90/4146/step1gc5.png[/img]
Step 2: Outline
Now, we'll sketch out the outline of the door. I'm using the Wood palette from Colormagix again.
http://img132.imageshack.us/img132/8866/step2kc4.png[/img]
Step 3: Basic sketch
OK, there's a fair bit of stuff to do in this step. Take a look at a door - there's some material around it, which supports it. We'll draw that in using colors five and two. Make this about two pixels wide, and three pixels long at the top. Now, fill the rest of the blank area with your main fill.
http://img99.imageshack.us/img99/6887/step3ok1.png[/img]
Step 4: Details
OK, now we'll add details to the door. I've changed the wood itself, so that it looks kind of like it's in planks, and added hinges and a doorknob.
http://img233.imageshack.us/img233/9121/step4hp0.png[/img]
Step 5: Animation
Pretty good so far. However, we want the door to be able to open, don't we? There's not much point otherwise, is there.
Copy the door down to the next section of the grid. Now, we'll have to make a few changes. The bottom of the door, instead of being horizontal, will be at an angle. Now, we'll make the floor. Remember how, earlier, I said that dithering isn't often used in Breeze? Well, here's an exception. The floor will be in three shades, slightly dithered in between each one. See the image for details.
http://http://img49.imageshack.us/img49/3024/step5pj4.png[/img]
Step 6: More Details
Now, we'll add lines to this door, so that it looks similar to the other one. The one main difference will be that they're closer together now than they were before - this creates an illusion of depth. Here's a side-by-side comparison with GR's doors.
http://img225.imageshack.us/img225/1423/step6ha5.png[/img]
Step 7: Nearly there...
Now, copy the first frame down again, and do the same thing. The only difference is that the door should be more open now than in Step 5&6.
http://img100.imageshack.us/img100/8653/step7us3.png[/img]
Step 8: Last frame
Now, copy the first frame down, and completely delete the door. Copy the floor from Step 7, and finish it off. Once you're done, copy the whole thing over so you've got two rows.
http://img49.imageshack.us/img49/7375/step8dn8.png[/img]
Step 9: Finishing Details
Now, fill in the remaining transparent area with dark and light colors. I've used the same ones GR did, as they're pretty good picks for this purpose. Below is the finished charset.
Credit goes to GR for the first row, myself and GR for the second, and myself for the third and fourth.
http://img517.imageshack.us/img517/3964/step9qk4.png[/img]
And, as an added bonus, here's another set - curtain doors. I'm not incredible at shading cloth, so you can take them or leave them, but they should help as an extra set of examples. As usual, I look forward to seeing what you can make.
http://http://img112.imageshack.us/img112/3169/moredoorsfy1.png[/img]
Here's something I knocked off quickly for you guys.
Palettes:
http://img178.imageshack.us/img178/5548 ... ttehh8.png[/img] http://img264.imageshack.us/img264/1158 ... tteoi0.png[/img]
Step 1: Planning
As usual, we'll plan this out before we make it. I'm going to be making a vaguely palm-treeish tree. It'll be 3x4 squares, so I'll make the grid that size.
http://img229.imageshack.us/img229/7898/step1yd7.png[/img]
Step 2: Outline
I'll sketch out a roughly palm-treeish trunk. I'm using the custom palettes above. The green one is for the leaves, and the more earthy one is for the trunk. I'll make the trunk about three and a half squares high - plenty of space. Once I've outlined it satisfactorily, I'll fill it in with the third color on the palette.
http://img91.imageshack.us/img91/3161/step2xg4.png[/img]
Step 3: Outline - part II
Now, I'll outline the leaves in green. This takes a little while to make perfect, but I urge you to take the time. It's far more appealing when it looks nice.
http://img91.imageshack.us/img91/3161/step2xg4.png[/img]
Step 4: Fill
Here, I'll fill in the leaves, and start to establish a basic order.
http://img143.imageshack.us/img143/5255/step4sh5.png[/img]
Step 5: Basic Shading
First, I'll trace in details for the leaves. Now they've got more detail, and actually start to overlap each other. The next step is to shade the leaves where they overlap. Make sure that when you shade, you take the light source into consideration.
http://img508.imageshack.us/img508/6185/step5lt0.png[/img]
Step 6: Details
Now, I'll give each leaf some more detail, and rework the shading a little. It now looks like this.
http://img143.imageshack.us/img143/2040/step6yn9.png[/img]
Step 7: Shading the Trunk
This is slightly more difficult. The trunk will be shaded with jagged bands of colors two and five, leaving some of color three in. This is what it looks like partway through.
http://img455.imageshack.us/img455/5796/step7hx1.png[/img]
Step 8: Finish the job
And here's how it looks once I'm done.
http://img99.imageshack.us/img99/8003/step8mb4.png[/img]
Step 9: Finishing touches
I'll just touch it up so that it looks nice and polished. And here's the final result.
http://img237.imageshack.us/img237/4758/finishedoo9.png[/img]
Palettes:
http://img178.imageshack.us/img178/5548 ... ttehh8.png[/img] http://img264.imageshack.us/img264/1158 ... tteoi0.png[/img]
Step 1: Planning
As usual, we'll plan this out before we make it. I'm going to be making a vaguely palm-treeish tree. It'll be 3x4 squares, so I'll make the grid that size.
http://img229.imageshack.us/img229/7898/step1yd7.png[/img]
Step 2: Outline
I'll sketch out a roughly palm-treeish trunk. I'm using the custom palettes above. The green one is for the leaves, and the more earthy one is for the trunk. I'll make the trunk about three and a half squares high - plenty of space. Once I've outlined it satisfactorily, I'll fill it in with the third color on the palette.
http://img91.imageshack.us/img91/3161/step2xg4.png[/img]
Step 3: Outline - part II
Now, I'll outline the leaves in green. This takes a little while to make perfect, but I urge you to take the time. It's far more appealing when it looks nice.
http://img91.imageshack.us/img91/3161/step2xg4.png[/img]
Step 4: Fill
Here, I'll fill in the leaves, and start to establish a basic order.
http://img143.imageshack.us/img143/5255/step4sh5.png[/img]
Step 5: Basic Shading
First, I'll trace in details for the leaves. Now they've got more detail, and actually start to overlap each other. The next step is to shade the leaves where they overlap. Make sure that when you shade, you take the light source into consideration.
http://img508.imageshack.us/img508/6185/step5lt0.png[/img]
Step 6: Details
Now, I'll give each leaf some more detail, and rework the shading a little. It now looks like this.
http://img143.imageshack.us/img143/2040/step6yn9.png[/img]
Step 7: Shading the Trunk
This is slightly more difficult. The trunk will be shaded with jagged bands of colors two and five, leaving some of color three in. This is what it looks like partway through.
http://img455.imageshack.us/img455/5796/step7hx1.png[/img]
Step 8: Finish the job
And here's how it looks once I'm done.
http://img99.imageshack.us/img99/8003/step8mb4.png[/img]
Step 9: Finishing touches
I'll just touch it up so that it looks nice and polished. And here's the final result.
http://img237.imageshack.us/img237/4758/finishedoo9.png[/img]
This will be split up into several parts - I'm not going to cover everything in one tutorial, you know! That'd take too long. Here’s the first part - grass.
There are many different types of grass tiles, from the simple to the complex. I just quickly made the one below to the left, while the right one was made by GR.
http://img62.imageshack.us/img62/3083/comparisonmg0.png[/img]
GR’s is much better, isn’t it? That’s because it’s more complex. With the simple tile, you can easily see that there is a grid. However, with GR’s, the fact is not readily apparent. Which one would you rather have in your game? That’s what I thought.
Step 1: Basics
Pick a palette, and cover a 32x32 square with a midtone. Pretty basic so far.
http://img70.imageshack.us/img70/9908/step1ml4.png[/img]
Steps 2 through 4: Roughs
Now, the part I call the roughs - we’ll create a basic outline of what we’re going to do. Take in mind that when doing this, we’re going to take the shape of grass into account as well. To start with, take a look at some grass. It’s springy, curvy and it’s fairly thick, right? So, to imitate that, we’ll make curves that cover up a large part of the square. Don’t worry about tileability at this point, we’ll change that around later. First, just blotch some of your lighter shade onto the square, and you should end up with something like this. Make sure you hit the sides/corners.
http://img62.imageshack.us/img62/5610/step2eg2.png[/img]
It’s not much, but it’s getting there, slowly but surely. Now, we’ll add some curves to the tops of each blotch to simulate grassiness (is that even a word?). Also in this step, we’ll start to work on tileability.
http://img339.imageshack.us/img339/1708/step3sp3.png[/img]
It’s a little better - looks more grasslike and tiles, but that saturation is giving me a headache. This is grass, the most important tile in your game (unless it’s taking place in a place without much grass, but that’s fairly unlikely), and we don’t want the screen itself hurting the player, do we? No, we want it to reward the player. Look at any of the Secrets of Mana games - beautiful to look at. See these? http://www.zoggles.co.uk/upload/tsu/5-1.gif[/img]
http://www.zoggles.co.uk/upload/tsu/5-2.gif[/img]
Can you even make out the grid? It's pretty hard, isn't it?
There - that’s a better saturation. All I did was change the back area from color five to four - not that tough, eh?
http://img217.imageshack.us/img217/4640 ... xedov3.png[/img]
Next, we’ll work on some darkened areas, to make the grass look a bit better. Two colors, pretty much no matter how you use them, isn’t going to create the kind of thing we want.
http://img217.imageshack.us/img217/9760/step4yr5.png[/img]
That’s a little better, isn’t it?
Step 5: Finishing touches
Now, if we look at the last bit, we can see that it still sort of betrays the tiling.
http://img159.imageshack.us/img159/4186/step5hi6.png[/img]
I’ve made a few small changes, and doesn’t this look a whole lot better? It’s still not perfect, but it’s good enough for the time I spent (roughly 40 minutes, but it’d have been closer to 20 had I not been writing this as well). It’d be perfect for some sort of rough wild grass. Hope you enjoy this tutorial and learn from it.
http://img62.imageshack.us/img62/3083/comparisonmg0.png[/img]
GR’s is much better, isn’t it? That’s because it’s more complex. With the simple tile, you can easily see that there is a grid. However, with GR’s, the fact is not readily apparent. Which one would you rather have in your game? That’s what I thought.
Step 1: Basics
Pick a palette, and cover a 32x32 square with a midtone. Pretty basic so far.
http://img70.imageshack.us/img70/9908/step1ml4.png[/img]
Steps 2 through 4: Roughs
Now, the part I call the roughs - we’ll create a basic outline of what we’re going to do. Take in mind that when doing this, we’re going to take the shape of grass into account as well. To start with, take a look at some grass. It’s springy, curvy and it’s fairly thick, right? So, to imitate that, we’ll make curves that cover up a large part of the square. Don’t worry about tileability at this point, we’ll change that around later. First, just blotch some of your lighter shade onto the square, and you should end up with something like this. Make sure you hit the sides/corners.
http://img62.imageshack.us/img62/5610/step2eg2.png[/img]
It’s not much, but it’s getting there, slowly but surely. Now, we’ll add some curves to the tops of each blotch to simulate grassiness (is that even a word?). Also in this step, we’ll start to work on tileability.
http://img339.imageshack.us/img339/1708/step3sp3.png[/img]
It’s a little better - looks more grasslike and tiles, but that saturation is giving me a headache. This is grass, the most important tile in your game (unless it’s taking place in a place without much grass, but that’s fairly unlikely), and we don’t want the screen itself hurting the player, do we? No, we want it to reward the player. Look at any of the Secrets of Mana games - beautiful to look at. See these? http://www.zoggles.co.uk/upload/tsu/5-1.gif[/img]
http://www.zoggles.co.uk/upload/tsu/5-2.gif[/img]
Can you even make out the grid? It's pretty hard, isn't it?
There - that’s a better saturation. All I did was change the back area from color five to four - not that tough, eh?
http://img217.imageshack.us/img217/4640 ... xedov3.png[/img]
Next, we’ll work on some darkened areas, to make the grass look a bit better. Two colors, pretty much no matter how you use them, isn’t going to create the kind of thing we want.
http://img217.imageshack.us/img217/9760/step4yr5.png[/img]
That’s a little better, isn’t it?
Step 5: Finishing touches
Now, if we look at the last bit, we can see that it still sort of betrays the tiling.
http://img159.imageshack.us/img159/4186/step5hi6.png[/img]
I’ve made a few small changes, and doesn’t this look a whole lot better? It’s still not perfect, but it’s good enough for the time I spent (roughly 40 minutes, but it’d have been closer to 20 had I not been writing this as well). It’d be perfect for some sort of rough wild grass. Hope you enjoy this tutorial and learn from it.
OK, we’ll be making a cobbled road. This one will probably be better off as an autotile, so we’ll start out with a 92x128 canvas. We’ll make the edges transparent, so that it can go on any kind of terrain. I’ll be using the Steel palette from colormagix. And yes, I know that roads aren’t made from steel, but the palette is perfect for what I want. Feel free to substitute some other palette.
Step 1: Outline
To start with, we’ll draw an outline of the cobbles. Try and keep them roughly equal in size, and don’t forget to make it tileable. If you don’t make it tileable now, it’ll come back and bite you later. Seriously, it’s more trouble than it’s worth.
http://img217.imageshack.us/img217/740/step1wi7.png[/img]
Step 2: Fill and Highlight
Now, we’ll fill it all in with the fourth color.
Next, we’ll highlight each stone with the second color.
http://img221.imageshack.us/img221/9301/step2fb3.png[/img]
Step 3: Autotile Formatting
Next, we’ll copy the center tile into the surrounding eight. Then, we’ll erase the partial outer cobblestones, leaving a more interesting edge.
http://img221.imageshack.us/img221/4730/step3ia6.png[/img]
Step 4: Corners
For this part, I recommend making a new three tile square canvas. Place the side pieces around the edges, and in the centre construct a few cobbles connecting them. After this, place it on top of the centre tile, and erase off the edges, leaving the required piece.
http://img221.imageshack.us/img221/6586/step4ow9.png[/img]
Step 5: Finishing Touches
Make sure that the highlighting on each cobblestone works well, and make any small changes necessary. You’re done!
http://img221.imageshack.us/img221/976/step5mg4.png[/img]
This’ll work over any kind of tile, thanks to the magic of transparency. Enjoy.
Step 1: Outline
To start with, we’ll draw an outline of the cobbles. Try and keep them roughly equal in size, and don’t forget to make it tileable. If you don’t make it tileable now, it’ll come back and bite you later. Seriously, it’s more trouble than it’s worth.
http://img217.imageshack.us/img217/740/step1wi7.png[/img]
Step 2: Fill and Highlight
Now, we’ll fill it all in with the fourth color.
Next, we’ll highlight each stone with the second color.
http://img221.imageshack.us/img221/9301/step2fb3.png[/img]
Step 3: Autotile Formatting
Next, we’ll copy the center tile into the surrounding eight. Then, we’ll erase the partial outer cobblestones, leaving a more interesting edge.
http://img221.imageshack.us/img221/4730/step3ia6.png[/img]
Step 4: Corners
For this part, I recommend making a new three tile square canvas. Place the side pieces around the edges, and in the centre construct a few cobbles connecting them. After this, place it on top of the centre tile, and erase off the edges, leaving the required piece.
http://img221.imageshack.us/img221/6586/step4ow9.png[/img]
Step 5: Finishing Touches
Make sure that the highlighting on each cobblestone works well, and make any small changes necessary. You’re done!
http://img221.imageshack.us/img221/976/step5mg4.png[/img]
This’ll work over any kind of tile, thanks to the magic of transparency. Enjoy.
OK, now for the third and final part of the basetiles tutorial - water. (Well, not necessarily final. If people want me to go over something, I will. But this is it for now)
To begin with, we’ll need a palette to work with. Here’s GR’s water palette - alternatively, you can use your own, depending on what kind of water you want. http://img222.imageshack.us/img222/2474 ... ttedb5.png[/img]
Before we start, we need to understand that there are two different types of water tile. The first is calm water. In this, all animation happens around the edges - if you look at the image below, you’ll see that the center is all just one color. This is to help remove the illusion of a grid, and also because there wouldn’t really be any ripples out there anyways. http://img222.imageshack.us/img222/4353 ... terre0.png[/img]
The second type is a fast(er) moving river. In this, all of the water is animated, not just the edges.
Now that we’ve got that out of the way, let’s start with the river.
Step 1: Basics
Start by making a 32x32 square in your graphics program. This will become the base of our river autotile. Give it a texture, making sure that it tiles.
Here’s a quick one I made, but I’m sure that if you tried you could do better. http://img245.imageshack.us/img245/3849/step1rw2.png[/img]
Step 2: Movement
Copy your texture into a new 96x96 document. Copy&Paste it so it fills all nine tiles. Now, in your graphics program, duplicate the layer three times (you should now have four layers). To convey movement, you’ll have to actually move each layer. I’ll make a river that moves to the left, so I’ll move layer 2 eight pixels to the left, layer 3 16 pixels, and layer 4 24 pixels. This way, the animation will loop nicely. You can change the speed of the river by changing the distance moved each time - just make sure that you have the right number of frames. For example, a 12 pixel move would need 3 frames, a 4 pixel move would need 8, and so on.
Your image, if cycled through the layers, should look something like this.
http://img50.imageshack.us/img50/7542/a ... efttc4.gif[/img]
Step 3: Formatting
That’s all well and good, but it’s got to be put into a map, and it won’t look very good as is. For now, I’ll just use GR’s water to confine it, but in future I’ll end up spriting my own. However, that takes a while, and the difference for this tutorial is negligible.
To begin with, you’ll need this image.
http://img218.imageshack.us/img218/751/overlayje3.png[/img]
Open this in your graphics program. Open a new layer below that, and copy paste your images - first frame to the leftmost section, second to the one to the right of that, etc.
You should now have something similar to this. http://img151.imageshack.us/img151/645/step3cf1.png[/img]
Now import it into your project, and select the white as transparent.
Here are some other examples. I didn’t make them, though.
http://www.gas13.ru/v3/tutorials/example2.gif[/img]
http://www.gas13.ru/v3/tutorials/example3.gif[/img]
Hope this helps you out. As always, I’m open to suggestions as to what I should do next.
To begin with, we’ll need a palette to work with. Here’s GR’s water palette - alternatively, you can use your own, depending on what kind of water you want. http://img222.imageshack.us/img222/2474 ... ttedb5.png[/img]
Before we start, we need to understand that there are two different types of water tile. The first is calm water. In this, all animation happens around the edges - if you look at the image below, you’ll see that the center is all just one color. This is to help remove the illusion of a grid, and also because there wouldn’t really be any ripples out there anyways. http://img222.imageshack.us/img222/4353 ... terre0.png[/img]
The second type is a fast(er) moving river. In this, all of the water is animated, not just the edges.
Now that we’ve got that out of the way, let’s start with the river.
Step 1: Basics
Start by making a 32x32 square in your graphics program. This will become the base of our river autotile. Give it a texture, making sure that it tiles.
Here’s a quick one I made, but I’m sure that if you tried you could do better. http://img245.imageshack.us/img245/3849/step1rw2.png[/img]
Step 2: Movement
Copy your texture into a new 96x96 document. Copy&Paste it so it fills all nine tiles. Now, in your graphics program, duplicate the layer three times (you should now have four layers). To convey movement, you’ll have to actually move each layer. I’ll make a river that moves to the left, so I’ll move layer 2 eight pixels to the left, layer 3 16 pixels, and layer 4 24 pixels. This way, the animation will loop nicely. You can change the speed of the river by changing the distance moved each time - just make sure that you have the right number of frames. For example, a 12 pixel move would need 3 frames, a 4 pixel move would need 8, and so on.
Your image, if cycled through the layers, should look something like this.
http://img50.imageshack.us/img50/7542/a ... efttc4.gif[/img]
Step 3: Formatting
That’s all well and good, but it’s got to be put into a map, and it won’t look very good as is. For now, I’ll just use GR’s water to confine it, but in future I’ll end up spriting my own. However, that takes a while, and the difference for this tutorial is negligible.
To begin with, you’ll need this image.
http://img218.imageshack.us/img218/751/overlayje3.png[/img]
Open this in your graphics program. Open a new layer below that, and copy paste your images - first frame to the leftmost section, second to the one to the right of that, etc.
You should now have something similar to this. http://img151.imageshack.us/img151/645/step3cf1.png[/img]
Now import it into your project, and select the white as transparent.
Here are some other examples. I didn’t make them, though.
http://www.gas13.ru/v3/tutorials/example2.gif[/img]
http://www.gas13.ru/v3/tutorials/example3.gif[/img]
Hope this helps you out. As always, I’m open to suggestions as to what I should do next.
Part 1 - Flowers
Yes, flowers. We’re going to work our way up in terms of complexity, starting from flowers and hopefully ending in trees.
Start with a new 32x32 document. To begin, we’re going to sketch out the petals of the flower first. By now, I’m assuming you can pick color palettes yourself, and don’t need my guidance.
To begin with, draw a roughly star-shaped outline. Try to keep it roughly symmetrical - flowers are all about symmetry.
http://img150.imageshack.us/img150/8093/step1sq3.png[/img]
Now, we’ll need to fill in the petals. Make each petal about two pixels high, and use a light color above a dark color to shade them.
http://img137.imageshack.us/img137/551/step2vz2.png[/img]
That’s not bad. Now, there’s two things we could do. We could copy it around so there’s more than one flower in the tile, or we could make it a more complex flower, and give it a stem. Here’s the first option, superimposed on a grass tile.
http://img137.imageshack.us/img137/9529/step25xo3.png[/img]
Looks alright. I’m going to talk you through the other type anyways though.
To start off, we’ll draw a stem and outline some leaves. Don’t forget that leaves on the bottom will be larger than ones on the top.
http://img137.imageshack.us/img137/1556/step3ze6.png[/img]
Now, to shade it. Fill in the leaves with a lighter color, then add details with darker shades.
http://img146.imageshack.us/img146/8351/step4qa7.png[/img]
That’s almost done, but it needs to cast a shadow. In a lower layer, draw an oval under the flower (the circular marquee tool comes in handy here). Fill it in with your shadow color (usually a dark purple). And hey presto, you’ve got a flower!
http://img137.imageshack.us/img137/3442/step5wy9.png[/img]
Yes, flowers. We’re going to work our way up in terms of complexity, starting from flowers and hopefully ending in trees.
Start with a new 32x32 document. To begin, we’re going to sketch out the petals of the flower first. By now, I’m assuming you can pick color palettes yourself, and don’t need my guidance.
To begin with, draw a roughly star-shaped outline. Try to keep it roughly symmetrical - flowers are all about symmetry.
http://img150.imageshack.us/img150/8093/step1sq3.png[/img]
Now, we’ll need to fill in the petals. Make each petal about two pixels high, and use a light color above a dark color to shade them.
http://img137.imageshack.us/img137/551/step2vz2.png[/img]
That’s not bad. Now, there’s two things we could do. We could copy it around so there’s more than one flower in the tile, or we could make it a more complex flower, and give it a stem. Here’s the first option, superimposed on a grass tile.
http://img137.imageshack.us/img137/9529/step25xo3.png[/img]
Looks alright. I’m going to talk you through the other type anyways though.
To start off, we’ll draw a stem and outline some leaves. Don’t forget that leaves on the bottom will be larger than ones on the top.
http://img137.imageshack.us/img137/1556/step3ze6.png[/img]
Now, to shade it. Fill in the leaves with a lighter color, then add details with darker shades.
http://img146.imageshack.us/img146/8351/step4qa7.png[/img]
That’s almost done, but it needs to cast a shadow. In a lower layer, draw an oval under the flower (the circular marquee tool comes in handy here). Fill it in with your shadow color (usually a dark purple). And hey presto, you’ve got a flower!
http://img137.imageshack.us/img137/3442/step5wy9.png[/img]
Trees.
Yes, the tutorial you’ve all been waiting for.
In this tutorial, I’m going to go over making both a dead tree and a living one. Sound good?
Step 0: Planning
Set up a canvas, and pick your palettes. For this, I’m using a 3x4 tile canvas, but you can use any size you want. Just modify the steps a little.
http://img514.imageshack.us/img514/638/step0zn8.png[/img]
Step 1: Trunk
This is the most important part of the tree. Start with two inwards curving parallel lines. Next, we’ll draw some roots. Start by extending the lines of the trunk you’ve already got downwards a bit. Round them off, and have them return up a little to make roots. Working from those, add two or three more roots to the tree. Make sure that you extend the outline color into the trunk a little.
Here’s a picture with a midtone added so you can see the trunk more easily. You should just have an outline by now, though.
http://img211.imageshack.us/img211/1013/step1tk3.png[/img]
Step 2: Branches
We’re still on outlining, folks, but now we’re working on the branches.
Start by drawing a few curves in the air. These will be the start of the branches.
Here’s what mine looks like so far.
http://img341.imageshack.us/img341/461/step2rh6.png[/img]
Now, we’ll extend the branches a little bit. Make sure that your branches thin as they get further from the trunk. Here’s what my tree looks like now.
http://img144.imageshack.us/img144/8391/step2bve9.png[/img]
Step 3: Fill
Begin by filling in the whole trunk. Now, extend your shadow color up from the roots to give more detail to the trunk. Now, begin giving the tree a woody texture. This can be done using bands of darker color to almost obscure a lighter color. Also, try using a highlight color to emphasize gaps. See that? Looks more like a tree, doesn’t it.
http://img88.imageshack.us/img88/2082/step3rz2.png[/img]
Step 4: Fill (Continued)
Now, we’ll keep on accentuating the texture of the tree. Use bands of shadow and highlight to get the effect you want.
http://img407.imageshack.us/img407/7734/step4ho9.png[/img]
Step 5: Leaves
Finally we get to work on the leaves. Using the outline color on your palette, make a rough outline. Make sure that the lines are organic, and above all avoid straight lines for any real distance.
http://img407.imageshack.us/img407/711/step5cm9.png[/img]
Step 6: Leaves... ContinuedNow we’ve got our outline, we’ll start seperating it. Using your outline color, start dividing up the blank space there into clusters of leaves.
http://img245.imageshack.us/img245/2852/step6mp9.png[/img]
Step 7: Leaves ... again.
Now, we’re finally going to color them in. Using your main color, fill in all the leaves. Now, using a shadow color, shade below each cluster.
http://img502.imageshack.us/img502/1429/step7fg2.png[/img]
Step 8: Finishing Touches
Now, we need to shade the trunk again a little. No point in having the leaves cast shadows on each other if they don’t do the same to the trunk, right? This will give it more of an illusion of depth.
Also, we’ve got to highlight the leaves. Add some highlight to the leaves, mostly near the tips, add a shadow, and you’re done!
http://img205.imageshack.us/img205/6450/step8mo6.png[/img]
Yes, the tutorial you’ve all been waiting for.
In this tutorial, I’m going to go over making both a dead tree and a living one. Sound good?
Step 0: Planning
Set up a canvas, and pick your palettes. For this, I’m using a 3x4 tile canvas, but you can use any size you want. Just modify the steps a little.
http://img514.imageshack.us/img514/638/step0zn8.png[/img]
Step 1: Trunk
This is the most important part of the tree. Start with two inwards curving parallel lines. Next, we’ll draw some roots. Start by extending the lines of the trunk you’ve already got downwards a bit. Round them off, and have them return up a little to make roots. Working from those, add two or three more roots to the tree. Make sure that you extend the outline color into the trunk a little.
Here’s a picture with a midtone added so you can see the trunk more easily. You should just have an outline by now, though.
http://img211.imageshack.us/img211/1013/step1tk3.png[/img]
Step 2: Branches
We’re still on outlining, folks, but now we’re working on the branches.
Start by drawing a few curves in the air. These will be the start of the branches.
Here’s what mine looks like so far.
http://img341.imageshack.us/img341/461/step2rh6.png[/img]
Now, we’ll extend the branches a little bit. Make sure that your branches thin as they get further from the trunk. Here’s what my tree looks like now.
http://img144.imageshack.us/img144/8391/step2bve9.png[/img]
Step 3: Fill
Begin by filling in the whole trunk. Now, extend your shadow color up from the roots to give more detail to the trunk. Now, begin giving the tree a woody texture. This can be done using bands of darker color to almost obscure a lighter color. Also, try using a highlight color to emphasize gaps. See that? Looks more like a tree, doesn’t it.
http://img88.imageshack.us/img88/2082/step3rz2.png[/img]
Step 4: Fill (Continued)
Now, we’ll keep on accentuating the texture of the tree. Use bands of shadow and highlight to get the effect you want.
http://img407.imageshack.us/img407/7734/step4ho9.png[/img]
Step 5: Leaves
Finally we get to work on the leaves. Using the outline color on your palette, make a rough outline. Make sure that the lines are organic, and above all avoid straight lines for any real distance.
http://img407.imageshack.us/img407/711/step5cm9.png[/img]
Step 6: Leaves... ContinuedNow we’ve got our outline, we’ll start seperating it. Using your outline color, start dividing up the blank space there into clusters of leaves.
http://img245.imageshack.us/img245/2852/step6mp9.png[/img]
Step 7: Leaves ... again.
Now, we’re finally going to color them in. Using your main color, fill in all the leaves. Now, using a shadow color, shade below each cluster.
http://img502.imageshack.us/img502/1429/step7fg2.png[/img]
Step 8: Finishing Touches
Now, we need to shade the trunk again a little. No point in having the leaves cast shadows on each other if they don’t do the same to the trunk, right? This will give it more of an illusion of depth.
Also, we’ve got to highlight the leaves. Add some highlight to the leaves, mostly near the tips, add a shadow, and you’re done!
http://img205.imageshack.us/img205/6450/step8mo6.png[/img]
