Add graphics to your blog, book, or presentation

People pay attention to graphics. They respond to graphics. They learn from graphics. If you want your readers/learners/audience to "get" something as quickly and clearly as possible, use visuals. And you don't have to be a graphic artist, designer, or information architect to put pictures in your presentation, post, or book. This post is my first attempt to categorize the kinds of graphics I do here, and offer tips for creating visuals that tell the story better and faster than words.

Type: Charts/Graphs
Use for: Showing relationships between two or more things, quantitative data, things that happen over time. Good for simplifying complex relationships and getting people to think about something in a new way.

Type: Comparisons
Use for: Good vs. bad, old vs. new, before vs. after, technical vs. manager, boxers vs. briefs, etc. Particularly good for things that are--or should be--changing, and for showing a goal/end-state.

Type: Reminders/Kick in the rear
Use for: Bringing the "duh" things into focus. Especially good for things that everyone knows but doesn't always do. Good for distilling what's important, and providing motivation and/or inspiration.

Type: Metaphors / analogies
Use for: Making a point by relating it to a completely different domain or idea. "Programming is like being a composer..." Good for building understanding and increasing retention and recall.

Type: Gratuitous
Use for: Making a point, entertaining, waking up the reader's brain (getting the brain's attention), to add emotional impact, or just because you want to ; ) Can also be inspirational.

Type: Photographs
Use for: Real examples (why describe the car when you can just show it), entertaining, waking up the reader's brain, to add emotional impact and inspiration, and to personalize by showing people.

Type: Diagrams
Use for: Demonstrating complex processes, ideas, relationships, etc., showing things you can't photograph (mock-ups, etc.). Especially good for learning.

---

How To
You need two skills for adding graphics to your stuff: idea generation and making the graphic.

1) Coming up with the idea
Figuring out what the graphic should be is the most important part. The good news is, you don't need to be an artist or designer to do it. The bad news is, it may not be easy at first for those who aren't used to thinking visually. Back to the good news, all it takes is practice. Here are some tips:

* Ask yourself, "What's the point I want to make?"
This is the single most important step, and if you have trouble coming up with a graphic, it may be because you don't really know exactly what you're trying to say (or why you're saying it).

* Distill the point to it's simplest, once-sentence form.
"Micromanaging employees creates zombies" "You can't make revolutionary leaps if you make only incremental improvements" "If nobody hates your product, it might be mediocre"

* Narrow down the graphic types that apply to this point.
Is it important to show quantitative data? Is it important to get people to look at something from a new angle? Is it something that changes over time? Is it something new and unfamiliar that can be related to something familiar? Is it something that represents a dramatic change from the "old" way? Is it a product that you can get a photo of? Is it something where motivation is crucial?

* Pretend that for some reason you cannot use words to make your point.
Just keep thinking and brainstorming on, "How would I say this without words?" Once you come up with something, then you can add words to enhance it or make the context clear (like adding the words, "Before" and "After", etc.) Trust me on this one--all it takes is a little practice to get good at this, but many tech people especially (those who think in code and command-lines) hit a brick wall the first several times they do this exercise. It's the one we put all our Head First authors through, and everyone gets better fairly quickly. At first, though, expect to have an "I suck" experience. (Practice tip: next time someone asks you to explain something, sketch your answer on a napkin or whiteboard.)

2) Creating the graphic
You need image editing software and a drawing tablet.

* Get a Wacom tablet.!
I would be helpless without my 4x6 Intuous, but the $99 Graphire is plenty for most people. (I do lust after Wacom's gazillion dollar Cintiq, but haven't managed to justify getting one.)

* I use Photoshop for 90% of my graphics
...but you can use Adobe's less-expensive Photoshop Elements to create new graphics and edit/resize photographs or graphics created in some other app. I'm not suggesting other high-end graphic tools like Adobe Illustrator, because I figure that if you're an illustrator, you already have it, and if you're not an illustrator, it's probably way more than you need.

* I use only the smallest portion of Photoshop's capabilities
nothing exotic or difficult. Mostly I use the Layer Styles palette to make drop shadows, and then the freehand paintbrush to draw the annotation arrows. The most important part of the process is preparing the graphics for the web, and Photoshop makes this quite easy using the "Save for Web"' dialog box. You want the file sizes as small as possible--I try for under 10k, but some of my graphics may be as big as 20k if they're quite complicated with lots of different colors and subtle shading.

* Charts and Graphs
Most of my graphs come entirely from Photoshop, but for pie-charts or more precise bar charts I use a different app to create the chart, then copy or import it into Photoshop to add annotations or play with the colors, etc. Obviously Excel would work for this, but I use Apple's Keynote which has basic charting capability. Graphs and charts are the one area I really want to develop, and so I'm currently reading:

--Tufte's books including his latest, Beautiful Evidence

-- Steven Few's books (a little more accessible than Tufte) including Information Dashboard Design: The Effective Visual Communication of Data

--I'm just starting to explore DeltaGraph software, so if you suddenly see over-the-top charts and graphs on the blog, you'll know that the novelty hasn't worn off.

* Stock photography
Stock photos used to be expensive, but thanks to web apps like iStockPhoto, you can get just about anything you can imagine for a couple dollars (if the photos are just for the web, you can get away with the lowest resolution/least expensive version of the photo).

People always ask about the 50's photos I use here and in the books--they're in a stock photography collection we own called Retro Americana from the Getty Images Photodisc collection. The Retro Americana collection is now "retired" (stock photo agencies often take collections out of circulation for a few years to prevent them from being overexposed), but it'll probably be available again in the future. Of course there are about a zillion other stock photo collections, not counting all the one-at-a-time pictures from places like iStockPhoto.

Another source we use (especially for the books) are Hemera's inexpensive PhotoObjects collections, which give you objects on a clear white background. (Like the, um, black lingerie I used in my "I'm not a woman blogger" post)

* Fonts
I use handwriting fonts for my hand-drawn annotations, and the best source for fonts is probably the inexplicably named fonts.com site.

* Find your own style!
Don't copy ours unless it feels like you. 50's people with cartoon thought bubbles, festive fonts, and hand-drawn annotations are what we do because it's what we like to do. (And, oh yes, because it's about the only thing we know how to do given our lack of design/art/illustration skills).

* More Resources
An earlier post of mine

RapidViz

Drawing on the right side of the brain

I'm sure many of you have other tips to add including other software apps, books, and ideas. My favorite tip is to go nowhere without a small notebook and something to draw with. When I have time to kill, I'm always sketching out ideas for graphics for the books or here on the blog. Have fun!