In the last few years we are witnessing two intertwining evolutions of the movie-going experience. On one hand, the accelerated presence of large screen LCD and plasma TV sets is combined with BluRay as the winner of the high-definition optical disc format war to bring unprecedented viewing experience to the homes of hundreds of millions of viewers. On the other hand, the movie studios and leading producers are seeking to bring audiences back to the movie theaters, exploring novel ways to engage the movie goers and to stay ahead of the advances of home theater systems.

With relatively slow rollout of projecting equipment and small number of available films midway through the last decade, the year 2009 saw an explosion of 3D movie releases, culminating with the “Avatar” juggernaut that was released a week before Christmas and went to gross an unprecedented 2.78 billion dollars.

The 3D onslaught is only accelerating, spanning the lucrative genres of sci-fi and horror movies, teen concert documentaries and animation features (with DreamWorks switching all productions to 3D in early 2010). With the audiences streaming into the theaters and willing to pay a premium to enjoy a new experience, some studios have elected to take production shortcuts, seeking to quickly cash in on the new trend. Using traditional shooting equipment, these movies rely on the post-production phase to bring the third dimension not only to the computer generated visual effects, but to the live action itself. The abysmal “Clash of the Titans” and disoriented “Thor” are just two examples of post-converted productions; extrapolating the experience to the upcoming “Green Lantern” and “Captain America” does not bode well for the summertime superheroes movies.

Instead of beating a lame horse, let’s talk about the high-end productions that spared no resources, setting new standards for years to come and advancing the state of the art.

“Tangled” has captured my mind from the very first time i saw it in the theater, with me delving into the creative process behind the movie and interviewing one of the conceptual artists. After seeing it a couple of times in the “traditional” 2D format, i took a leap of faith and went to see the 3D version. Apart from a very few scenes that place the viewer in a dark tower, the movie is a veritable feast of vibrant colors, textures, strokes and patterns, with a small glimpse conveyed by this frame:

Here, we are placed in between Rapunzel and Flynn, with Rapunzel opening the curtains to reveal a gorgeous mural painting of floating lights, resting her hand on a ledge. The placement of the camera creates a very deliberate depth of field, with Rapunzel taking the front, and the mural serving as an inanimate companion to her words. As she is proposing the deal to have Flynn take her to see the lanterns, the mural becomes an integral part of the story that commands the viewer’s attention. This effectively creates two “planes of interest” – equally important and visually demanding.

As a viewer placed in such a scene, i found myself subconsciously switching my attention between these two planes, trying to take in the entire scene, following her words and attempting to study the finer details of the girl gazing into the night sky. This is something that we do every single moment that we’re awake. The brain directs the eyes to continuously scan our surroundings, partitioning  the environment into different spheres of interest, gathering finer details in what it deems to be important and detecting peripheral changes. Think about driving on a highway – with the car immediately in front of you being the most important sphere, followed by the car before it, a few cars to your sides and perhaps the car right after you. The spheres of interest expand outwards to the traffic further down the road, the upcoming merging lanes or exits, or perhaps even the darkening clouds that indicate possible rain. All of this happens on a subconscious level, with the brain collecting, collating and condensing the immense amount of visual information.

As the eyes are directed to the different spheres, they change focus to converge on different planes – a process succinctly outlined by film editor Walter Murch in his letter to Roger Ebert. Murch swiftly moves in to point out the weakest link in the 3D movie experience:

[…] 3D films require us to focus at one distance and converge at another. And 600 million years of evolution has never presented this problem before. All living things with eyes have always focused and converged at the same point.

This was the biggest source of frustration for me in the specific scene, and throughout the entire movie. With equally rich and lush visuals in both planes of interest in the specific scene in “Tangled”, my brain was interested in exploring both, directing the eyes to refocus based on the perceived distance as conveyed by the camera placement and the ledge depth. As the mural was slightly out of focus to maintain a realistic depiction of the scene, i found myself constantly distracted by trying to converge beyond the physical movie screen, expecting the mural to come into focus – obviously to no avail.

Murch further elaborates that the fixed convergence plane causes the viewer to spend extra cycles adjusting himself to the changing focus plane. I think that there’s a much bigger issue with most of the 3D movies today – they have too many planes of interest in almost every single shot, without accommodating the brain-eye cycle that expects to be able to switch focus at will between the different planes and extract the relevant details from each one of them.

This is another one of my “Tangled” favorites. Rapunzel’s braided hair with intricate floral arrangement is the closest plane. Flynn holding the two lanterns, along with the satchel in her hands fill the second plane. The floating lanterns reflected in the serene bay water form the incredibly detailed third plane. This staggered arrangement that has progressive blurring of the visuals to maintain realistic visuals was also seen throughout the lush outside scenes of “Avatar”:

In both movies, the astounding realism of the surrounding scenery causes a rather opposite effect – when the camera dictates the main focus plane, your eyes do not obey the brain that directs them to switch focus to absorb all the details. Which brings me to the best 3D experience that i had so far – “Tron: Legacy“.

This overhead shot of the sirens getting Sam ready for the games is, as far as i could see from my three visits to the theater, the only time that the realism was sacrificed at the “altar” of 3D effects. Lasting a few short seconds, this angle creates a very unrealistic depiction of the scene. With the camera positioned directly above Sam, we have four planes – the heads, the shoulder pads, the disc exchanging hands and the floor – with every single plane in full sharp focus. With this rather unfortunate decision out of the way early on in the computer world, the extra dimension steps back and becomes just another artistic tool at the director’s disposal, simply blending away.

With an austere steel blue hue driving the predominantly monochrome color palette of the computer world, the production and set design cleverly masks away as much background as possible. Simple geometrical shapes, wide swaths of soft gradients and almost indistinguishable wall patterns make sure that the surrounding environment is not a plane of interest, but rather just a plane:

Note how little the brain is “stimulated” to spend time on the supporting visuals of the Safehouse – from the slanted slabs of obsidian to softly glowing curtain grid. The “End of Line” club is another masterful example of an environment that dissolves around the main characters:

“Tron: Legacy” does an extraordinary job at keeping 3D on a short leash, keeping it as unobtrusive as possible and limiting almost every single scene to only one plane of interest. It’s rather interesting to see how it falls back to the “old” trick of significant focus switches in the light runner ride:

with the forced focus transitions between Sam and Quorra transitioning the viewer’s eye and providing just enough time to absorb the details surrounding the two characters before the next focus switch.

The next few years will undoubtedly see more experimentation and exploration in the 3D space. Some attempts will flop, and some will lead to breakthrough advances in the movie-going experience – that will find their way to our living rooms in due course. The sheer size of the consumer market will make sure that the movie studios and TV manufacturers will keep on relentlessly pushing the envelope, advancing the projecting hardware, screen technology and visual modeling in both academia and industry to new levels. More importantly, the movie creators will need to adapt the way the movies are filmed, composited and edited to maintain an immersive viewing experience. These are truly exciting times.

If you’re new here, let me introduce myself – I’m a giant fan of “Tangled”. It doesn’t happen a lot, but when it does, it sweeps you off your feet. A visual journey so wonderful that you catch yourself watching it over and over again, discovering yet another subtle layer of colors, textures, strokes and shapes. A splendid feast for your eyes that passes by in a blink of an eye without you noticing how the time has passed. In short, a movie that sets the bar so high that you never expect another movie in the same genre to be quite on the same level.

So you can only imagine my excitement when Claire Keane has graciously agreed to answer a few questions i had about her work on “Tangled” and the animation industry in general. Going under the rather dry title of “conceptual artist”, Claire’s work spans the entire movie, from the leading characters to Rapunzel’s surroundings – not to mention the intricate details of her magic hair.

Kirill: Tell us about yourself.

Claire: I grew up in southern California until the age of 16 when my family decided to move to France for a year. After one year our family loved Paris so much we stayed many years thereafter. After graduating from the American School of Paris I went to Parsons School of Design in Paris for one year thinking I would like to go into fashion design but soon enrolled in the Ecole Superieure D’arts Graphiques realizing that illustrating and drawing was really my passion. In my fifth year at ESAG, I chose to write and illustrate a fairytale book for my thesis project. It wasn’t until then that I realized how much I loved the development phase of a project. When “Tangled” came to the point where they needed to bring people on to develop Rapunzel’s world I was ready to go with my thesis project in hand as my portfolio.

Kirill: How long have you been working on Rapunzel? Has it been an all-consuming adventure or a more structured “work” project?

Claire: I worked on Tangled (Rapunzel) for 6 years with a small break to do some work on Enchanted. Working on Tangled was an all-consuming adventure – I like it best that way.

Kirill: Where do you find your inspiration?

Claire: I usually find inspiration in other artists. A few that I tend to come back to a lot are: Matisse, Rembrandt, Klimt, Marie Laurencin, Ronald Searle.

Kirill: What is your preferred drawing medium and why?

Claire: I love pen and ink for the simplicity of being able to do it anywhere but since I’ve started using photoshop so much I have become completely addicted to the undo button… and I find it very hard getting back into using *real* medium again.

Kirill: How do you recreate the world as seen through the eyes of a girl that has spent all her life locked away in a tower? How much of yourself have you channeled into the fabulous wall paintings?

Claire: For Rapunzel I drew my inspiration from my own life. Early on I realized that the paintings on Rapunzel’s walls were going to be a representation of Rapunzel’s personality and her subconscious thoughts and desires. To be able to accomplish that I felt I really needed to know who she was. I ended up carrying a sketch diary with me on my free time to document what I was doing when I wasn’t doing anything  in particular so that I could have a sense of what Rapunzel could be filling her days doing in her tower. So if I was putting my clothes away I would get out my sketchbook and draw Rapunzel hanging up her clothes in her room, and then I’d see that I was drawing while I was supposed to be doing chores which led me to an idea that Rapunzel would be constantly creating: if she had mending to do it would turn into a full-on craft project. Needless to say not much housework got done those few weeks of “research”!

Kirill: Your character and scene sketches are wonderfully expressive and exude a lot of vibrant warmth and energy. What does it feel to hand them to be transformed into precise mathematical models and how much (if any) of the original feel is lost in the process?

Claire: I’m honored if any of my sketches get handed off to be modeled! It is so rare to have your inspiration be taken all the way through to the finished product. As for the mural paintings, they weren’t really finished until they were mapped onto the CG model and lit. Once we saw them like that it all felt so much more real. It added another layer of believability to the character- as if Rapunzel had really spent all those years in her tower painting them.

Kirill: What do you think about the transition of the industry in general, and full-feature animation movies in particular, to the 3D world?

Claire: I feel really lucky to be apart of this time in animation. It feels like it is full of ripe ideas just ready to present themselves to the public. There are so many amazing things that are possible to do and very little of it has yet made it into a full-length feature film. I think we will start to see hybrids of 2D and CG animation and completely new styles and ways of animating that we have yet to conceive of coming out of the industry soon.

Kirill: “Tangled” has an amazing level of detail everywhere – tree leaves, grass blades, wall stones, pavement blocks, dresses and, of course, the magical hair. That leaves the characters’ faces as the only flat element lacking any level of realism. Is this related to the “uncanny valley” that has plagued movies such as “The Polar Express”, “Beowulf” and, to a much lessed degree, the Clu character in “Tron: Legacy”?

Claire: Yes, there was discussion about how naturalistic they wanted to make the characters. They ended up with a more stylized version for the sake of animation.

Claire: Cinderella for the colors, composition, and story which are so magical. But I think the movie that has most inspired my visual development work on “Tangled” in particular was Sofia Coppola’s “Lost in Translation”. I loved how she spent time with the main character without having to get to a plot point right away. Everything I was doing in my sketch diary that I spoke of earlier was really inspired by watching Scarlett Johansen’s character just sit in her hotel room- you really start to feel like you could hear her inner thoughts even though nothing was really happening externally and no dialogue was being said. I’ve found I really love exploring a character’s private moments that may not necessarily be scripted in the movie but they make me believe in the character I am spending time working on. And I have seen that it helps me a lot when thinking about anything I would need to design for him/her: be it the character’s bedroom, costumes or even their paintings on the walls.

Kirill: What’s next for Claire Keane? Anything exciting you can share with us?

Claire: I am hoping someday to find the time to work on my own personal project. As for right now though, I’m having a lot of fun working with some wonderful people: Chris Buck (director of Tarzan and Surf’s Up) and Mike Giaimo (art director of Pocahontas) on a really fun and whimsical film. Mike has such a bold personal style and I am so excited to help get that style onto the screen.

And here again i would like to thank Claire Keane, not only for taking her time to answer my questions, but also for bringing us such a wonderful cinematographic experience. If it takes another six years for your next movie, my daughter and I will be waiting.

Today’s post highlights the design of CubanCouncil.com. The design has a rather loose layout, with heavy reliance on large images with significantly varying sizes and styling. From precise square corners of the images in the bottom row to slightly rounded corners and drop shadows of the four-cell portfolio to the completely round thumbnail of the blog post – it’s an interesting exploration that forgoes a rigid grid in favor of a more relaxed arrangement.

The round shape of the blog post thumbnail also serves as a very attractive way to skim the recent entries without leaving the main page. Moving the mouse over the diagonal arrow “expands” that arrow in place hinting at interactivity. Clicking on the arrow initiates a transition that slides the next thumbnail and cross fades the description section below. The same amount of visual polish can be seen by moving the mouse over the portfolio thumbnails, initiating a pleasantly quick fade in of explanation border.

The navigation menu in the left part of the header are particularly well thought out. A multi-state image is used to emulate the mouse as a light source that casts shadows below the protruding menu texts. Pixel-perfect alignment of textures and texts ensures that cross-fading between the matching rows in that image results in a visually pleasing and consistent sequence that is rarely seen in web pages. Finally, notice the double footer with expanding top part, detailed wooden texture of the header, ever so slight horizontal gradient on the wavy pattern of the main section, random perturbations of separators and simply perfect arrangement of client logos just above the footer (click the “show more clients” to see the full listing). Not to mention the great pairing of golden yellow and light blue for hyperlinks and highlights.

Today’s post highlights the design of LucidDesignConcepts.com by Joey Adkins. This single page site has an interesting visual rhythm, alternating between the strong brown, aquamarine teal and brick orange as background fills for the three main sections. This plays rather well with the site logo that not only defines the three main colors, but is also composed of bold large circles and custom slanted glyphs. The designer’s experimentation with typography is seen everywhere on the site, using different font styles, families and sizes (sometimes it feels a little bit too much, especially in the footer). Noise textures and serrated edges of section separators add nicely to the overall retro look of the page, with an extra touch of smooth rollover effects on the main navigation menu and social links in the footer.

As far as the usability is concerned, i’m rather puzzled by the placement and styling of secondary navigation buttons. These can be found in the two middle sections, with very misleading styling of the icons. I assumed that left and right pointing arrows would start paginating the content in the specific section – which is a well-known paradigm for navigating large portfolios. Instead, as i clicked the right arrow button, the whole page scrolled vertically to the next section, while i was expecting the next nine-pack of portfolio thumbnails to slide from the left. Perhaps extracting the secondary navigation to the right margin, or making the navigation header static would be a better solution that is aligned with what visitors have come to expect from in-page navigation.