How to Create an Isometric Pixel Art Tree in Adobe Photoshop

Final product image — What You'll Be Creating

If you have been creating your own isometric pixel town or smaller exterior scenes, or if you're interested in doing so, you will eventually need trees. They're an excellent decoration item to have in your pixel art inventory because they can brighten up almost any scene, and they're just plain necessary for larger towns or cityscapes, not to mention parks and nature scenes.

For the treetop, your first instinct might be to freehand something jagged and irregular so as to achieve a "natural" look, but we'll be avoiding that because a random shape won't look good duplicated over and over again.

We'll try to get the most bang for our buck with our tree design, with a relatively simple, symmetrical, possibly geometric shape that looks organic but remains harmonious when duplicated multiple times.

Check out the pixel art character tutorial if you haven't yet, for basic tips and aesthetic guides as well as the always useful character.

1. Dimensions

We'll make our tree big enough to be more than a shrub but not really huge.

Step 1

Less than twice the height of our character should be enough. Here I've set the heights for the trunk and the treetop.

setting the height of the trunk and treetop

These are loose guidelines, and we may adjust sizes later on.

Step 2

The width of the tree trunk should probably be more than our character's leg. This one has 4 px between the outlines.

Step 3

And this is roughly what the width of the treetop will be.

2. Shapes

We'll make our treetop's shape out of a cluster of ovals. It's possible to go for a simpler shape, like a perfect circle or even square, which assuming the tree has been pruned is perfectly realistic. But the cluster solution will be more natural looking and give us a nice amount of complexity.

Step 1

Here's the base oval we'll use. This is 24 x 18px, but try different sizes if you want.

You could make the oval with the Elliptical Marquee Tool (anti-alias off). Then you could fill it with the outline color and contract the selection (Select > Modify > Contract…) by one pixel to fill in with green. But I preferred drawing my own oval with the Pencil Tool to have a slightly squarer and less jagged shape.

Step 2

We'll use the same oval again to add to our cluster. We'll be doing three ovals at the top and five at the bottom.

Step 3

Try as many alternatives as you like for positioning the ovals. This row will have three.

Step 4

The third oval in that row will be slightly lower to give the whole cluster a bit more dimension.

Step 5

Finally add a couple for the bottom but have those underneath the ones already finished; you can paste them in a new layer, move the layer below the original one and then merge down.

Step 6

Remove the guidelines.

Step 7

Since the bottom makes quite a wide rounded rectangle I softened the curve for it a little bit, just above the trunk here:

3. Shading

We got the basic shapes of our tree down, so now let's work on the shading to get the volumes of our tree across.

Step 1

We can get rid of most of the inside oval lines; it's easy enough to remember how we'll shade them. For now we'll only keep the lines for the row with three ovals.

preparing to shade the treetops lightest areas

Step 2

As usual, the top of our shapes will be the most lit areas. This shade is 10% brighter and also has a slightly warmer hue.

Step 3

Apply the same previous shade but to smaller areas on the sides of the lower two ovals.

Step 4

Add a little bit more of that shade only on the center oval of the row with three ovals.

Step 5

Now we add a darker shade to cover more than half of the three ovals. The shade is 10% darker than the main tree color and has a slightly cooler hue. Try variations as you see fit.

Step 6

And the last shade for the treetop will go on the bottom area. Again, the shade is 10% darker than the previous one and has a slightly cooler hue.

Step 7

Let's add some brown for the tree trunk. Try alternative colors as you like, and remember you can easily try color variations with the Image > Adjustments > Hue/Saturation… sliders.

Step 8

Finally add some shading to the trunk. It should be darker just below the treetop because of the shadow the treetop should cast. Against the edges it may be darker or lighter as you prefer. Here it's darker:

4. Dithering / Patterns

Dithering is the use of patterns to ease the transition from one color to another. It's quite commonplace in pixel art, although for the isometric style I use, I tend to keep it to a minimum. In this case we'll be using it and making it oversized so that as well as softening our shading, it will also give our tree a leafy texture. That's a win-win for us!

Step 1

Usually dithering patterns employ individual pixels, but as I said, we'll be making our patterns oversized. So as you should notice here, the dithering uses chunks of 4 pixels at a time as well as blocks of 2 pixels stuck together. Try to imagine having to respect a checker grid.

Work while zoomed in and check on your progress by zooming out. Are the results to your liking?

Step 2

Here I have applied more dithering to one of the lower light areas. The pixels of this pattern have gotten smaller, but I'm still respecting a checker grid as I did with the top area.

Step 3

Once you're happy with how that area looks, copy it to the other side and apply the same process to the last bit of highlight, the one in the middle oval.

Step 4

Do more of the same dithering for the middle section, where we go from the main green to the second darkest shade.

Step 5

Here the dithering is applied to one of the sides of the trees, slightly higher than in the middle to separate the volumes and give the tree a rounder, fuller look.

Step 6

Then add a few darker pixels to accentuate a break between this side area and the middle oval. That'll help give the tree the cluster look we intended.

Step 7

Once that area is finished, you can just duplicate it, flip it, and place it on the opposite side.

Step 8

Finally, pull the same trick on the darkest shade of green.

Step 9

And to add texture to the tree trunk you can, on a new layer, do a simple, smaller grid pattern in black and lower the opacity to below 20% before merging down.

That should help give our tree trunk a bark texture.

Step 10

As a final step, make the bottom outline on the trunk a little bit lighter and add a round shadow cast by the treetop which should be black, set to about 10% opacity.

Tree Done!

Our tree is now ready to be pasted onto any environment, where it will mix in nicely and brighten up the place!

Place one in front of each house you make, or paste a bunch to create a forest or fill up a park. Change the hue/saturation of the treetop and give the tree fall colors, or simply get a bunch of shades for the sake of variety. Hopefully you'll find this element highly recyclable and thus a very valuable item in your pixel art inventory.

Good luck and keep growing!

Image may be NSFW.
Clik here to view.

1. Dimensions

Step 1

Step 2

Step 3

2. Shapes

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

3. Shading

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

4. Dithering / Patterns

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Tree Done!

Trending Articles