04 // Early Parallax Illustration Experiments

PROCESS

With my new PSD files of each image - separated into it's main layers of depth - I head over to After Effects and create a new composition for the animating process. Since two of the images are landscape orientation and the other two portrait, I figure I should have plenty of scope for a decent variety of early experimentation.

Once inside AE I create a new composition of 1920 x 1080, into which I imported the PSD files. Working on one image at a time, I converted each of the layers to 3D and added a camera, before adding an additional viewport to the screen layout. This allowed me to see how each of the layers fit within 3D space as well as giving me the camera viewpoint.

I though of all the different ways in which I could incorporate zooms and pans into each scene - by thinking back to movies/animations I had seen in the past, i was able to reverse-engineer the motion and figure out how to go about it. I wasn't watching any tutorials or clips at this point, rather I relied on exercising my visual memory a little.

I'd always wanted to produce an animation that incorporated a dolly zoom effect - where the camera zooms in on the character (or other point of focus) while the background decreases in size - so this seemed like a pretty good opportunity to give it a shot. I applied this effect to Sylvanas, Bloodrayne and Link, resulting in varying degrees of success.

The 2.5D process seemed pretty straightforward, so it didn't take long to get four animations completed. As long as I gave each motion a bit of thought and planning beforehand, the technique was fairly intuitive.

My skills with AE are intermediate, so I didn't find too many difficulties in using this software to get the desired effect. As well as using simple keyframe animations to make layers scale, move, rotate and fade, I was even able to add a few extra touches that would hopefully bring an extra layer of immersion to the viewer's experience; having layers of dust particles that passed by the camera, in an attempt to create the illusion of the viewer being within the picture; and using light flares and pulses to add a bit more variety to the otherwise static images.

PUPPET WARP

I remembered from the Creators Project video that the artist had used a Puppet Warp function to bring some extra motion to his image. I wanted to at least try this effect, so after quickly referring to a tutorial on it I tried to apply something similar to Sylvanas.

The experiment was mostly unsuccessful, but I kept it in the final animation regardless, in case of future reference (the effect was used on her left leg and part of her hair near her breast). The Puppet Warp tool seems to be limited by the illustration it's used on; the most effective way for it to work is if limbs that require animating don't overlap other body parts. Therefore for this to be used successfully, some pre-illustration planning will need to take this into account.

FINAL THOUGHTS

To summarise this post, I'm aware that this style of animation is very primitive in it's end result, however it can add drama to a still image by appearing to be a super-slow-mo action shot. 

It can also be great effective to immerse the viewer within a still image; by using FG elements -  such as dust particles - to float towards the viewer and past the camera, it can present the illusion of actually being within the picture, adding layers of depth to a captured moment in time.

This style of animation allows for many artefacts to be animated; light pulses; particles shifting and moving; zooms; pans; rotations etc.

The dolly zoom technique can be used to great effect in this style.

Since it is a single still image that is being animated in this way, it frees up time to really put a lot of effort into the initial illustration - rather than having to worry about drawing out hundreds of frames of animation. With sufficient planning, a well-executed illustration could result in a complex final 2.5D animation.

My next step will be to gather more references of similar animations to study from and see how my first attempts compare. Following on from this I'll be thinking of ways in which I might be able to bring something new to the table, producing some planning sketches to give some insight into what I'm aiming for.

03 // Preparing Image Files for Early Tests

Having quickly re-watched the 2.5D parallax image video, I have a fair idea of what I need to do in order to prepare some files for experimentation. Rather than drawing anything up from scratch for this stage, I grab a few of my personal illustration PSD files and set about arranging the layers appropriately, ready for importing into After Effects for the next stage.

I know that certain elements should be layered to allow for ease of use later, so I seperate and merge layers as need be, until each file is broken down into the most essential elements: BG, mid, character, FG, effects etc.

I'm already aware of some likely problem areas within each image, but until I get into AE I won't know for certain what my limitations are. This is really just a way for me to gain a better understanding of what exactly will be required from finished artwork in order for this technique to work, so I'm not expecting any amazing results. If I can experience the difficulties now, it'll better prepare me for constructing and implementing a solid, efficient workflow further down the line, which in turn should hopefully allow me to produce more complex animations later on.

These are the images I've chosen to work with at this point, broken down into their main components.

02 // Related Studies

I remembered having seen a tutorial quite a while ago that was related to this style of 2D animation; it took a few days to track it down but I eventually got it:

I'd wanted to do something like this before but had never quite gotten around to it, so this seems like the perfect opportunity to experiment with this guy's techniques and hopefully learn enough in order to add my own twist to it.

Understanding the fundamentals of his process, I can look back at the videos of the previous post and figure out what to do in order to get this project moving. Suddenly, the Borderlands and Darksiders style of animations don't seem as difficult to comprehend.

I'll test out a few sketchy experiments and try to nail down an efficient, tight workflow of my own.

01 // Project Intent

My primary focus for this year is to increase and develop my skillset in character-based digital illustration, while also learning new techniques in environment painting. I'll be steering this project in that direction by looking to create my own set of animated stills - that might perhaps be used for in-game cut-scenes or loading screens.

Having spent the week giving this project a lot of thought, I already have a strong idea of how to go about this and the kind of results I hope to achieve. I'll begin by referencing a few initial examples that I'll be studying and using as early benchmarks.

Off the top of my head I can think of several examples that have definitely inspired me in the past, and will provide a great starting point for my studies...

Infamous / Infamous 2 / Infamous Second Son

The three Infamous games use a very recognisable style of illustration for their in-game cut-scenes, providing continuity throughout the series. 

Employing a grungy artwork style, the images are edited together quickly, with each shot benefiting from parallax scrolling, camera pans and tracks, and animated effects. The final result gives each cut-scene an animated comic-book look which adds to the game's persona and matches the narrative.

GTA IV / GTA V

The latest entries in the GTA series have used parallax scrolling illustrations within their loading screens to draw focus to some of the most iconic characters within each game. 

By placing each posed character within a suitable environment, an underlying narrative is referred to without imposing upon the portrait, making the digital painting the star of each shot. Each image is beautifully rendered in a realistic style, befitting the game's overall look.

Dragon's Crown

Developed by Vanillaware, Dragon's Crown incorporated a visual style all of it's own by presenting animated digital paintings of notable characters and scenes throughout the game. Although the style was quite risque and mature in some areas, there is no doubt that it has been brilliantly executed, adding a whole new visual level to a seldom revisited genre of game.

Borderlands / Borderlands 2 / BTPS / TFTB

The Borderlands games implement a digital-ink drawing style to illustrate the narrated backstory of each installment, presenting an art style that compliments that of the game itself. The camera pans across the "page" as one drawing fades and/or animates into another as the story unfolds.

A lot could be learnt from these animations.

Darksiders // Darksiders 2

Using an art style similar to the Borderlands animations - though more silhouette-based, rather than linework - Darksiders uses 2D illustrative animation to provide the player with some backstory.