Writing: Diagrams

12 November 2012

You would think that someone who loves drawing would love doing diagrams. I do not. I hate diagrams. I thought I would love them, but they ended up being the thing I hated most about writing Accessibility Handbook.

I mean, diagrams are nice for reinforcing information or getting across a more subtle point to a reader (they also don't hurt your page count). They break up your chapter and add visual interest. But oh my god, does making them suck.

Mistakes I made

With my first book, I didn't take the time to do the diagrams as I went. I just inserted a placeholder image with a vague description about what the diagram was supposed to be.

This was a bad idea.

When I dove into doing diagrams, I couldn't fathom why half of them seemed like a good idea. I'd stare at my note ("Something about embiggening") and curse my previous self for not just doing the diagram right then and there. I removed more than a few, then had to make up the missing space in a frenzied weekend of writing.

The reason I'd moved to doing the notes and placeholders, though, was that stopping to make a diagram can take you out of your writing groove. I'd sit down to write, then spend a half-hour either struggling with Gimp or sketching something, scanning it, then trying to refine it. Pictures are not worth a thousand words. I measured. They only take up the space of about 150 words. They were making me fall behind.

What I'm doing now

With my current book, I decided that I was going to find something that worked with my flow. I needed to make diagrams as I needed them, but I didn't want them to take up precious writing time. After all, you get lots of waiting time during editing that can be used for making the diagrams nicer.

I hit upon it by accident, really. I'd been taking pictures of sketches I'd been doing throughout the day with my smartphone, then posting them to Twitter. While these weren't archival-quality shots, they worked well enough for their intended purpose: amuse the masses. Why couldn't I do this for my book diagrams?

I started using a new workflow:

  • Write write write
  • Come across a section where I was going to need a diagram
  • Stop, sketch it in a cheap sketch-pad
  • Take a picture of it
  • Crop it on my phone
  • Wait for it to upload to my machine
  • Move it to where I needed it to be, and name it something sensible
  • Insert it

That looks like quite a few steps, but trust me, it only takes me about five minutes. Sketching is much faster than trying to start in a graphics program. My paper is already right here (I always have the sketchbook at hand), as is my phone, and Dropbox is always doing its thing in the background.

Eventually, though, I need to make nicer images. What do I use then?

Tools I use

I do not own Photoshop. I know, I know, that's crazy. The last time I checked, though, Photoshop was over five hundred bucks, and that's way over my impulse range. I have to truly believe with my heart and soul that I need something that costs over $200.

And no, before you ask, my work has not purchased me Photoshop. I'm a Python developer. That would be silly. I only got it at my last job because we'd randomly run out of designers, and sometimes you just have to fix some transparency on your own.

For screenshots and annotations, I love Skitch. It takes great screenshots that I can mark up immediately, and I love how nice it makes my lines look.

If I need to actually draw something while I'm on my Mac, I fire up Acorn. It does everything I really need it to do: layers, brushes, exporting, selecting, and cropping. I know it only does about 10% of what Photoshop does, but apparently that's the 10% I really needed.

If I happen to be working on my Mint box, I use Gimp. Then I cry a whole bunch.

If, for some reason, I'm on my Windows box (which I use almost exclusively for gaming), I break out Paint.net. I cry slightly less than I do with Gimp, but this is only because I'm distracted by the Steam icon in my toolbar.

When I have to mock up a site for a screenshot, I grab Twitter's Bootstrap. It saved me huge amounts of time, using their styling and templates.

Tip: Know your tools

If you need pull-down menus and icons to access different tools, you're doing it wrong. Learn what the keyboard shortcuts are for every tool you'll need, from creating layers to switching from paintbrush to pencil, to changing how you're selecting areas. Learning the keys made making diagrams a ton faster.

Also, it will not kill you to watch some tutorials on how to use your tools. You may not be planning on a career in the visual arts, but knowing all of the things your tools can do will only make your diagrams look nicer. There's a ton of hidden tricks that get pushed off of the main toolbar to save space.

Ask about colors

When I did diagrams for Accessibility Handbook, they were in color. I found out, while the book was in production, that the diagrams would be in black and white. Hell. Lesson learned: With the new book, I've asked in advance, and I know that my diagrams in this case will be in color.

Save everything

Another lesson I learned was to save everything, in every format. More than once, I had to grab the original file and change a color or a typo, or change some copy. This includes not only the image files, but the HTML files for my screen-shots. For a few of those, I just modified another file, and I was in a world of hurt when someone needed me to make a change.


Related tags: design writing


1 Derek says...

Any reason you are not using Inkscape rather than GIMP? Aren't most diagrams, by nature, vector-oriented rather than pixel-based?

Posted at 6:59 a.m. on November 13, 2012

2 Katie says...

I gave Inkscape the old college try, but it took me even longer, and the results were cringe-worthy. Besides, they were asking for pngs, jpgs, or gifs, not vectors. I would have had to convert them before delivery.

Posted at 7:14 a.m. on November 13, 2012

3 Ian Witham says...

I agree with Derek... Photoshop/Gimp seem like the wrong tools for the job.

Learning to use Illustrator/Inkscape or similar would save you a lot of pain for so many reasons! Also, exporting to the raster image format of your choice is generally as trivial as doing the same in Photoshop or Gimp, with the added bonus that you get to choose whatever size and resolution you want for your image without degradation.

I suppose you could use a pixel tool to do just about anything, but then you could do your diagrams in Powerpoint or Excel (many people do...)

Have you tried LibreOffice Draw? I haven't used it much but I seem to recall that it had quite an intuitive interface.

Posted at 11:22 p.m. on November 13, 2012

Comments are closed.

Comments have been closed for this post.