Map Artwork Workshop with Hika! 🌲🌱🌳 (Patreon)

Hi, it’s Hika again!!  ✨

I’m AstralShift’s background artist and I will be hosting this month’s workshop! Hope you enjoy it and if you have any questions you can always @hika on discord’s Parlor server! ^o^

On this workshop I will be taking you through the step by step process of making the most recent map I’ve worked on and explain my thread of thought throughout.

In this case, this map is a little bit different from the maps we are used to. This time, we decided to go for a “side-scroller” map to make it to look more like an interactive illustration.

1. Brainstorming

In this first step is where we gather references. 

For this map we wanted to give the forest some depth and wonder. As a transitional map, it helps in expanding the distance between Elise’s home and Kieferberg in order to give the player a better grasp of her daily commute between the two locations. The different flora makes it contrast a little with the environment surrounding other areas of the game, which adds to the feeling of wonder we want to go for!

Now that we know what we want, gathering references is a very important and crucial part of the job! Our main inspiration are Studio Ghibli’s and 2D Disney’s backgrounds. 

Here are some examples below:

Akage no Anne, 1979

Arrietty, Ghibli, 2010

Mononoke Hime, Ghibli,1997

2. Sketching, Composition and Color Placement

This is probably the most important step of the whole process!

Good shading and rendering of the world can’t save a bad composition, or drawing, so we must be cautious and patient while sketching out our ideas in order to achieve the best results early on.  

Believe me, I know the urge to paint sometimes is really overwhelming and you may catch yourself starting to paint after just a few lines, but that won’t help you in the long run!

For instance, looking at these Ghibli sketches we can see they’re really well structured - all important details are highlighted in a way that makes it easier to spot both the shapes and the contrasts. Refer to the picture below for a better understanding of this.

Spirited Away, Ghibli, 2003

When sketching, there are a few elements to be taken into consideration. 

When it comes to composition, for example, there must always be a background, a middle ground, and foreground. This will always boost your composition, giving it a sense of tri-dimensionality and depth that wouldn’t be present otherwise. Looking at the final product, you can see the foreground, the middle ground, and the background which is something that happens a lot in animation, as it helps a lot in parallax. 

This concept is also referred as “multiplane camera” by classic studios like Disney.

Normally I do two sketches. To the first sketch I recommend dedicating no more than around 15 to 30 minutes since it’s only a quick sketch where the most important thing is the placement of the objects in the composition. It should be a fast process so that you don’t get too attached to it, which can cause you to become fearful to make heavy changes that may sometimes be necessary. 

Here is my first sketch below:

When I’m satisfied with the composition, I scale it down to a thumbnail size and start laying down colors. 

I think this step is really important because when you look at a small version of your illustration and it looks “finished”, or “in the right path”, it means that the contrast and the colors that you are laying are good! 

When I get to this stage, creating depth and atmospheric  perspective is really important.

As you can see in this photo below, the mountains that are farther away are blurry, therefore more blended with the background. The further away the objects are, the more blended and less detail they have, which is what gives off the impression of depth! 

Sometimes it’s easy to think everything has to be detailed to look finished, but often times it’s quite the opposite - there must be a balance between the details and the rougher portions of the map so that it doesn’t become too overwhelming.

After I have the quick sketch and the colors, I go back to the real size drawing and I will start the second sketch, where I’ll try my best to clean up the shapes. I try to think of this sketch as a guideline for the final painting process, so every line is made in order to help with the shading. 

Below is the final sketch:

3. Rendering

Now that we have the sketch and the colors laid down, we will start working on rendering the images - the keyworks here are texture and detailing. 

When it comes to Little Goody Two Shoes, one thing I always have to take into account is the fact that the maps will be subjected to multiple different types of lighting depending on the time of day. What this means, is that the base map should be painted in a neutral way without too many strong light sources, or shadows, so that when the time comes to edit the map into a sunset, for example, it’ll be easier to adjust the colors to fit the map and give it the desired atmosphere. 

I normally start painting what's the furthest away and slowly reach the nearest foreground. For this workshop I used one brush only - Oil Rich from Kyle’s Megapack. It’s also important to mention that our game will have a lot of parallax effects, so I have to paint everything even if it’ll be overlapped because in the game it might be revealed by the movement on the different parallax layers, which creates a really great effect. 

The downside is that I can’t avoid painting everything, ahahah!

This background has 6 layers of parallax. 

In this picture below, the first layer is the base with the trees’ silhouette onto which the remaining layers will be layered.

As you can see here, I really try to put the atmospheric perspective at work by giving these trees less details and almost no texture. They’re basically just shapes used to create a good sense of depth. As I said above, I need to paint everything even if it’s going to be mostly hidden in order to accommodate for the parallax effect.

Below is the second layer which contains a few more roughly detailed trees and their little “islands”.

After these first 2 layers, I finally got to the static layer which won’t be moving. This is the main layer of this map and where Elise will be effectively walking. 

As you can see below, the trees that appear in this map below are much more detailed and textured, as well as the bushes and the grass. 

After this part is done, I started painting the foreground which is probably the most time consuming part since everything is very close up -  the detail has to be on point as well as the texture. Another important point is that the contrast must be really high and the closer the objects are, the more contrast there is. 

You can confirm this in the ferns’ leaves on the last picture of this workshop! Making the most closed up details a little blurry can also help give an impression of depth!

This addition of the two trees on the side accompanied by the flowers and flora completes the first layer of foreground, the second being the fern which will be moving!

This is all for now, thank you for sticking with me through the end! 

Hope you enjoyed this workshop and that this can help you with your own creations!

See you next time! ✨