HOW TO QUICKLY SPRITE A TREE (VX STYLE)
A short pixel art tutorial with minimal effort to make trees which fit with the style of VX/Ace.
Caz- 09/10/2012 09:10 PM
Welcome to my first tutorial! I hope I don't write in such a way as to confuse and/or bore you to death! On that note, please enjoy! :D
For this I recommend you use GIMP, as I'll be showing you a few features of the program which I'm uncertain can be gotten in Photoshop, etc. or what the corresponding names are in other programs. If you know them, feel free to use them! If not, GIMP is a fantastic (and free) image manipulation tool which I highly recommend.
Let's get down to it!
Open up a new canvas and get your tools ready - AKA, get the pencil tool. It's difficult to miss, it's a little icon which looks like a pencil. Set it to the hardest density and make it 1.00 in size.
To begin with, we'll want to make a palette for the tree's trunk. Despain goes into a lot of depth on choosing the correct palette HERE so you might want to check that out if you're uncomfortable making one. If you've still got no clue, feel free to steal some colours from VX's RTP. If anything, that would match a lot better and save you some time! This is the palette I used for my trunk:
It might be a good idea to make a grid by going to View > Show Grid and then Image > Configure Grid. Make the grid 32 x 32, as this is the same size as the tiles in VX.
Now get that pencil tool out and choose your darkest colour on the palette. Make a small, round-ish blob for the base of your tree. From that, draw it stemming up and split it off into two (just to keep things simple for now). Then add some little branches here and there. Don't worry about making this too 3D at the moment, because we'll add depth to it when we add the rest of the colours. For now, picture it as a shape in the dark with no light cast upon it.
Now that we've got our shape and we're happy with it, we can start to add that depth we talked about! Get the ink tool out. It looks like this:
Just as I've done, make the ink blots very small - only 0.5, as we'll be adding very small details. Choose the next colour up on your palette and slowly wiggle the ink tool back and forth over the trunk. Leave a few gaps here and there to make it look more like uneven bark.
Do the same with the next lightest colour up, but keep it closer to the left side. Imagine the light source is coming from the left, and hardly any light is getting at the bits of bark in the little crevasses and to the other side of the tree. Do the same with the last colour, again being sparing with its use just to show where the light catches the tips of the bark. As you can see, I've edited my trunk halfway through to add a few roots to the ground. You can do this if you want to have a particularly aggressive tree, but don't worry if you want something a bit more tame.
This is where things get a bit strange, I'm afraid. I picked out a new palette for my leaves which go from a dark, almost blue green to a light, almost yellow green.
Using my trunk as a base and the darkest green, I drew a squiggly outline with the ink tool for some leaves that would be one tile wide and two tall. I then threw in a few splotches of a slightly lighter green, as if to show that this big blob was made up of tiny circles. I continued this with my colours until the circles became much more spherical. Now, I bet you're thinking this looks weird and highly not-tree-like.. and I'm inclined to agree with you.
What have I done?! Well, I made a new layer. On that layer, I pasted my weird, green-sphere pattern in clumps over the top of the trunk. As you can see by my picture, I also rounded up the edges and painted them in with the same colours just to make it a bit more.. well, round.
If I want nice, small leaves, I'll draw a grid (freehand, naturally) over the top of the leaves using the darkest green colour. Now is the part where it becomes more tree-like, I promise. Select the area your leaves are in and click Filters > Noise > Spread. I normally spread my leaves by about 5-7, but you can use what you like to get the effect you want. Click okay, and there you go! But now it just looks all pixelly and bad. I use Filters > Blur > Gaussian Blur and blur it by 1. I then do the exact opposite and use Filters > Enhance > Sharpen to bring the colours out a bit more, and in the effects window I set it to use anywhere from 50-60 for this. So long as it doesn't make the colours too bright then it's fine.
Looking better, aren't we? But he's gotten a bit too square! Here we can use our mad topiary skills and get the eraser out to give him a bit of a trim. Make him look more evened out using a very small eraser, jabbing at the edges to keep that rough line around the tree.
Our next friend is Mr. Gradient-Tool. He looks a bit like this:
Get your darkest colour from the tree's leaves and make a new layer. Make a selection box around your tree and use the gradient tool to get at the edges of the tree like the picture below. You can paint a gradient-line atop another gradient-line to make a curve like I've done.
On this layer, select the 'Hard Light' mode like this:
Then merge the layer down onto the leaf layer and it should wrap itself to just the leaves, not the trunk. You can use this same method to make a light spot on the other side of the tree by using the lightest colour, making a gradient on a new layer and using something like the 'Addition' mode (or whichever you feel looks best!).
Here's the final result. I used the Hard Light effect on the trunk of the tree to get a similar effect with the shadow. If you'd like, you can make a shadow on the floor under the tree by making a layer under your trunk layer, making a small circle selection, going to Select > Feather and feathering it by about 5. Then use the paint can to fill it with black and use your layer opacity to turn it down to about 30% visibility.
You can even add some fruits or flowers to your tree:
And after a bit of tweaking to fit with the style:
Well, I hope this has helped anyone who starts to feel nauseous at the idea of spriting a tree pixel by pixel, or anyone who just fancied a quick read. Thanks for taking the time to go through all of this!~ <3
For this I recommend you use GIMP, as I'll be showing you a few features of the program which I'm uncertain can be gotten in Photoshop, etc. or what the corresponding names are in other programs. If you know them, feel free to use them! If not, GIMP is a fantastic (and free) image manipulation tool which I highly recommend.
Let's get down to it!
Open up a new canvas and get your tools ready - AKA, get the pencil tool. It's difficult to miss, it's a little icon which looks like a pencil. Set it to the hardest density and make it 1.00 in size.

To begin with, we'll want to make a palette for the tree's trunk. Despain goes into a lot of depth on choosing the correct palette HERE so you might want to check that out if you're uncomfortable making one. If you've still got no clue, feel free to steal some colours from VX's RTP. If anything, that would match a lot better and save you some time! This is the palette I used for my trunk:

It might be a good idea to make a grid by going to View > Show Grid and then Image > Configure Grid. Make the grid 32 x 32, as this is the same size as the tiles in VX.

Now get that pencil tool out and choose your darkest colour on the palette. Make a small, round-ish blob for the base of your tree. From that, draw it stemming up and split it off into two (just to keep things simple for now). Then add some little branches here and there. Don't worry about making this too 3D at the moment, because we'll add depth to it when we add the rest of the colours. For now, picture it as a shape in the dark with no light cast upon it.

Now that we've got our shape and we're happy with it, we can start to add that depth we talked about! Get the ink tool out. It looks like this:

Just as I've done, make the ink blots very small - only 0.5, as we'll be adding very small details. Choose the next colour up on your palette and slowly wiggle the ink tool back and forth over the trunk. Leave a few gaps here and there to make it look more like uneven bark.

Do the same with the next lightest colour up, but keep it closer to the left side. Imagine the light source is coming from the left, and hardly any light is getting at the bits of bark in the little crevasses and to the other side of the tree. Do the same with the last colour, again being sparing with its use just to show where the light catches the tips of the bark. As you can see, I've edited my trunk halfway through to add a few roots to the ground. You can do this if you want to have a particularly aggressive tree, but don't worry if you want something a bit more tame.
This is where things get a bit strange, I'm afraid. I picked out a new palette for my leaves which go from a dark, almost blue green to a light, almost yellow green.

Using my trunk as a base and the darkest green, I drew a squiggly outline with the ink tool for some leaves that would be one tile wide and two tall. I then threw in a few splotches of a slightly lighter green, as if to show that this big blob was made up of tiny circles. I continued this with my colours until the circles became much more spherical. Now, I bet you're thinking this looks weird and highly not-tree-like.. and I'm inclined to agree with you.

What have I done?! Well, I made a new layer. On that layer, I pasted my weird, green-sphere pattern in clumps over the top of the trunk. As you can see by my picture, I also rounded up the edges and painted them in with the same colours just to make it a bit more.. well, round.

If I want nice, small leaves, I'll draw a grid (freehand, naturally) over the top of the leaves using the darkest green colour. Now is the part where it becomes more tree-like, I promise. Select the area your leaves are in and click Filters > Noise > Spread. I normally spread my leaves by about 5-7, but you can use what you like to get the effect you want. Click okay, and there you go! But now it just looks all pixelly and bad. I use Filters > Blur > Gaussian Blur and blur it by 1. I then do the exact opposite and use Filters > Enhance > Sharpen to bring the colours out a bit more, and in the effects window I set it to use anywhere from 50-60 for this. So long as it doesn't make the colours too bright then it's fine.

Looking better, aren't we? But he's gotten a bit too square! Here we can use our mad topiary skills and get the eraser out to give him a bit of a trim. Make him look more evened out using a very small eraser, jabbing at the edges to keep that rough line around the tree.

Our next friend is Mr. Gradient-Tool. He looks a bit like this:

Get your darkest colour from the tree's leaves and make a new layer. Make a selection box around your tree and use the gradient tool to get at the edges of the tree like the picture below. You can paint a gradient-line atop another gradient-line to make a curve like I've done.

On this layer, select the 'Hard Light' mode like this:

Then merge the layer down onto the leaf layer and it should wrap itself to just the leaves, not the trunk. You can use this same method to make a light spot on the other side of the tree by using the lightest colour, making a gradient on a new layer and using something like the 'Addition' mode (or whichever you feel looks best!).

Here's the final result. I used the Hard Light effect on the trunk of the tree to get a similar effect with the shadow. If you'd like, you can make a shadow on the floor under the tree by making a layer under your trunk layer, making a small circle selection, going to Select > Feather and feathering it by about 5. Then use the paint can to fill it with black and use your layer opacity to turn it down to about 30% visibility.
You can even add some fruits or flowers to your tree:

And after a bit of tweaking to fit with the style:

Well, I hope this has helped anyone who starts to feel nauseous at the idea of spriting a tree pixel by pixel, or anyone who just fancied a quick read. Thanks for taking the time to go through all of this!~ <3
Posts 

Pages:
1
Thanks guys, I'm glad you found it to be of use! ^^ I'd love to see anything anyone makes using this!
the gradient seems unnecessary. The leaf clusters themselves should be lighted individually like you did before.

from an old sprite analysis tutorial


from an old sprite analysis tutorial
The old sprite has a darker side which was achieved in the tutorial with the gradient that you say is unnecessary. Maybe I am not understanding something?
But thanks for the feedback anyhow! Maybe in a later tutorial, I'll actually learn how to properly sprite trees and teach other people using some of the techniques (which will hopefully include properly shading the leaves).
EDIT: Disregard everything I just said! Using what Darken said, I changed the gradient slightly.. When making the lighter gradient, I used the Spread filter (just like with the leaves) and moved it around a little until I felt comfortable with its position, and I made the layer effect Grain Merge and it has come out significantly better with minimal effort!

Thanks for the advice, Darken! The lighting looks to be spread out a lot better over the leaves now.
author=Galv
The old sprite has a darker side which was achieved in the tutorial with the gradient that you say is unnecessary. Maybe I am not understanding something?
The old sprite did not use a gradient it is called basic shading. Irl when a light hits something the light does not gradually become dark it just stops being lit depending on the edges. Though round/soft edges create a gradual effect it is not as simple as a photoshop place gradient here.
I know it's just a tree but i just like to discourage the beginner habit of using stock gradients.
I don't think using gradients is all that bad if done well, especially if you're very new to things like trees. There's nothing to say you can't break out of the habit of using them either, but it's a decent enough placeholder in the meantime. Due to the detailing of trees, they're really difficult to make but pretty much necessary in a lot of fantasy RPGs. They're like the drawing hands of the video game world.
What I mean to say is: this is in no way meant to be the perfect example of a tree or how lighting actually works, but for something that takes five minutes for a total newbie to do then it just about gets the job done. For someone who wants to advance further, then I don't really recommend this tutorial to them.
What I mean to say is: this is in no way meant to be the perfect example of a tree or how lighting actually works, but for something that takes five minutes for a total newbie to do then it just about gets the job done. For someone who wants to advance further, then I don't really recommend this tutorial to them.
Yellow Magic
I'm the Dawg, so that's what you call me. Or maybe His Dawgness, or Dawger, or El Dawgerino if you're not into the whole brevity thing.
1363
Hopefully this should prevent wanton theft
EDIT: Ancient RM jokes aside, this is a pretty neat tutorial! I can't sprite for shit but I'm sure this will be a handy guide for the more adventurous out there.
EDIT: Ancient RM jokes aside, this is a pretty neat tutorial! I can't sprite for shit but I'm sure this will be a handy guide for the more adventurous out there.
Pages:
1














