The Art Hater’s Guide to Sexy Trees

Posted by (twitter: @mkarpd)
April 21st, 2015 7:48 am

Hi all! Today I’m going to give you lovely people a quick guide to how I accidentally made the trees the prettiest thing in my game.

Art is hard. It takes a lot of time. Don’t even get me started on animations, tilesets… it’s all such a massive timesink, and for us art amateurs, it doesn’t ever seem to pay off either.

One pet peeve of mine for a while was background decoration. And by “Background decoration”, I’m talking trees and grass. And by “Trees and grass”, I mean trees.

Yeah, look at those giant smug amalgamations of bark and leaves. Challenging you with their complex shading requirements. Such jerks…

So how can us mortals hope to compete against such a cruel and mighty foe? Well, anyone who’s done programming for Ludum Dare knows that the code will be full of hacky solutions that somehow work. Well guess what! Art has hacky solutions too, and today, I’m going to tell you how I hacked these lovely things together:

Are you ready to learn? You better be, you’re about to face the greatest tool of the tree architect.

Behold! This is a grass texture:

How did I make this grass texture? First I chose three greens: a light, a medium, and a dark, . Then I painted it all in the medium shade. Then I drew a lot of small random shapes with the light colour. Then I underlined the shapes in the darker shade, which I did in an intentionally sloppy was, so it looked more varied than what it would’ve looked like had I underlined it all with the same thickness. Give it a shot, heck if you’re feeling uncertain, copy the colours I used! It’s surprisingly easy!

So you can use this as your grass. “That’s great, Crumpet,” I hear you say, “but you said you were going to teach us how to make trees, not grass! Where are the trees?” To this I reply, “What are trees, but grass on sticks?”

I’m not kidding.

The first step is to take your grass texture and delete the middle shade of green. This should leave you with this:

See? Leaves!

It’s looking a bit sparse though… Our next step is to clean off some of the leaves from the side. We want our leaves to be round.

If you want, you can also recolour your leaves. You know, so they don’t look the same as your grass. I did mine in pink and darker pink because cherry blossoms.

Prepare yourselves, this is where it gets technical. As I said, this tree is sparse, so we must harvest the most advanced technique known to our species.

Copy and paste it onto itself a load, moving it around a bit.

Phew! That was hard… Don’t worry, the next step is easier. Use some tool (many pieces of graphic software have this built in) to just apply a 1px wide black outline to the whole thing.

Ta dah! Leaves!

This next bit is probably the only actually challenging part of the process. You need a trunk. Harness all your art skills and draw something that looks kind of like a stream of brown liquid hitting the ground. The top part doesn’t need to be good, it’ll be covered in leaves, but make some nice roots.

Automatically outline the whole thing in black. Do an inner outline of a darker brown, and make this inner outline thicker on the bottom and right corners. Ignore the top of the tree. Do the shading sloppily (I did this one left handed), it makes it look more detailed.

Throw your leaves on top of it, and ta-dah!

If you want to make more variants, use the same trunk and remake some leaves with the copy paste technique. And that’s all it takes to become a master of forestry!

Remember, there are hacky solutions to all problems! Go forth and find them!


4 Responses to “The Art Hater’s Guide to Sexy Trees”

  1. OmnipotentPotatoDEV says:

    It reminds me of that tree ring from RotMG.

  2. Will Edwards says:

    Would look that little bit better if you draw them from their component parts and add slight random offsets to each individual tree :)

    • Crumpet says:

      Aah, smart thinking! That would look nice!

      Plus then you can make your trees shake too, which could be useful for some games. More options is always great.

  3. Joris says:

    Thanks for the tips. This will definitely come in handy someday.

Leave a Reply

You must be logged in to post a comment.

[cache: storing page]