Pages

Sunday, July 31, 2011

Behind the scenes The making of Alice


 C.S. from Atomic Antelope explains how he brought Lewis Carroll's classic into the digital, multi-touch age




I've always been a huge fan of children's fiction. 
The stories we are told as children often have a lifelong resonance. We wanted to make an app for the iPad that could bring new value to a children's classic.The iPad is unique because it is the only computer that reacts to being touched, tilted and shaken.This was the starting point for our first thoughts on what to make for it. We realised quite quickly that the best way to shine in the app market was to create something that used all of the iPad's functionality, coupled with a great story picked from the wealth of amazing illustration work that has now fallen into the public domain.

Growing market

Alice's Adventures in Wonderland has is a favourite story of mine, and JohnTenniel's original illustrations struck me as perfect for the kind of physics simulations and animations we wanted to create. It also appealed because it is a public domain title - we didn't have to negotiate complex rights issues with a publisher.

Like many great kids' books, Alice's Adventures in Wonderland deals with spatial concepts, especially size and shape. Alice is always growing and shrinking. Children are quickly aware of their own rapid growth as they age, and I think the Tenniel illustrations, for me at least, had an eager physicality to them. They already seemed to want to pop off the page and spring to life - we set them free.

We built the app in a two-man team with no corporate ties, so as the designer I didn't have to explain what we were doing to a'client' Because of this, I made many design choices without necessarily having any rational explanation for doing so. Choices like the way the interface works were led by just two questions: will the user get this? And am I having fun?

The design and production process of Alice was relatively straightforward, and only included four key stages. The first was to pick a book to adapt, with the second being to tell Ben how the scenes might move, and ask if it was actually possible. Next, we had to prepare the artwork in Photoshop, before finally deciding which artwork elements to add physics to and complete the user interface elements.

You may be surprised to know that we didn't use any mood boards or sketches in the project - we just went at it.



 01-The Atomic Antelope team though: Alice's Adventures in Wonderland to Lie a perfect story for a digitaly interactive update on the Pad


  02-John Tenniels original illustrations were scanned tan a very ea rfy edition of the book.Tenniel was an English illustrator who also created the imagery for Through the Looking Glass

Down the iPad rabbit hole:

Alice at a glance


1 The Alice iPad  app icon needed to portray the look and feel of roe image-driven story. This design solution uses one of Tenniel's portraits pf Alice, and sits very we" on the iPad's screen, where it looks distinctly' retro' compared to most app icons and certainly jumps out at the user.


2 "The pages went through several stages of revision, but there was no formal process" says Stephens, 'just a tot of throwing paint at the canvas  Each illustration was scanned from the original Tenniel drawings, taken front a 145-year-old edition of the book, and worked up in Photoshop


3 11 We used the iPad's accelerometer-data and touch handling, while the underlying physics engine has its roots in Cocos2d and Chipmunk physics Explains Stephens, whose Atomic Antelope partner Ben Robe Ttshand coded the app Chipmunk Physics is an open source 2D animation library that has an Objective-C wrapper for iPad design,

4The navigation design and implementation sits well with in the overall look of the app. "We wanted people to int^act with Alice intuitively, so we designed the interface to be largely invisible, reacting only when the iPad is tinted, shaken or touched," says Stephens.

5 To identify what would wort: as interacts^ or animated elements front the original graphics, the Atomic Antelope team relied on pure instinct. Once each element was deeded upon, Stephens and Roberts experimented by rotating the objects in Photoshop to give a rough preview of how various physical transforms might work.


6 1 was very aware that we were making a book for children, so we tried to mafce the text as friendly.as possible" says Stephens. The pair didn't feel pressure to to be reverent to the original book, but think the end result is very respectful .
Perhaps the illustrations adapted so well because Tenniel knew the Pad was coming jokes Stephens.


7 Atomic Antelope's Alice IPad app has received lots of feedback from users, which has prompted the pair to plan some added updates to be released later in the year. These will include extra illustrations and the option to turn' swipe to turn page' off for the app's younger readers. 





 03-Using a combination of  Photoshop enhancements to the original illustrations, arid Chipmunk Physic the team brought elements of The Alice story to life







04-06 -  the interface and navigation e.elements were purposefully designed TO be as unobtrusive j; possible, allowing the illustrations to drive the story


with an open mind. Because I knew no one in a suit was going to stop me and ask what the helt I was doing, 1 just messed about in Photoshop until 1 liked how it looked.
Tenniel tribute

The bulk of the illustrations are exactly as Tenniel conceived them in the original illustrations he produced for the very first edition, which was published in 1865.1 tried to stay true to the atmosphere of the original story and to Tenniel's imagery. The process began with me scanning the original prints from an ancient edition of the book. Then I made the illustrations bigger in Photoshop, retouched them, and enhanced the colour, brightness and contrast to make sure they worked in a digital environment without losing their' aged 'quality. The next stage was to cut out all the moving parts from the scene and redraw the background plates to fill in the holes where the characters once were. The final process was to reintroduce the characters to the scene, so they now had complete freedom of movement. It sounds simple, but it's quite painstaking to imitate the style of the original backgrounds, and there's weeks of work with the Bezier tool to get It all cut out. It was a long, drawn out and quite difficult process, but was worth it in the end.
The one area where I did experiment was with each illustration's surroundings. I felt the original page backgrounds from the 145-year-old edition were a bit plain, so I remounted all the graphics onto a grungy, muddy background that makes the modern iPad look like it has been found in an archaeological dig. I made sure that each page's text remained legible by clearing areas for it to sit in. We left out just two or three illustrations that we felt could be omitted for the bedtime edition, but we plan to add these in at a later date.

There are lots of elements we're proud of, and we're really pleased with the reception the app has had. My favorite scene is where Alice throws sweets at the Dodo. It's not the most impressive scene, but it's early on and it's the point at which most people seem to realise that everything has changed for books. It's the point where the first-time reader goes 'Oooohi; and a smile creeps across their face.






No comments:

Post a Comment