Long time since last posting, the project still going forward. This time I thought I would focus on the title screen. I made a posting about it a while back and got a request on a follow up regarding the workflow. Well, here it is :-)
My inspiration for the image came from a hike. We were out walking on a mountain near my uncle's place, it was a small trail and I took a quick picture with my phone. I had already at that point thought I might be able to use it for the game title screen. Here is what it looked like:
So that was my reference picture. Nothing fancy, just a grainy photo under some what poor conditions. I quickly decided I wanted a little bit of sky on the title screen so it wasn't going to be an exact match of the photo. I use a Wacom tablet when I am drawing with the computer. This helps a lot but it is not a requirement to make graphics. When working on a picture I almost always work on a larger scale of the image, about twice the size. This way the details get nice and crisp when shrunk down to the final size. This picture was painted in 4000x3000 pixel resolution. Anyway, On with the paint stuff... This is the first sky color draft:
After this I had a rough understanding of where my horizon line should be. The picture were only going to have a small part of the sky visible, therefore I didn't bother painting all of it. The left side was going to be covered with foliage and shrubbery.
I made a few blue-green mountains in the distance to get a better feel for the horizon. I painted these mountains in a separate layer so I easily could refine the mountain ridge without having to repaint the sky in the background. Blue and green colors tend to fade into a picture, giving the appearance of being further away and have a slight fog/haze effect. This suited my needs nicely. After this I began making a rough sketch of the trail in orange/brown. I wanted the trail to be a prominent part of the foreground. Yellow and red colors have the effect of popping out. This was a nice thing to add to get an even better sense of the perspective.
These green and yellow parts are also done in a separate layer. The trees covering the sky in the upper left corner could be drawn a little bit darker because they block the sky, making a nice silhouette. I also drew the first details on the ground; two rocks and a hint to some dirt and gravel on the trail.
Then it was time for the trees. I wanted them to play a pretty big part in the image, kind of like encapsulating the scene and the path. I made one tree tipped over so not to cover the path's goal, a village and a castle in the distance. The houses where deliberately made coarse so they appear to be out of focus.
The shadows in the picture need to go in the same direction. I had already chosen the sun to be on the left side. I also thought that it would be nice to have a morning scene so the sun is pretty low. This leads to the shadows being fairly long and outstretched.
When working on the direction of the shadows I had already begun work on some of the finer details (I like doing details). The path got some rickety wheel traces and a carpet of moss hangs on one of the trees.
From now on I had to work on a more zoomed in view. Work were quickly getting multiplied by the detail factor. Copy and paste layers can be handy or Photoshop's clone stamp tool. There really isn't a need to hand paint EVERY little grass straw. Do a patch of grass and reuse it multiple times then afterwards add individual straws to make it look unique. Quite a time saver.
When doing terrain in perspective (and other surfaces that are fairly flat) it can be handy to use a brush that matches it. My mud path is viewed upon in a slight angle. I therefore didn't always use a round brush, instead I had a custom brush which was a bit squashed.
Now there's only painstakingly tedious work ahead. Drawing all of the grass, roots, small rocks, flowers and trunks. I keep a layer for each element of the picture so I don't have to worry about problems if I want to refine an edge. The background is always there in case I need it. It is also important to keep in mind the light and shadow direction.
When I had almost finished the picture I felt there where something missing. I wanted the village and castle to stand out a little bit more. Often some sparkling water can give that little extra. I drew a stream around the village and added a small stone bridge, it came out pretty good I think. I also did some adjustments to the saturation and hue values to make it more gritty and less Super Mario Bros.
The last things I did was to model the logo (I created it in blender), add a slight fog between the trees (this was possible because I had the trees as separate layers) and a glare effect from the sky (a copy of the image with high contrast and then blurred). Making the blue and red colors bleed into the tree tops and surroundings.
The final image turned out like this:
Here is a short animated gif showing the different steps:
Hope you liked this little tutorial. There are probably better methods of doing things, this is just how I am doing it.
Thanks for reading!
