Saturday, October 3, 2015

How to make hand-drawn slides

I have been doodling quite a bit for my sketchnotes, and I wanted to use them to illustrate my Android Summit keynote.

Pencil-and-paper draft

When I organized my thoughts for the talk, I cut paper into small pieces and draw one picture on each. These are the draft illustrations.

Some of them I was not sure how to draw, so I searched on the web for outline images of the concept, and copied it.

Copy pictures from the web

When I first started sketchnoting, I was really hung up on the idea that I was doing art, and copying is a big no no. But I copy code from StackOverflow all the time, and had no problem with that whatsoever. So I started copying drawings, and found that it always comes out as my own style (due to the lack of artistic skills to make precise copies), so I don't feel bad at all about copying.

Elephant I tried to copy

My elephant

I pick images that have simple outlines, and not too many curves. I found it difficult to copy curves, and if the drawing depends on the curvature to convey the idea, my copy will look horrendous. So I just avoid those.

Redraw on tablet

Once I was happy with the draft slide deck, I redrew the slides on my tablet.

I did not have time to investigate which software I want to use, so I just did a search on a drawing app on Android that supports layers. I ended up using MediBang Paint.

I wanted layers because I reuse some components of my drawing. For instance, I have a book icon to describe experts as people who wrote books, and then later I have a "Rant Book" where I jot down talk ideas.

It was much harder to draw on the tablet than on paper. The tactile feedback was very different. Also if I rest my hand on the tablet, it will make marks in unexpected places. Frustrated, I wore a glove to prevent accidental touches.

Also, the export UX flow for MediBang Paint was quite clumsy, so I spent quite a lot of time preparing the image files.

Import to Keynote

After I exported all the images as transparent pngs, I imported them into Keynote. I added drop shadows to make them pop on the page. I then add reveals and animations as appropriate.

My style

It was a lot of work to make my own illustrations, especially since I am a developer by trade and did not have a good workflow. But it was totally worth it. I really like the final look-and-feel, which adds a personal touch to my talk.

No comments:

Post a Comment

Inline coding questions will not be answsered. Instead, ask on StackOverflow and put the link in the comment.