The meaning of this article is to introduce some basic techniques and art knowledge needed to represent and conceive nature in a pixel art game.
When you’re starting with art and particularly pixel art you, may struggle on representing your ideas and end up missing details or adding too much of them, making the art noisy to the eyes. If you ever experienced that, and feels like art is not for you, this article is here to help you.
Here you will learn on how to build your art from scratch by building a pine tree, and polish it over the time with some tips i’ll provide. I need to assume you already choose your software, and your desired resolution to work. For the purpose of this tutorial i’ll choose a 32×32 style, because it is very common and maybe will suit your needs.
Step 1 – Basic shapes
A good practice to sketch our art, is to use elementary shapes like circle, square, triangle, and rectangle. You can refine these shapes later, by combining them, and making more natural forms.
One of the benefits of starting simple and following step by step composition, is to build your art gradually. Trust me, you don’t want to be in the polishing step of your object to discover the shape isn’t that good yet.
Let’s start simple by using two basic shapes, a square and some sort of triangle, with the colors we imagine when we think about trees. Add some black outlines to your composition, because outlines usually represent solidity and a tree is a very solid object.
This is the result for now, we’ll be adding more details later.
Step 2 – Lighting and Hue shifting
Let’s learn our first lessons about lighting, and hue shifting:
In art, we call lighting the attempt to reproduce the effect of illumination at our object. In our example this illumination comes from daylight, the sun. Because our light source is the sun, since it comes from above our object, we want to make our object lighter on the top.
By hue shifting colors, we mean to achieve a more natural look by making the color of the object change according to the effect of illumination. In our example, the source that will illuminate our object, the sun, have a yellowish color, so the more lighter that part of the object is, the more affected by yellow it should be.
So, by combining these two concepts, we can conclude that our example tree should go lighter and more yellowish, as it reaches the top. Now, let me teach you how to proceed to reach this effect.
In your desired software, choose the Eyedropper Tool and pick the base color you started with for the top part of the tree. With the color in hands, go to your hue, saturation and vibrance bar and build a gradient progression like the image below, increasing vibrance, reducing saturation, and changing the color hue towards yellow.
At the left we have a gradient progression that only increases vibrance and reduces saturation, without hue shifting towards yellow. Since i’ve started with a blueish green, my entire tree would be very blue. At the right we have a more natural progression, by changing color hue towards yellow:
Now apply your new palette to the tree, using darker colors for the bottom, and lighter ones as it progresses to the top of the tree, here’s the result with and without hue shifting:
Step 3 – Dithering
Now, let’s talk about Dithering.
It’s an old technique that aims to achieve a gradient using a minimum of intermediate colors, invented when screens were too primitive to display more than a few colors. It’s easier to understand by looking at the technique on the example below.
For representing a tree, you can choose to keep this dithering very organized, or in a more random way, to simulate leaves. This is a particular choice, I go for a more random approach, making the colors invade each other space, and here’s what my result looks like:
Step 4 – Advanced Shapes
This is where things get more advanced, let’s give the top part of our tree more details by adding some pointy shapes here and there, to simulate leaves. For this step, do not fear to get creative, and to give several tries before getting satisfied, to assure you get the best results.
For a better visualization, here’s the shapes used on our example tree:
We are pixelating a pine tree, so make the leaves reach longer on the bottom, and make them shorter as it progresses towards top. Give some love to the trunk too, making it feel more rooty.
Step 5 – Fine tuning
Our tree is almost finished, but let’s give it some more depth by repeating some previous learnings:
- Make sides more lighter by bringing lighter colors from above to darker areas vertically.
- Pick your black outline color, and reduce the Alpha to a very low value, and shade the bottom leaves.
Make a gradient on outlines too, like we saw on Step 2, using darker colors for the bottom, and lighter ones as it progresses to the top of the tree.
You can utilize the colors already applied on the tree, like the example on the image below:
Now, use the hue shifting technique to improve the trunk too, by picking the base brown color, increasing vibrance, reducing saturation, and changing the color hue towards yellow.
Our finished art looks like this:
“We don’t make mistakes, just happy little accidents.”Bob Ross
Some more tips and how to exercise
Thanks for reading this article, I hope you are happy by finishing your first tree, I wish you to be always getting better on what you do. Try different styles, look for some art on the internet and try to see how it’s made and reproduce it’s technique, there is a lot of ways to do a tree.
Here’s a new way for you to try, a quick asymmetric, non-outlined example, with the leaves made by using spray tool:
And here’s another style, built by using pre-made shapes of leaves:
These images are just to give you an idea, try to reproduce these styles without looking at them, get creative, make some improvements and compare results. Wish you luck on your art journey, see you on the next part of this series!