an interactive picture book: woolly & shaggy
DESCRIPTION
Thesis Book by Lynn ChenTRANSCRIPT
1
Woolly & ShaggyAn Interactive picture book
2
3
Content
Intro
I. The Idea of Woolly & Shaggy
II. The Story
III. Production Process
IV. Art Gallery
V. Woolly & Shaggy in the future
1
5
11
15
29
41
1
Lynn Qianliu Chen Illustrator / [email protected]
I was born in Sichuan, China, in 1987. I received my BFA in Animation from the Communication University of Chi-na 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 Il-lustration Practice at the Maryland In-stitution College of Art in Baltimore, Maryland.
My illustration work has been recog-nized by Communication Arts (CA),
About
American Illustration (AI-AP) and As-sociation of Illustrators (AOI). With an Animation major background in college and years of working ex-perience 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 pur-sue career opportunities and move forward to embracing challenges.
2
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 cu-rious. You are curious about different cultures and you have to go and experience it.” I laughed be-cause 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 jour-ney 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. Be-sides 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 sud-denly 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 sun-shine, 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 il-lustration. 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.
3
4
The Idea of Woolly & Shaggy
5
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 Chi-nese Children’s app developer.
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.
Inspirations
Little Red Riding Hood 3D3D Pop-up eBook
By Yippee Arts
Night Night!Bedtime Story App
By Fox & Sheep
Another app that impressed me a lot was Nighty Night – the bedtime story app for children, devel-oped 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 illustra-tions, the smooth animation and touch response both entertains children and visually expresses the story.
6
(Image from: http://www.gf.org/system/assets/0000/4250/06_Krug_RedRidingHood2.original.jpg?1364325637)
This series of picture-books Red Riding Hood Re-dux 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 be-cause I understand there are always multiple sides of a moral issue. For me, the parallel storytelling will work perfectly for my thesis project.
Red Riding Hood ReduxBy Nora Krug
7
Style & Format
- Flexibility in animation
- Commonly seen in other apps
- No visual effects of depth
- Parallax scrolling background
- Combine both 2d and 3d
- Easy to manage assets
- Visually competitive
- Innovative and unique
- Technical challenge
- Time consuming
3D Style? 2D style? 2.5D Style!
8
As an artist with limited programming experience but a great passion for learning, I started my pro-ject 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 art-work. Finally, I chose to use Demibooks Composer for my eBook Project. Although there are limita-tions, 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 direc-tion for my thesis project: an eBook with digital illustration and animation. This would be an exper-imental 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.
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 parallax-ing backgrounds. “Parallaxing” refers to a collection of 2D sprites or layers of sprites that are made to move inde-pendently 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 deal-ing 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 program-ming skills required.
Parallax scrolling
9
10
The Story Content
11
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.
Theme & Story structure
Story StructureSketches from Image Harvest Project
12
Early Sketches & exploration
13
Environment study from Tibet trip
14
15
16
The Making Of
17
Background illustration, animation sketches, ani-mation 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 chil-dren’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.
Project management
18
Story board - woolly wolf
19
Illustration Process
Sketch B&W Silhouettes in Separated Layers
Basic Colour Palette
20
Finished Background Illustration with Layers
21
Animation Process
Animation Sketches Silhouettes Sequences
22
Finished Animation Image Sequences
23
24
Process in Photoshop
25
Final Composing
Import Assets from DropBox Silhouettes Sequences
26
Final In app Preview
27
28
Art Gallery
29
30
31
32
33
34
35
36
37
38
39
40
41
42
App Preview & Future
43
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 ac-tually stop in my space and start the journey with Woolly Wolf. This was encouraging for me to see people enjoying it.
44
45
46
47
48
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 up-date to finish the whole project. How-ever, I feel these two stories work better together than seperated. So I decided to wait till it’s fully finshed before pub-lishing it.
Promotion is extremely impor-tant for eBook projects. All so-cial networks will be set up for sharing updates on the 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 Demi-books 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 down-loading.
Future Plan
1.Finalize the product 2. Promotion 3. Self-Publishing
50
51
52
53 © Lynn Chen Art 2014