Child’s Play

Back at the beginning of November, I had the opportunity to present on “Exploring Canvas” at HTML5 Live in New York, NY.  During the presentation I covered a variety of canvas topics ranging from the basics, such as how to get started, to more open-ended experimentation such as red/blue 3D rendering.  It was a fun topic, with a fun audience, but the slides were especially fun to build since I had my seven year old daughter help me design them.  I have since gotten a lot of questions about how I built the slides, so I thought I would spend a post talking about the process.

I should note up front that I have often included my daughter in my presentations – especially around multi-screen and physical computing. The original idea popped into my head when I needed an additional set of hands to interact with content, while also filming at the same time.  I work in a remote office with no other Adobe employees around, so it is not like I can just grab somebody from the next cube over.  My wife is notoriously camera shy, so that left one option, my daughter.

These days at conferences, I will often get questions around my content, as expected, but inevitably, somebody will ask about when I have new content coming out that includes my daughter.  She has become a bit of a celebrity in that respect, which is great because she loves helping her dad with work.

The Slides

I actually build the entire presentation before involving my daughter at all.  I work the content over and over until I have a cohesive presentation that won’t be changing much.  I’ll generally add to the sections all the way up until the presentation itself, but the section headers themselves will reach a point where they stop changing.  This is important, because the process of having my daughter draw the slides takes a considerable amount of time.  Changing major sections would be costly.

The Artwork

Once I have the presentation mostly refined, or at least refined enough to where the section headers won’t be changing, I pull out a sheet of 8.5” x 11” paper for each major heading.  Think of a sheet of paper as the screen for a specific header slide.  It’s not an exact representation of the aspect ratio, but it is close enough.  As they say in the video business “we will fix it in post”.  That is to say that we can massage the sizing once the artwork is finished.

First, layout the sheet of paper horizontally (long side across the top).  Then, using a ruler, measure out two lines on the paper roughly where you would normally put a slide title.  If you have a subtitle, you might adjust the lines accordingly.  Draw the lines very lightly – they are simply serving the purpose of helping you keep things level.  Then on those lines, in big letters, write the slide heading.  Again, be light here.  You are not interested in the lines any more than to provide a guide for your eager helper.

At this point, I turn it over to my daughter.  I tell her to trace the letters, and to do it somewhat sloppy (which she loves since to her staying in the lines is such a drag).  The sloppiness lends to better readability.  The thicker the lettering, the more legible the words will be on the screen in a formal presentation setting.  Once she has finished the letters, we think up a theme for the slide.  For example, since I was going to be in New York, NY for the presentation on “Exploring Canvas” I thought a New York skyline would be a good fit.  For another slide, since it was close to Halloween, my daughter wanted to draw witches and pumpkins.

Try to have your helper draw a variety of objects.  Don’t limit yourself to what you think will fit best on the slides.  Let them really go at it.  The more options you have the better.  I found that on any given slide, I would use maybe three or four out of the ten different things my daughter would draw.  Also, when they are drawing, try to have them stay clear of the letters of the slide heading.  This will make it easier to fit the content to the slide down the road.  I also found it helpful to have a kind of factory line.  My daughter would finish one slide, and while she was starting on the next slide, I would start digitizing the work.

Some Assembly Required

Once a given slide is complete, I scan it into the computer using a fairly high DPI setting (300 dpi or better).  This gives you more pixels to play with when it comes to sizing the content.  It also lets you clean things up easier at a high resolution, and then scale it down to fit with less artifacts from the cleaning process itself.  For example, if you are using crayon, there will inevitably be flakes of wax you don’t want.  Photoshop’s “Content Aware Fill” makes quick work of those.

I found that most of the time, despite being told to steer clear of the letters, that my daughter would inevitably get carried away and end up drawing into them.  Here a little work with the Photoshop “Clone” tool goes a long way.  I will set the original point on a blank piece of the paper, and make really soft edges on the clone area.  Then I can clone the paper over errant scribbles.  If you have scanned in the artwork at a high enough resolution, then when you scale it down to fit your slides, these fixes will be imperceptible.

Once the artwork has been cleaned up, I use the “Polygon Lasso Tool” to trace around the parts and pieces of the slide.  I keep it fairly random to emulate the look and feel of a child cutting out the words with clunky safety scissors.  I then paste the cut out objects into my slides.  From there, if I have scanned at high enough resolution, I can continue to scale, skew and rotate the artwork individually, without loss of quality of the artwork itself.  Before long the final product emerges.

Finishing Touches

For my purposes, I found that the artwork itself, when placed on a blank white slide, lost a lot of the character that I wanted.  There was something missing.  After thinking about it for a while, I realized that it was the texture of the paper itself that was missing.  The computer rendering was too perfect.  To solve this problem, I crumpled up a blank slide, er, a piece of paper, and scanned it.  From there a little color correction brought out the right one that I was trying to achieve.  Then I simply plopped that in as the background to each heading slide (again stretching and scaling to fit the aspect ratio).

When I did this, I found that the artwork became lost in the texture of the paper.  Now I had the inverse problem.  To bring the artwork back out of the textured paper, I applied a slight drop shadow to each object.  Now I had the final product.  Of course, once you have had your helper work so hard, it is important to show them the results of the work, so fire up the presentation and show them their handiwork inside the computer.  I found that my daughter would occasionally have recommendations as to pieces of her work that were missing that she wanted to include.  If at all possible, I tried to accommodate – she is, after all, the real star of the show.