Posted by: Ocean's Dream | January 22, 2008

Tree tutorial


We’ve been mostly working with the left side of the chipset. Now we’re going to jump over to the right side of the chipset, with all the pink. First, you’ll want to determine how big your trees are. If it’s an NES style chipset, a 16×16 tree could work. Otherwise, you’ll usually want it to be at least 3 tiles tall, I go for around 4 or 5, and 3 tiles wide. It’s all up to you, really, you could even do just 1 tile wide, like FF6.

Before we actually start going into trees though, we’ll go over curves. Curves aren’t exactly easy to pull off in pixel art, especially if you’re not using a circle tool. Usually you end up making diagonals instead of the curves you want.

For curves, think about slopes. In this example, I made a 16×16 curved line that I enlarged to 96×96. So, it starts off with a 4 pixel line. Then a 2 pixel line. Then goes all the 1 pixels in between. At the end of the slop, 2 pixel line, then a 4 pixel line.

Another example. Looking at the circle tool is actually helpful for learning how to make curved lines.

Before I go into Tree tutorials, here’s one by East in a topic long time ago:
http://www.gamingw.net/forums/index.php?topic=38160.msg561539#msg561539

Now, I’m going to use up a 3 tile width and 5 tile height for the tree. You can experiment with any height, though I’d recommend you don’t go too tall because of the limited tile space. Feel free to experiment with horizontal trees as well, it is after all only limited by what you think up (And the tileset restrictions again).

You are free to make whatever design you want for them. I recommend going to Google images and looking up various trees. Try looking up a Baobab Tree for fun. There are plenty others too. Here’s another thing to consider: What colors will you use? You may be thinking brown and green. Well, you could for some trees. Try going outside and observing various trees. You’ll notice that some of them don’t even really have brown trunks. You don’t have to stick with green leaves either. You could even do Purple if you want.

I’ll start with the tree trunk first. I’m taking the pencil tool and just drawing out the basic shape. I’ll fill it in with one dark brown color, the same I’m using for the outline. In the bottom of the trunk, I’ll put in some transparent pixels. This is so that it looks like the trunk isn’t completely going over all of the grass. You could also just draw the grass directly on there if you’d like. If you’re wondering about the detached part, it’s because roots sometimes go under the ground and back over again.

There are a few ways to do the leaves. First, as it is done in the East tutorial, make one batch of leaves that will be tiled over. I have one made here:

And then tiled onto the tree. I made some of the branches stick out a bit.

Or you can draw the leaves in kinda like how you did the trunk, with one flat color.

In this case, remember that it’s not really a good idea to draw out every single leaf. It’s unnecessary. Also, the trees tend to go from light at the top to darkest at the bottom. The middle of the tree should be the brightest, because it sticks out most. The make the tree have more depth, you should have the middle the brightest while the sides would be darker. I skipped a few steps here because I forgot to save them, but I think you get the point.

Take a look at this tree so you see what I mean: (Not made by me)
Tree example

Add a midtone to the trunks. Check out tree textures, or make your own. I encourage you to play around with making textures with the colors, you can make horizontal stripes, vertical stripes, diagonal stripes, curved lines, whatever! There are 2 curved lines in here that were based on the slope thing I did earlier.

Then, adding a highlight.

Here’s the resulting map and chipset:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: