The Light Princess

Process Work, Practice,

and Discovery

Ideas – Starting the Process

• Thinking about Choose Your Own Adventure

• Started with the Idea of Postcards

– This picture started my ideas

What’s more adventurous than an Adventure? From http://memorelli.wordpress.com/ 2011/05/09/true-to-content-context/

Idea Forming – Writing it Down

• Clicking on words in the postcard would lead to images.

• Clicking on names of places would take you to another postcard, clicking on people names would take you to a photograph/illustration

• I decided a fantasy story would be more interesting.

Idea Forming – Fantasy Inspiration

• Idea based off of Frankenstein, but set in space instead of in the Arctic.

• I’ve done Space themed work before and wanted to do something new

Idea Forming - Cyberspace

• Problems in Cyberspace

• A scientist goes into cyberspace to rescue the Princess Helvetica

• All characters were going to be named after computer things

Idea Forming - Cyberspace

• Decided to have Easter Egg words and have everything change as you click on new things

• It got too complicated – too fast, but led me to my next idea

Idea Forming – Change It!

• Use a very simple story line, with up to 5 images

• Change a single thing in that story line and change the whole story

• For instance -> Change a simple potted plant into a monster plant. The ending changes to everyone being eaten.

Idea Forming – Change It!

Idea Forming – Fairytale Change It

• I couldn’t come up with a simple enough story.

• I asked myself if there were simple stories that I could take and piece together

• My mind landed on Fairytales

• But piecing together Fairytales got very complicated – very quickly

Idea Forming – Fairytale Change It

Idea Forming - Parallax

• The new idea was to focus on one fairytale and work with new and interesting ideas of javascript

• I designed the layout of the page

Idea Forming – The Light Princess

• And I chose the story “The Light Princess” as my Fairytale

• I sketched out the story and picked the storyboards I liked

• I ended up with 10 story boards to create with parallax

Idea Forming –The Light Princess

Starting the Imagery

• Digital Painting was first

• I had a style in mind before starting

• I’ve been digitally painting for about 6 years with my tablet

• Painted in Photoshop

Creating Layers for Parallax

• Parallax requires layers so I turned on/off the layers that I needed before saving each as a png file

Initial Problems in Parallax

• There were 2 problems that I could not figure out with parallax

• The first was getting the files larger than the window so that the edges didn’t show in the browser

Initial Problems in Parallax

• The other problem was keeping the imagery constrained within the window properly regardless of window width/height

Constraining Parallax to a Box

• The magic of jparallax!

Making it Work

• Finally making it work the way I want it to

Finishing up the Artwork

• 10 pages is a lot of work…

Where Next?

• Connecting other fairytales would be an interesting option

• I want to finish up all 10 pages of Artwork

• I want to redesign the way the pages look

– Adding borders, a title page, changing the colors of the webpage, etc.

• I’d also love to go back to my previous ideas and explore those