Technical Haiku – The Art of the Screen Shot With Techsmith Jing

(Reading time: 5 – 8 minutes)

Excellent screenshots will take your blog from so-so to superb.

Website In A Weekend readers ask “How do you create those killer screenshots?” so I’ve decided to spill the beans.

It’s simple: I use Techsmith’s Jing product, a free download (with inexpensive Pro upgrade) that will have you cranking out professional quality screenshots in minutes.

Jing is deceptively simple

Jing is so simple, it’s easy to miss how it’s simple features provide a lot of expressive power.

Using Jing is a little bit like writing haiku. In haiku, the rules are very simple, and very rigid. This simplicity and rigidity provides discipline for harnessing creative power. Jing has so few graphical elements (4), that your attention must be concentrated on communication instead of presentation.

What Jing does

Jing was designed to make it extremely easy to take screenshots and make short screencasts. You get to save in png for screenshots, and swf for screencasts. Really simple.

You have 4 graphical elements for annotating your screenshots:

1. Text: you get a choice of fonts, and you can scale your text from very small to very large.
2. Frame: Draw a rectangular outline in color for emphasis.
3. Highlight: I don’t use the highlighting. First comment with an example of using highlighting I’ll send a whitepaper of your choice.
4. Arrow: Draw readers attention to elements of your screenshot; connect text with boxes.

Each graphical element can be displayed with 1 of nine colors: red, blue, green, white, navy, purple, yellow, orange and black. Opacity and custom colors can be defined, but you can go far without ever using custom configuration.

Here’s an example screenshot, using the numbered list above. It’s “recursive,” I’m using the list and screenshot to support each other.

Jing is radically simple. There’s no rotation, no angles, and no curves. You can’t change the line thickness on frames. There’s no copy, cut or paste. Elements are stacked, and you can’t change the stacking order. In short, what you see is exactly what you get. The learning curve for using each tool is very short.

The learning curve for effectively communicating with Jing… well, like any path to mastery, it requires time, discipline and practice. Just taking a screenshot is no guarantee of effective communication. You still have to consider your audience, what you want to say, and how you want to say it.

Working with Jing

Some keys for working with Jing:

1. Knowing exactly what you want to communicate. Confusing graphics won’t help confusing text. Get your story straight first.
2. Understanding Jing’s capability. Jing does a very small number of things very well. Jing is so precisely designed for simple screenshots, that if you’re frustrated with it’s lack of capability, you’re attempting to use the tool outside of what it was designed to accomplish. In short, if Jing won’t do what you want, you need a different tool.
3. Limiting the information on each screenshot. Each screenshot should illustrate one action or one process only. Do not embed a choice into your screenshot unless that’s the only point of the screenshot. if there’s two ways to do something, pick one way and show that. Use another screenshot to show the other way. There’s many paths through the forest, but you can’t walk them all at the same time.
4. Using screenshots to support your text (not the other way around). Your story is in your text. Your screenshots support that text. Feel free to outline your article with screenshots, but without your writing to explain to your reader exactly what the screenshot means, you’re just wasting time and bandwidth. For example, note how I use the screenshot of the list of graphical elements to support the explanation of the graphical elements.

Jing can be used for more than screenshots. Consider the following image where I quickly laid out a chapter title page for an ebook:

That’s much faster and at least as spiffy as bumbling my way through the GIMP.

There’s more. You can create art using Jing. Check this out:

Will the tornado tear down the buildings? Will that camera get a picture? And what about that whirlagig, what’s that all about? These are good questions, but I’m not going to tell you the answer just yet.

Note: I didn’t claim you could create good art. But I have demonstrated Jing’s capability.

It’s not all roses

Jing has some annoyances. The user interface is non-standard, for no good reason. Yes, differentiating your product is good, but not by redefining standard user interface controls. For example, with the Pro version, you have to select between screencast file types in the global preferences menu. This should be part of the drop down choices when saving a screencast. It’s technically feasible, I know because I designed and coded similar capability into a product for a previous client. It’s confusing. Techsmith should fix it.

I could easily double the length of this article, but that wouldn’t leave you enough room to explore Jing for yourself. Or maybe it would. But it’s a nice day outside, it’s right before our Thanksgiving holiday in USA, and I need to do some work on the hRecipe plugin which is crashing for two European users. So your on your own for now.

If you have any fun techniques to share about using Jing – for any purpose – leave a comment. Even better, I’d love to have your experience with Jing written up as a guest post.