Jump to content
  • Advertisement
  • entries
  • comments
  • views

Title screen workflow

Sign in to follow this  



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!

Sign in to follow this  


Recommended Comments

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.

Share this comment

Link to comment
Dude, you're awesome. Thanks for posting this, it's inspiring me to blow the dust off my Wacom.

Share this comment

Link to comment
Always wondered how you made your art. Amazing to see the steps like that.

Although, you do fail massively at programmer art :)

Share this comment

Link to comment
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. [img]http://public.gamedev.net/public/style_emoticons/default/rolleyes.gif[/img] Just some constructive criticism. I'm more of a graphic designer than an artist, so that's what stood out to me lol.

Share this comment

Link to comment
[font=arial, verdana, tahoma, sans-serif][size=2]I have to agree with et1337, the heading is a bit WordArt-ish.
But the rest of it just blows me away.[/size][/font]

Share this comment

Link to comment
Mindblowing stuff. Can I ask roughly how long it took you to create it, start to finish? Just curious.

Share this comment

Link to comment
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[b], [/b]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.

Share this comment

Link to comment
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.

Share this comment

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!