Creating illustrations for REWORK, TEDMED and Associations Now Magazine, often leads to new projects. In February, Aarron Walter hired me to create illustrations for his Idea to Interface presentation. This is the story of the creation process.
Aarron is a friend, an accomplished speaker, author, designer and teacher. He was preparing to speak at An Event Apart and other events in 2011 and was interested in hand-drawn illustrations for his slides.
Pencil Sketch Concepts
The first step in my illustration process is to get as much information as possible: text, images, comments from the client and then take the reference and sketch out concepts.
Below are the pencil sketches for the Idea to Interface project — from general thoughts on page 1 and 2, all the way to specific slide layouts in pages 3-10.
These sketches were presented to Aarron in Basecamp, where we reviewed, discussed and approved them for inking and colorization. Note the detailed comments on my sketches. I capture my thoughts as I sketch, which are often helpful in finalizing ideas with clients.
Inking the Art
Once sketches were approved, I began sketching the structures in pencil in my large Moleskine sketchbook, inking on top of the pencil. Once dry, I erased the pencil underneath, tuned up the final art and scanned the inked illustrations directly into Photoshop.
You can see in this sample inked illustration that I've added elements around the central illustration. I do this to replace or add elements to the final artwork. For instance, the iPad button to the right was drawn to replace the smaller one in the iPad itself.
Finalizing & Colorization
In the final stage of my illustration process, scans are tuned in Photoshop and colorized. I look for places where the inking may have a rough edge, spots of white in dark regions or other minor flaws I can repair with the brush tool.
I created a master document, set to the correct size and began assembling scanned bits in layer groups in the document for each slide. Once each slide's structure was set, I created new layers for each color in the illustration. In this case I chose only a few colors in the palette and used them for all of the slides.
Below are 11 finished slide illustrations, with a few notes about each one:
Title Slide - This was the first illustration and slide for the deck. This concept went through several iterations before we had it where we wanted it. Initially there was no red in the slide, but through experimentation, I found splitting the screen on an angle emphasized both the idea and interface states covered in Aarron's talk.
Slide 1 - This is conquering King Heiro II, who would eventually commission a crown for his victory and Archimedes to verify its contents were pure gold. For some reason I had The 300 and Sparta in mind when I created this illustration.
Slide 2 - The crown of gold commissioned by King Heiro, of dubious gold content.
Slide 3 - A confused and perplexed Archimedes, considering his challenge from King Heiro to determine the gold content of the king's crown.
Slide 4 - A bath drawn by Archimedes' wife, which was intended to relax him and take his mind off of the crown of gold problem. I had a little fun with this slide, adding in a yellow rubber ducky next to the brush.
Slide 5 - Archimedes relaxes with water rolling over the sides of his bathtub and in that moment, realizes that water in a container can show actual mass of an object like a dubiously golden crown, when compared to an identically weighted pure gold object.
Slide 6 - In his excitement about solving the problem, Archimedes jumps out of the bath buck naked and runs through the streets shouting EUREKA!
Slide 7 - In this slide, Aarron wanted to portray "working for the man" in a humorous way, so I created a mustachioed MAN and enlarged him over the shoulder of a small. sticker-covered, laptop-using web designer in a chair on the right.
Slide 8 - This illustration shows visually how an interface acts as a window through which users communicate with each other.
Slide 9 - This image encourages listeners to step across the line and start something.
Slide 10 - The thank you slide, with Ducky in there for a parting goodbye.
Sketchnote Font Testing
Aarron also wanted a hand-drawn font for the deck, to connect visually with my illustration work. As it turned out, a very rough alpha version of my Sketchnote font had been prepared by Delve Withrington, so I took the opportunity to have Aarron test it out.
The font worked well, considering the many missing elements and no kerning in place. I thought it was an encouraging early test of the font.
Delivery & Field Use
I provided Aarron with final PNG files for his Keynote deck in our Basecamp project and in a shared Dropbox folder, for backup. This allowed Aarron to drop images into his deck as I completed them in batches, while he prepared other details of the deck.
Aarron reported that the illustrations was very well received at its first appearance at An Event Apart Seattle and that he was pleased with how everything turned out. Now he's taken his show on the road, sharing Idea to Interface with other Event Apart cities.
Thanks Aarron for choosing me for your project. I had a great time!
Resources
Aarron Walter's “Idea to Interface” Links & Resources
An Event Apart
Sketchnote Font
Subscribe (RSS)
Subscribe (Email)
Wednesday, May 4, 2011 
