An Interactive picture book
Woolly & Shaggy
1
2
3
Content
Intro
1
I. The Idea of Woolly & Shaggy
5
II. The Story
11
III. Production Process
15
IV. Art Gallery
29
V. Woolly & Shaggy in the future
41
About I was born in Sichuan, China, in 1987. I received my BFA in Animation from the Communication University of China in 2009. After which, I worked for the Mindwalk Studio as a Computer Graphics (CG) artist for two years. In 2013, I started the MFA program in Illustration Practice at the Maryland Institution College of Art in Baltimore, Maryland. Lynn Qianliu Chen Illustrator / Animator lynnchenart@gmail.com www.chenqianliu.com
1
My illustration work has been recognized by Communication Arts (CA),
American Illustration (AI-AP) and Association of Illustrators (AOI). With an Animation major background in college and years of working experience working in video game industry I gained technical skills which helped me create images with interactive elements. Now I live and work in Baltimore, Maryland. I’m still on my way to explore and pursue career opportunities and move forward to embracing challenges.
Preface It was in the summer of 2013, I was having dinner with a friend of mine. We were talking about our experiences living in different countries. “I know why you decided to study in the States,” he said, “because I can tell that you always have been curious. You are curious about different cultures and you have to go and experience it.” I laughed because that was the first time I realized my curiosity has always compelled me to explore. I grew up in Chengdu, a city in Sichuan China that is surrounded by mountains and covered by thick clouds. The first time I flew out from the grey clouds and finally into the bright sunshine above, I knew that was the beginning of my journey, a journey chasing after vivid colours and more creative persuits. I lived in Beijing for seven years, during which I received my BFA in Animation Technology from Communication University of China and worked as 3D Environment Artist in a game studio. Besides art creation, I enjoyed my time learn-
ing new digital tools and dealing with different software. However, repeating the same work day after day in the game studio for two years, I suddenly realized I needed a change. I hadn’t drawn a single thing in those two years and it scared me! I had to move on. Seven years was way too long for me, and I knew I had to do something drastic. The sky in Beijing was turning grey. That was the point I decided to continue my journey toward the sunshine, to the colours at Maryland Institute College of Art. During my first year at MICA, I finally got the chance to put down 3D programs and actually pick up a pencil and draw. It was great that I had the experience to explore different genres of illustration. Without those experiences I would not have the skills that I have today. I finally figured out my own direction for my thesis – interactive book illustration. This would be the best way for me to bring my skills together and create something that I love. This, I believe this is the “sunshine” I’ve been chasing for.
2
3
The Idea of Woolly & Shaggy
4
Inspirations A few years ago, a children’s eBook called Little Red Riding Hood caught my eyes. It’s a digital 3D pop-up book developed by Yippee Arts, a Chinese Children’s app developer.
Little Red Riding Hood 3D 3D Pop-up eBook By Yippee Arts
Night Night! Bedtime Story App By Fox & Sheep
5
This app is not just filled with pretty images but also takes advantage of the sensor on the iPad and develops a new user experience. Tilting the device, it reveals more of the scene and generates a three-dimensional visual impact that was rare at that time. I was totally shocked when I first saw the 3D pop-up effects in this book; it confirmed my belief that the digital format could be a direction of illustration in the future.
Another app that impressed me a lot was Nighty Night – the bedtime story app for children, developed by Fox & Sheep studio. This is a very cute app with a simple idea – put the animals to bed. The art was designed by Oscar-nominated artist Heidi Wittlinger. Besides the adorable illustrations, the smooth animation and touch response both entertains children and visually expresses the story.
Red Riding Hood Redux By Nora Krug
This series of picture-books Red Riding Hood Redux gave me a great idea for my story structure. Nora Krug used five different characters’ points of view to tell this very well known classic tale. In this expanded version, Krug illustrated five seperare books to tell one story. I personaly enjoyed this because I understand there are always multiple sides of a moral issue. For me, the parallel storytelling will work perfectly for my thesis project.
(Image from: http://www.gf.org/system/assets/0000/4250/06_Krug_RedRidingHood2.original.jpg?1364325637)
6
Style & Format 3D Style?
2D style?
2.5D Style!
- Innovative and unique
- Flexibility in animation
- Parallax scrolling background - Combine both 2d and 3d
7
- Technical challenge
- Commonly seen in other apps
- Easy to manage assets
- Time consuming
- No visual effects of depth
- Visually competitive
Parallax scrolling I struggled with the app format for a long time -would it be a storybook or a small game? Would 2d illustration work better or 3d visual effects? There were a lot of possibilities and it was hard for me to settle down with a certain solution because of technical challenges... The solution, a 2.5 dimensional style with parallaxing backgrounds. “Parallaxing” refers to a collection of 2D sprites or layers of sprites that are made to move independently of each other and/or the background to create a sense of added depth. (Pile Jr, John) By utilizing this technique, I was able to add depth to regular two-dimensional illustration without dealing with the long process of computer-graphics (CG) rendering in 3D software. There were several different programs that help make this parallaxing effect happen: Adobe Flash with JavaScript, Corona Lab with Lua language and Demibooks Composer Pro with no programming skills required.
As an artist with limited programming experience but a great passion for learning, I started my project with Corona Lab and used a language called “Lua”. However, after I did several tests with the parallaxing effect on several images I realized that I would need to spend many hours learning this new language. But for this project, I would need more time in order to maintain high quality artwork. Finally, I chose to use Demibooks Composer for my eBook Project. Although there are limitations, it was a good choice for me to get my feet wet without worrying too much about coding. After all the struggling, I got a pretty clear direction for my thesis project: an eBook with digital illustration and animation. This would be an experimental project for me and I did not know how it would turn out. But I knew one thing for sure, it would be the project I had always wanted to work on and I would love to push myself and see what would happen.
8
9
The Story Content
10
Theme & Story structure
In the story, a domesticated dog and a wild wolf decide to swap roles for what each believes is an easier life, only to discover all kinds of frustrations they did not expect. Sometimes, we are envious of another’s life, thinking that we would be better off in a different situation. However, we forget to appreciate what we already have in our own lives. The moral of Woolly and Shaggy is simple and timeless: Be true to yourself and explore every means to develop your expertise. That way, you become the creator of your own life. The story idea was developed from a simple sketch I did in my first semester at MICA. I didn’t know what to do at that point. However, when I went back to my folder and combined it with the idea of parallel storytelling, I came up with the basic story structure.
Sketches from Image Harvest Project 11
Story Structure
Early Sketches & exploration
12
Environment study from Tibet trip
13
14
15
The Making Of
16
Project management
Background illustration, animation sketches, animation tests, asset exporting, final composing and music - a crazy amount of work requires a more efficient way to organize the project. In this case, I managed the work unlike other traditional children’s books but more like an animation project. Storyboarding was the first step. Detailed sketches for each of the pages/scenes helped me to clarify what assets needed to be build. At the same time, I was able to figure out which item in the scene might be able to reused in other scenes. So that, I wouldn’t need to draw the same thing twice. According to the storyboards, I set up an Asset List, which shows items that needed to be drawn and the objects that could be shared by different scenes. Also, the columns “Estimated Time“ and “Actual Time Used“ kept me on track and allowed me to easily make changes to the schedule. It was rewarding to see each item turn green.
17
Story board - woolly wolf 18
Illustration Process
Sketch
19
B&W Silhouettes in Separated Layers
Basic Colour Palette
Finished Background Illustration with Layers
20
Animation Process
Animation Sketches
21
Silhouettes Sequences
Finished Animation Image Sequences
22
23
Process in Photoshop
24
Final Composing
Import Assets from DropBox
25
Silhouettes Sequences
Final In app Preview
26
27
Art Gallery
28
29
30
31
32
33
34
35
36
37
38
39
40
41
App Preview & Future
42
Exhibition The MFA Grad Show was a great opportunity for me to share my app to the public and get feedback from others. I spent an entire week installing the show; painting the wall, hanging up the framed artwork, setting up the projector, and finally getting everything working together. In the exhibition space, I had a tiny table with the iPad on top of it. Meanwhile, the beanbag chair and carpet were comfortable for both kids and adults to sit down and enjoy the app. Additionally, the projection on the wall from iPad screen allowed everyone to watch/read the book. It was exciting to see people actually stop in my space and start the journey with Woolly Wolf. This was encouraging for me to see people enjoying it.
43
44
45
46
47
Future Plan 1.Finalize the product Currently, the story from Woolly Wolf’s perspective is finished. In the summer, the second half of the story will be in development. I was planning to publish the first story and follow up with an update to finish the whole project. However, I feel these two stories work better together than seperated. So I decided to wait till it’s fully finshed before publishing it.
2. Promotion Promotion is extremely tant for eBook projects. cial networks will be set sharing updates on the
3. Self-Publishing imporAll soup for project.
- Website Updates - Demo on Vimeo and YouTube - Facebook Page - Blog - Forum Posting
Self-publishing to the Apple App Store is the next step. - This app will first launch on Demibooks Reading App - Storytime. - Publishing to Apple is a little bit time consuming. All the assets will be ready for Apple to review and eventually get into the App Store for public downloading.
48
contact Official Website: www.woollyandshaggy.com Personal Website lynnchenart@gmail.com Email lynnchenart@gmail.com
49
50
51
52
53
Š Lynn Chen Art 2014