Art Direction - before and after

Digimania have been working on a short animation to show off their game-engine rendering app. The short served two functions: (1) to test the software and, (2) to provide a nice example of the software's capability. The project emerged from pre-production and I was asked to undertake the Art Direction.

Let's start with the "before" picture

The short emerged from pre-production with a storyboard, a tiny bit of concept art, some layout animation and this image

 © Digimania Ltd, 2014

© Digimania Ltd, 2014

The boy was to teleport around the foreground and scan some of the prominent plants. Meanwhile the large man-eating plant was trying to bite him. The layout animation had been signed off so the position of things were fixed.

Trouble was that the image had problems:

  1. It's hard to read. We can't tell foreground from background or subject from scenery.
  2. It's composition is weak. Positive and negative space haven't been crafted to best effect and, for me, it's suffering from too many jagged silhouettes all fighting for attention.
  3. It's dull. Lighting's not interesting enough, colours are desaturated and, again, there's no smart use of colour in the composition.
  4. It has technical problems. These aren't so noticeable with the small images but texel density varies noticeably. Some textures, in close-up, were blurry and pixelated. There were also problems with the specularity of some objects and the prevalence of phong shaders with black shading.
  5. It's the product of different 'hands'. In other words the objects look as though they've come from different people.
  6. Scene was too heavy. It had dozens and dozens of objects, too many to wrestle back into a new lighting and rendering pipeline.

Where to start: Composition

The image was difficult to read and this was caused by a perfect storm of composition, shape, colour choice and lighting. My first hope was to work with what we had; to nudge and patch things into position for a better result. But, on closer inspection the models and textures were just not up to it. So a lot of it went in the bin. I persuaded the team that a simpler scene with fewer assets (considerately textured and placed) would be better and quicker to do.

We used large boulders and hills to define the positive and negative space of the shot. The blocky rocks were less "shouty" than the angular ones in the "before" picture and so didn't dominate your attention.

Next: Shape

All the spiky, silhouette-ruining plants and rocks were removed. In their place we put softer, more rounded and less prominent objects.

Then: Colour and texture

Good things come from a restricted colour palette. So our next challenge was to design a shot that worked with only a handful of colours. We used colour to establish what was important and what was not. Simply put: backgrounds orange, foregrounds green.

The textures were simplified and made less noisy so as to demote them in importance, and to make them quicker to paint. We banned "noise" as a method of adding texture. Phong shaders - with their tendency to blacken everything - were also banned. Instead we developed a semi-translucent, back-lit shader to apply to everything.

Photo-referenced textures were also demoted in favour of bold, geometric, hand-painted patterns.

Finally: Lighting

We set up an exaggerated daylight rig and keyed it so the main elements were always beautifully lit. Our rendering software was RenderDigimania which is based on the Unreal Engine, so we employed static lighting on the set and dynamic lighting on the characters.

The "After" picture

...and here's the result. I hope you think it's better than the "before" picture.

 © Digimania Ltd, 2014

© Digimania Ltd, 2014

 "Before" again, for comparison. © Digimania Ltd, 2014

"Before" again, for comparison. © Digimania Ltd, 2014