Jump to content

  • Log In with Google      Sign In   
  • Create Account






Title screen workflow

Posted by O-san, 03 April 2011 · 950 views

Hello!

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:

Posted Image

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:

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.
Posted Image
Posted ImagePosted Image

The final image turned out like this:

Posted Image

Here is a short animated gif showing the different steps:

Posted Image

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!






Nice!
Although I am no artist and don't know much how to critique a drawing and so my opinion probably doesn't count but:

That is amazing.
Dude, you're awesome. Thanks for posting this, it's inspiring me to blow the dust off my Wacom.
Always wondered how you made your art. Amazing to see the steps like that.

Although, you do fail massively at programmer art :)
Thanks everyone! Glad you found it inspiring =)
This is fantastic! Thanks so much for sharing!

Although I have to say, I can't stand that 3D marbley font on the final version. It reminds me of 1990's computer graphics demos. Posted Image Just some constructive criticism. I'm more of a graphic designer than an artist, so that's what stood out to me lol.
Thanks for sharing, looks great!
I have to agree with et1337, the heading is a bit WordArt-ish.
But the rest of it just blows me away.
Mindblowing stuff. Can I ask roughly how long it took you to create it, start to finish? Just curious.
Hello, thanks for the comments again! I haven't used wordart so mush but I take it is a bad thing. I am thinking of maybe doing something more with it, we'll see =)

josh1billion, I haven't worked on it continuously so it is a hard to say. If I had worked on it constantly... I guess maybe around 16-20 hours.

This is stellar. Starting from the top few images, I was thinking "Ok, this will be a decent image." Then I get to the bottom and am positively floored! Looks great! I really enjoyed seeing the progression.

Latest Visitors

PARTNERS