1 Comment

Storyboarding with Inkscape and OmniGraffle

Storyboarding with Inkscape & OmniGraffle

I don’t always draw storyboards, but when I do, I prefer sketching with pen and paper.

But recently I wanted to produce a clean, shareable artifact that would look nice in PDF and printed form. My usual trick of sketching on paper and uploading photos to Dropbox wasn’t going to cut it this time. I never learned Adobe Illustrator, and my Photoshop skills have withered away to nothing, so I dug out the latest versions of Inkscape and Gimp, borrowed a tablet from a coworker, and dove in.    

My Process

At first I was delighted with how natural it felt to sketch out some drawings directly into an electronic document. However, I quickly became overwhelmed by the need to manage lots of layers, clipping, scrolling… I was making a mess, wasting time, and starting to feel a little hot under the collar. I needed to adjust my approach to producing this document.

The first thing I did was separate the sketching of art for individual storyboard frames from the actual layout and narrative content for those frames. I created individual SVG documents in Inkscape and focused on them one at a time. (I abandoned Gimp at this stage because I was using more vector components, and I wanted to maintain high scalability.) With only a few layers and clipping regions to deal with at a time, things started moving a lot faster.

I then switched over to the layout and content authoring side of the problem, using empty rectangles (at first) as stand-ins for the actual art. Once again, I found myself futzing around and wrestling with the interface as I tried to get a decent page laid out in Inkscape, so on a whim I opened OmniGraffle and quickly honed in on the layout I wanted. (Winning!) The next hurdle: getting those SVG frames loaded into my OmniGraffle document.

OmniGraffle supports a variety of external image content linking and embedding; I eventually settled on linked PDFs: PDF for scalability, and linked (as opposed to embedded) so the frames in the OmniGraffle document would stay up-to-date with the files on disk.



This trick of linking to each individual PDF paid off big-time when it came to a last-minute change that affected half of the images I was using: I could flip through the various Inkscape documents making changes to the art, run a quick script from Terminal to batch-convert all the SVG documents into PDFs, then flip back over to OmniGraffle and see the changes take immediate effect.

A cool side-benefit: if I need to produce an alternate layout for this storyboard (say, to create a huge wall-hanging in landscape view, rather than a multi-page PDF document), I can derive another, separate OmniGraffle document using the same set of PDF frames, arranged differently and in different sizes, all the while staying up to date with the latest art in the SVG documents.

Tools

  • Inkscape: free, Open Source vector graphics editor. (Requires XQuartz, a free and simple install for OS X. Be sure to get the latest if you want tablet pressure sensitivity.)
  • OmniGraffle: Awesome diagramming tool for OS X. You can download and try it unlicensed or purchase it directly from the App Store.
  • This Rakefile: tasks to make it super-easy to run batch SVG-to-PDF conversions from the command prompt. Assuming you think that’s cool. And that you are comfortable with Ruby and Rakefiles.

You don’t have to use the Rakefile; the real magic is bound up in this gnarly little command:

cd /Applications/Inkscape.app/Contents/Resources/bin && ./inkscape -z -D --file=your_drawing.svg --export-pdf=your_drawing.pdf