Gravity

gravitySlip.png

What is Gravity?

Well, in certain countries it was prefixed with "Professor Heinz Wolff's..." and it was a physics-based computer game. It was a cracking wee game and got some lovely reviews as testament to the work EM Studios had done developing it.

My role

Background paintings, level design, user interface design.

More info

EM Studios

Alex Ronald, my colleague on the project


Making of Gravity

Starting out

EM Studios had the prototype of a physics game which, at that time, was called "Physmo". The gameplay and mechanics had been worked out but the level design and graphics had not. Alex Ronald and I were hired to make the game's graphics and I had a further responsibility for level design too. The task was pretty big: 100 or so background paintings, a full user interface, dynamic game objects, typography, a 3D character and promotional artwork had to be delivered in roughly four months. On top of that was puzzle design for dozens of levels.

Oh, and all of this had to be done for PC, Wii and DS platforms.

Working quickly

By far the largest chunk of work was the background paintings. A simple calculation showed that I'd have to paint three paintings every two days. I spent a lot of time trying to get (a) back into the swing of painting, and (b) a process that was quick enough to meet the deadlines. I experimented with painting over 3D models, using digital lights and photo montage. In the end what worked was a simple, typical drawing approach. I'd sketch an idea as thumbnails, often dozens at a time, work up a larger sketch, scan it, and digitally paint in Photoshop.

Some of the images are in the gallery below.

Painting process

Black BIC biro on layout paper.

Black BIC biro on layout paper.

1- Sketch

This image started out as a crude 3D model in Cinema 4D. The model helped with curves and perspective. A screenshot of the model was printed and placed behind a sheet of layout paper. This allowed me to trace over it with a black BIC biro and add details such as the chains, spokes and doorway.

Getting to this stage took a couple of hours.

Photoshop colour wash

Photoshop colour wash

2 - Colour wash

The drawing was scanned and brought into Photoshop. Our working size was 1600 x 1200 pixels. The sketch layer was set to multiply and placed at the top of the layer stack. Underneath I added a new layer and painted a colour wash. This process was very fast and the most enjoyable of all. I used a hard round brush set to roughly 60% opacity. Colours were chosen quickly and strokes were fast and loose; it was very experimental.

I deliberately banned myself from using the eraser or any layer effects at this stage because I wanted to set down a hand-painted look.

The colour wash stage took, maybe, 20 minutes.

Another Photoshop layer for details

Another Photoshop layer for details

3 - Details

Not much going on here except the addition of holes and windows. 

Cogs added

Cogs added

4 - Cogs

The cogs were painted on a new layer. The colour was blocked in quickly - just like Stage 1, above. The 3D model that I'd referenced did not have any lighting applied so shadow casting and illumination were worked out by eye.

I never zoomed into the image. As tempting as it was to get closer and correct a wayward stroke, I was determined to treat the digital canvas as if it were real. Hence, no zooming (and limited use of undo).

Walls and cogs have been textured with photos

Walls and cogs have been textured with photos

5 - Textures

Textures were added between the sketch and colour layers. For most of my textures I used images from CGTextures.com. I grabbed some large concrete, metal or plaster images and added them as either Overlay or Soft Light modes. 

The textures were corrected for perspective with the Free Transform tool and sometimes cloned into tighter areas of the canvas.

The sketch layer, having fulfilled its job, was switched off.

Finished image

Finished image

6 - Final image

The last stage was to add some glows at the windows and perform a final colour-correction. There wasn't much correction in this image but I used the Curves tool to brighten the mid-range colours a bit.