We were in desperate need of a fun picture to use as a loading screen. A black screen that says ‘Loading…’ in the lower right corner doesn’t really inspire you to go explore the levels of WoodChopper. I figured that if I put in enough effort, the same image could also be used as an all-purpose promotional picture.
Below I’m going to walk through the different steps that went into creating the loading screen image from scratch. Hopefully it’ll have a useful tip or two if you’re thinking about creating promotional art for your game.
The first step was to figure out what I actually wanted to accomplish and what the composition would be like. I started by “asset-bashing” (I’m not sure if that’s a thing, I bet it is) together a bunch of unused assets from an old trailer to see if my idea would work as far as the composition and idea goes.
The next task was to create a proper sketch for all the linework, which was pretty straightforward. I’ve drawn our chopper so many times, that I have a decent routine down for it. What took some thinking was how aggressive I wanted to go with the background perspective and foreground foreshortening. I also added a bunch of empty space to the bottom corners for potential logos and loading texts.
Next up was creating a clean ink layer for the outlines and removing the scribbly sketch lines. Inking tends to take a while, so it’s best to be patient with it. Try to pay extra attention to your line weight, because you can use it to make some elements pop out more than others.
After the inking was done, I blocked in the colors I wanted. Unfortunately I didn’t have the initial, super messy color layer left because I painted right over it. The result will be somewhat flat, because the thick black lines rob the image of all depth.
To tighten up the image and bring it all together, the ink layer was colored to have it correspond what was happening on the color layer. This will also take a while to do, even though it seems like a pretty meaningless step. It’ll be worth the effort though!
The polishing stage involved a lot of things: in addition to tightening up the messier brush strokes and cleaning up all the sloppy edges. I created three transparent layers, which would provide the image with some atmospheric perspective. Without this the image would’ve ended up looking pretty flat and boring. The three numbered circles in the image are the areas that needed the most separation from each other. Just having a little bit of atmospheric haze right behind the chopper’s leg helped bring Chip closer to the viewer. There’s also a light blue gradient in the top right corner of the image, which is just there to give the image a bit more atmosphere. Lastly I added a ton of light green bounce lights to all the objects located close to the ground to make them look just a bit more grounded. I took a lot of liberties with how the lighting worked in the scene, but realism wasn’t really something I was going after.
I guess if there’s anything to learn from this, it’s that doing proper groundwork and building the image on a reasonably solid foundation is key. Having a plan isn’t usually a bad idea regardless of what it is want to achieve. Reading up on composition isn’t a terrible idea either, since it’s what will guide the viewer’s eye around the image and play a big part in whether it’s engaging and fun to view or not.
Here’s a small and rough animated .gif of the process to end things with. Hopefully you found this useful or interesting!
