« Ouch | Main | How will Sun bounce back? »

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.


Graphicschartsgraphs
Graphicsvenndiagrams

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.

Graphicscomparisons

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.

Graphicsreminders

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.

Graphicsmetaphors

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.

Graphicsgratuitous


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!

Posted by Kathy on November 10, 2006 | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d83451b44369e200d834525f9d69e2

Listed below are links to weblogs that reference Add graphics to your blog, book, or presentation:

» Add graphics to your blog, book, or presentation from Gubatron
Hi Passionate Team!!!,Our RSS engine has fetched and linked this post to our homepage (http://www.wedoit4you.com), if the post gets enough attention this week, we'll talk about it on our next podcast (http... [Read More]

Tracked on Nov 10, 2006 4:48:49 PM

» Add graphics to your blog, book, or presentation from
Kathy Sierra tell us to add graphics to our blog, book or presentation, and present us with several types of graphics and some how to information on how to make them. [Read More]

Tracked on Nov 12, 2006 9:36:26 AM

» Graphics and the Communication Process from D. Brown Online - Project Management Productivity & Construction Operations
Kathy Sierra makes some great points about how to use graphics to really communicate a point. I instantly bought several of the books she describes and all the points really hit home. Whenever I have worked on designing a communication... [Read More]

Tracked on Nov 12, 2006 10:43:07 AM

» links for 2006-11-12 from Alan Bradburne
Codehackers - WiLMa Nice idea - set actions for when you change your location. turn on password protection at starbucks, change the printer at the office, etc (tags: location osx software utilities wifi wireless profiles) Creating Passionate Users: Add gr [Read More]

Tracked on Nov 12, 2006 4:23:49 PM

» How to craft a popular blog... from Notes from the Toolshed: Developing Aptitudes for Dynamic Professional Growth
I had to post this because it is what my wife (background in education) has said my blog needs... Kathy Sierra - does it again with a short tutorial on the why and how of adding graphics to your blog,... [Read More]

Tracked on Nov 13, 2006 2:34:26 PM

» Procrastination Destination from Katyas NonProfit Marketing Blog
The best, most kick a** blog if you want to get motivated to do things differently is Creating Passionate Users. Youll find yourself spending a looong time on this blog because its so darn good. [Read More]

Tracked on Nov 13, 2006 7:19:40 PM

» Adding Visuals: A Powerful Thing from InsureMe Agent Blog
Another on-the-money post from Creating Passionate Users! This time it involves using visuals to help capture the attention of your audience and get them to respond to your book, blog, presentation, etc. CPU is pretty famous (I think) for their... [Read More]

Tracked on Nov 14, 2006 5:39:24 PM

» Everything you wanted to know about Graphics but were afraid to ask from MyMicroISV
can be found in this great post by Kathy Sierra at the Creating Passionate Users blog: Add graphics to your blog, book, or presentation. Kathy covers: tips for creating visuals that tell the story better and faster than words, types of graphic... [Read More]

Tracked on Nov 17, 2006 4:27:56 PM

» Creating Graphics for Presentations from Carmen Ferrara's Weblog 2.0
Great post over at the Creating Passionate Users blog on creating graphics for your blog, book, or presentation. Incorporating graphics into a presentation can really help enforce the message you are trying to convey. However, creating ... [Read More]

Tracked on Nov 19, 2006 9:49:29 AM

» Software, Features & Design from D. Brown Online - Project Management Productivity & Construction Operations
"Customers are expert in knowing what they need to accomplish, but not in knowing how software ought to be designed to support their needs. Allowing customers to design software through feature requests is the worst form of disaster by committee."... [Read More]

Tracked on Nov 19, 2006 10:51:21 AM

» Very Good and Write from AKMA’s Random Thoughts
And our bounden duty. A couple of months ago, Micah emailed me the link to this page, which I promptly forgot about until a recent spasm of emailbox-cleaning. From my exalted position as Writing Director at Seabury (no benefits, just more respon... [Read More]

Tracked on Nov 24, 2006 11:46:07 AM

» Graphics in Blog Posts! from Social Software and more...
In addition to my post on blog habits I found an interesting post by Kathy Sierra on how to insert graphics into your blog, presentations and so on (via Jochen Robes and Stephen Downes). Of course, we all know how important it is to illustrate our tho... [Read More]

Tracked on Nov 26, 2006 6:51:47 AM

» Lo que no está escrito, y en Google, no existe from Angel "Java" Lopez
Hoy, si me permiten, voy a estar un poco insistente, recordando dos “mindsets” que trato de seguir en [Read More]

Tracked on Sep 10, 2009 7:57:14 AM

Comments

We've built Gliffy to help folks quickly add drawings and diagrams to their blogs and wikis. Gliffy is similar to Microsoft Visio, but works in your web browser without a download. Give it a try for free:

http://www.gliffy.com

Chris Kohlhardt
Co-founder, Gliffy Inc.

Posted by: Chris Kohlhardt | Nov 10, 2006 5:17:15 PM

Thank you, so helpful - I love this blog. I record a lot of movies (Camtasia) for my customers, so I am always looking to reuse/releverage elements. Two resources I depend on: smartdraw (http://www.smartdraw.com/) is so easy-to-use out of the box (new version 2007, sets a standard for interfacte ease of use) and has tons of ready-to-use icons/charts. For a price, the new Powerframeworks service (http://www.powerframeworks.net) has prefab flow-charts that save time because they are less about icons and more about communicating concepts and finding graphic metaphors.

Posted by: David Harper | Nov 10, 2006 6:28:07 PM

If you're really interested in learning about (statistical) graphics, I would highly recommend the Grammar of Graphics by Lee Wilkinson. It's a big book, but covers pretty much all the bases (data, perceptual theory, aesthetics etc) as well as providing a theoretical framework for describing graphics. It's unlikely to help you in the day-to-day construction of graphics, but will (hopefully) profoundly change how you think about graphics, and inspire you to create new types of graphics.

(However, the book doesn't discuss interactive graphics in depth see GGobi and Mondrian for examples of what they can do)

Posted by: Hadley | Nov 10, 2006 7:05:39 PM

There's something broken in the presentation of the types of graphics. The doubled headings (in graphics, then text) add more confusion to me than clarity; especially the non-doubling of the Venn Diagram one. It's just weird.

Posted by: sapphirecat | Nov 10, 2006 7:13:40 PM

I make it a point to have at least 1 graphic with each post... the exceptions being when I am posting a video. Aside from differentiating your blog and assisting to 'tell the story', images really help on RSS feeds as well. Since feedreaders supply a generic view of a post, images really accent the post and bring attention to it.

Thanks for the great post. Fantastic advice!

Doug

Posted by: Doug Karr | Nov 10, 2006 7:45:50 PM

Exceptionally useful post! i.e., Bloody kick-*ss awesome!

Posted by: Sheamus | Nov 11, 2006 1:44:06 AM

Kathy

I can wholehertedly recommend Tufte's books, particularly his earlier ones.

Ditto for Richard Saul Wurman's classic "Information Architects".

And you could hardly do better for pure graphical inspiration than Wurman's amazing website "Understanding USA" at http://www.understandingusa.com/

Graham Hill

Posted by: Graham Hill | Nov 11, 2006 3:09:22 AM

Regarding stock photos I've found flickr very useful. There is an immense amount of quality images out there with a Creative Commons licence. Check out

http://flickr.com/creativecommons/

Remember that CC doesn't mean "no licence": be sure to mention the original creator of the photo and only do stuff granted by the CC licence. flickr has a very nice CC search feature (including the different CC licences)

Posted by: Hendrik Volkmer | Nov 11, 2006 3:09:57 AM

Venn Diagrams for President, 2008

Posted by: Justin D-Z | Nov 11, 2006 7:13:56 AM

Excellent information, Kathy... Thank you. Being one of the "graphically impaired", I greatly appreciate the categorization of graphic types. It helps me narrow down my choices rather than just be faced with the idea of "getting a picture out there"...

Posted by: Thomas "Duffbert" Duff | Nov 11, 2006 8:56:28 AM

I agree that Wacom tablets are great. I use mine for everything -- even when doing word processing. In fact, over time, I've developed a weird typing style that uses only the middle finger and thumb of my right hand so I can hold the stylus at all times!

I also agree that Adobe Photoshop is the software of choice; even if it is wildly overpriced. However, as Kathy mentioned, the cheaper Adobe Elements may be all you need for simple tasks. I use a long list of 2D and 3D graphics software, but if I could only pick one I would use Photoshop.

Here are a couple quick design tips:

1) Make sure your graphics have adequate "contrast."
Kathy's venn diagram (with the blue and red circles that feature black text) is a good example of what NOT to do. Sorry, Kathy! ;>) Light colored (or white) text on those dark colors would have been much more readable (especially on older CRT monitors).

2) Avoid overly bright colors.
Bright colors (like R:0, G:255, B:0) scream AMATEUR! Instead, choose a color (like R:0, G:200, B:0) that is less saturated and easier on the eyes. (White, of course, is the exception.)

Johnny

Posted by: Johnny | Nov 12, 2006 11:11:09 AM

Awesome, this is the sort of stuff I need to learn. I'm a SAS programmer, and am (in my own not so humble opinion) very good at working with data, but not so hot on presenting it.
How about some info about free tools and resources?
My current favourites are
Paint.Net (http://www.getpaint.net/) as a stand-in for Photoshop, it's pretty well kitted out, and is regularly updated, definitely more than adequate for touching up graphs etc.
I recently found yEd from yWorks (http://www.yworks.com) to be very good for flowcharts etc, though limited in its number of available shapes, it does allow you to use images for the nodes, which is pretty snazzy. I also like the fact that you can chuck all your nodes and joining arrows any which way, then get the software to re-arrange them afterwards.

Anyone got any other suggestions?

Posted by: ChrisW75 | Nov 12, 2006 8:57:28 PM

I absolutely agree with you.
Actually, I already learned about the advice on this post while I have read this blog.
And, I am trying to do when I write posts on my blog.

Posted by: Yang | Nov 13, 2006 1:42:52 AM

please visit my site and suggest me too:
http://flash-cartoons-drawing.blogspot.com

i loved ur site
its really cool

Posted by: sumangal | Nov 13, 2006 3:09:39 AM

I have no intention of reigniting an age-old flame war, but I will point out one additional option for image editing. The GIMP (Gnu Image Manipulation Program) has been able to do everything I've ever needed to do with an image. I am not a Photoshop user, so I won't call it a Photoshop replacement, and I understand that Photoshop users don't care much for GIMP (Photoshop users are seriously PASSIONATE). GIMP does layers, tons of transforms, and has tools for tricks like drop shadows and antique effects, and much more than I know what to do with.

GPL Licensed, so its included with most Linux distros, and a Win32 and Mac versions are available for download from http://www.gimp.org/

Posted by: Kiaser Zohsay | Nov 13, 2006 7:35:46 AM

Liked your blog about graphics. Felt it was a shame to not be able to really see your graphics though. It would have been nice to zoom in and take a look at the examples you were talking about rather than just regard them as part of a taxonomy.

Posted by: carl myhill | Nov 13, 2006 2:58:16 PM

Great post and great timing!

I had actually been debating on whether I should contact you for basically this exact information (creating the nice images and such that you use here).

My only additional question is if you've used an Windows based software that produces sleek looking graphs. I've used a few various ones but haven't really liked any of them.

Posted by: Nathan | Nov 13, 2006 6:02:54 PM

Kathy, thanks for reminders of all the different types of graphics. Excellent.

I want to put in a plug for OpenOffice.org Draw. It runs on Windows, Linux, Mac, OS/2 (yes, it does ;> ), etc. and is a very easy but powerful vector drawing program. It also has some raster editing features like changing to grayscale, changing RGB, contrast and brightness, etc. Plus you can export to PNG, JPG, GIF (with transparency), EPS, etc. I use it for everything, with just a little final polishing in Photoshop as needed.

Posted by: Solveig Haugland | Nov 14, 2006 9:22:22 AM

It's the balance of content that matters the most to me.

Vishal S.

Posted by: Vishal Shah | Nov 14, 2006 1:12:10 PM

My husband has loved this blog for quite a while and now that I finally get around to checking out your information I understand why. Good information in a succinct, well-organized format.

Posted by: Michelle | Nov 14, 2006 4:10:33 PM

Great post! I often pull out a napkin and draw pictures when talking with people face to face but I never think of "drawing pictures" on my blog. Thanks for the great advice.

Posted by: Allen Arnn | Nov 14, 2006 9:46:32 PM

I'd second that GIMP plug - the latest version kicks ass, and once you figure out how to draw curves (BTW there are some great books on it - GIMP, like Photoshop, is too big to just grope around with in the hope that you'll work it out, but unlike Photoshop there aren't enough good tutorial sites) it really rocks. There's a version that runs natively in Mac OSX without the need for X windows too. The only thing I'm not sure of is the Wacom support - I suspect it may not work with a Wacom, but if you use paths to draw with you don't need a Wacom.

Posted by: Matt Moran | Nov 15, 2006 5:02:35 AM

I personally would put another stage in this. Before you consider putting a graphic in, whether you're struggling to explain yourself or not, look at the language you're using. If it's not in plain english then no graphic, no matter how nifty, is going to help illustrate your point!

Posted by: Corinne Pritchard | Nov 16, 2006 6:14:49 AM

The single most important takeaway?

What point are you trying to make?

Know it, own it, make it. Finish.

Posted by: patty fair | Nov 16, 2006 6:25:20 PM

Great article - I love your illustrations.

Another tool I'd recommend to people who can't afford to shell out on Illustrator/Photoshop is Xara.

http://www.xara.com

It's an amazing piece of software, really usable and very cheap.

Posted by: Ian Kershaw | Nov 17, 2006 4:56:52 AM

The comments to this entry are closed.