Rabbit Drawing Step By Step

Sometimes words aren't enough. Use Google Drawing to show the steps in a process.

"Click the sprocket in the upper right." Pause.

"No, no that one. The other sprocket." Pause.

"Yes, that one."

If you've tried to teach someone how to use software, you've used words to explain how to navigate through on-screen choices. Describing where to look and what to choose takes time, precision, and patience. Unfortunately, when I try to help people learn software, my words - or my patience - sometimes fail me. I resort to taking control to show people how things work. That's not good.

Pictures

I've learned that pictures often explain navigation better than words. Instead of a wordy explanation, I'll take a screenshot, then draw an arrow or circle on the image. Together, the picture and words convey my meaning better than either would separately. (I typically use Evernote's Skitch app for quick annotation on a single image on iOS or Android devices. Skitch is also available for the Mac. On Chrome OS and in the Chrome browser, I tend to use PicMonkey.)

But not everything can be explained with a single image. Sometimes I need to explain a multi-step process: "First, second, next, then, etc." I could take multiple screenshots, and then display each image in a step-by-step sequence. Instead, I prefer to combine sequential steps into a single illustration. That's when I reach for the Google Drawing tool in Google Apps.

Google Drawing

A Google drawing can include multiple images and text items combined into a single image. I use a combination of numbers and arrows to convey sequences. A Google drawing can be saved as an image file (.png, for example) to be used in another document, or exported as a standard .PDF document.

Here's the completed image, showing the key steps need to create a multi-step process image using the Google Drawing tool.

b-Multi-Step Process Illustration with Google Drawing.png

How to create a multi-step process image using the Google Drawing app

And here's the same process, in words - and with a few details.

1. Capture screen shots of each step in the process

Navigate through the process, capturing a screenshot for each step. I recommend you use a tool that lets you capture a partial screenshot. This lets you focus the user's attention on the relevant portion of the screen, instead of capturing the entire screen.

You can capture a screenshot for desktop applications using system tools on Mac (Command-Shift-4) or Windows (use the built-in Snipping Tool). To capture web screenshots, I suggest the AwesomeScreenshot.com browser extension, which works with Chrome, Firefox, and Safari.

Mobile screenshots are also easy to capture. iOS users take a screenshot by holding the Power and Home buttons down simultaneously. Android 4.0 (or newer) users take a screenshot by holding the Power and Volume Down buttons simultaneously. For both iOS and Android, you'll see and hear a confirmation that a screenshot has been taken.

2. Create a new Google Drawing

Go to drive.google.com (you may need to login). Click the Create button, and then choose Drawing. This will create a new, untitled drawing.

3. Insert a white background, filling the page.

This step is critical: insert a rectangle the size of the entire image. For most purposes, I suggest you make the background white. The rectangle should completely cover the white-and-grey checkered background of the drawing space. Think of the white background as priming the canvas: it covers up the checkered squares, which would otherwise display when your multi-image item is exported.

This puts the rectangle on the "bottom" layer, so that additional images you add will display "on top" of the white background. (Otherwise, the large rectangle would be "on top" of your other images, hiding them from view. You'd only see a white rectangle, which is a fantastic start if you're trying to recreate a Kasimir Malevich painting, but probably not what you intend. If this happens, select the white rectangle and choose Arrange | Order | Send to Back. )

4. Insert images.

Insert your screenshots and images one at a time by selecting Insert | Image. Resize the images by selecting and adjusting the sides (or corners) of the images. Hold the shift key down while resizing to maintain the item's original proportions. Arrange the images in a sequence that logically illustrates the steps.

5. Insert arrows and/or numbers to show sequence.

Insert arrows or text boxes, as needed. Arrows (Insert | Shape | Arrows) direct attention to on-screen items. Text boxes (Insert | Text box) indicate sequence when filled with numbers, or explain details with brief captions. Repeat as needed.

6. File | Download as

To use your image in another document (or if you plan to upload it to a website), download your drawing by choosing File | "Download as". I recommend the PNG format if you need to insert into another document. If you choose the PDF format, the document itself can be easily viewed and shared across many platforms and systems.

Download your Google Drawing in PNG format to use in other documents

Bottom line

The next time you get the urge to grab the mouse to show someone how to complete a task, take the time to create a Google drawing to show the process instead. Or, as an English teacher might have told you once, "Show, don't tell."