In this series of articles, I introduce you to some basic techniques and art knowledge needed to represent and conceive nature in a pixel art game. In case you have missed Part 1, you must read it first for a better understanding of the following parts.
In part 2, we will talk about Grayscale, Multiple simultaneous attempts, Shadows, Depth, and some Lighting, providing some examples of stone and rock objects, and keep talking about all the fundamentals approached on the previous part. You will learn how to build your art from scratch by building stones and polishing them over time with some tips I’ll provide. I’ll have to assume you already choose your software, and your desired resolution to work, for this tutorial I’ll choose a 32×32 style because it is very common and maybe will suit your needs.
Step 1 – Grayscale
Before we draw our first shapes, let me introduce you to grayscale, a palette with no hue values, where we usually go from values next to black color to values next to white color. By getting free from the distraction and complexity of hue values, we can achieve the lighting and depth we desire as soon as possible, by using the correct vibrance and saturation, then applying hue later on. Try to use this approach on your sketch, instead of going directly with colors that have hue values, and see the difference!
I’ve made this palette for you, feel free to use it for this tutorial and next ones too.
Step 2 – Multiple simultaneous attempts
Now let’s draw our first shapes by using an effective approach to practice art that I call “multiple simultaneous attempts”. You can apply this approach to almost any situation when you need to represent an object but don’t know exactly how you want it to look yet. That’s why you draw multiple attempts simultaneously to compare them and exercise your techniques at the same time.
Get some references and draw four shapes that resemble stones, by using the darkest color of the greyscale palette, like that:
We are going to polish each of them, resulting in four different finished stone variations to use in our games.
Step 3 – Shadows
Since stones are very irregular and have some surfaces that pop up, before we start working on our shapes, we need to learn about shadows. I like to say there are three types of shadows, shadows that are intrinsic to the object shape we call self shadow, shadows caused by the contact of two or more surfaces we call contact shadow, and shadows projected by objects we call projected shadow.
Here’s an illustrated top-down view example on each of them, represented by two card boxes in daylight:
- Self shadow: in this example, this side of the card box object is darker because the source of light comes from the top and from behind it, so this part is less accessible for light.
- Contact shadow: in this example, you can see some shadow being generated on the ground, caused by the proximity from these two card boxes, making it harder for the sunlight to reach there.
- Projected Shadow: in this example, a shadow is projected in the opposite direction of the light source. The shadow goes on the ground, from right to left, since the light source is coming not only from the top but also from the back of the object, and it’s not centered since the sun it’s a bit to the right at the moment.
Step 4 – Depth and lighting
Well, after the shadow explanation, it’s time to get back to the shapes we previously designed and give some depth to them! Do you remember that I said stones are very irregular and have some surfaces that pop-up? We can express that by adding some shapes inside our initial one, with a
lighter color. Pick the next color of the palette, at the right of the darkest one, and draw some big shapes inside the initial one, and make them separated by a thin line if you want subdivisions, look at the example:
Now things get more complicated. I’ll need your attention here. In the case below, we have a daylight scene where the light comes from the top, behind, and left. Use the next lighter color to give some light to the points that are most hit by the rays of your light source. Remember Step 3, when we talked about projected shadow? Maintain some of the previous colors around the popups, to express this effect.
Try to get a result like this, don’t worry if it doesn’t come that fast. Keep trying before proceeding further:
Now, use our brightest color to emphasize where the light is coming from, by adding thin lines of light around the extremities, where is most affected by light:
Remember what we learn in the Part 1 of this series about making the outlines lighter according to the light source? We can make that here too, it just won’t have that impact because we are working with a tiny object, and we don’t have many colors to improve the effect, here’s the result anyway:
Step 5 – Color
We have almost finished our sprites, let’s add some hue values to them to make them even prettier! Pick a color with hue, and reduce its alpha value by a lot, and apply it with paint bucket tool on every pixel of your art. Experiment with colors and alpha values, don’t hesitate to give it a few tries before getting satisfied with the results. I’ll apply a different color for each variation I’ve done.
Step 6 – Bounce light and Projected shadows
Now, let’s reproduce an effect called bounce light and see the results:
- Pick the ground color, reduce it’s alpha to a very minimal value like you did before.
- Apply that to the bottom right extremities of our object to simulate that the light hit the ground, got influenced by the ground color (blueish color in our example), and hit our object back.
To finish your sprites, don’t forget to project shadows of the object on the ground. Try to look and think about the object shapes when doing that:
Final considerations and tips to exercise
Thanks for reading this article. I hope you liked this tutorial, I’m happy with your dedication! To exercise, I’ll ask you to try different styles of stones, with different shapes and colors. Look for some photos on the internet to use as reference and apply these techniques to represent them, and don’t forget to use multiple simultaneous attempts technique. I wish you luck with your journey. See you in the next part of this series!