Making Notes, Guides and Manuals

Being able to communicate what we need done to a web page or when using a program is vital to the process of building a website.

Rather than attempt to communicate something that might be difficult to put into words, it's much easier to mark up a screenshot.

The marked-up screenshot can be emailed, and / or put into a Google Doc, or another service.

This guide is mostly for Mac users, but here's a tool which I hear is a popular choice of screenshot programs for Windows users.

Sometimes a movie is better than a picture. You can make simple animated GIFs with Giphy (Mac | Windows) or Droplr.


Screenshots on MacOS

Your best friend is:


AKA cmd shift 4 or in long form:

"hold down the command and shift keys, and tap the '4' key on the keyboard. Then release command and shift."

This activates some crosshairs that, when click-dragged, draw a selection rectangle.

When you release, it takes a snapshot of the part of the screen you captured with the rectangle.

The screenshot is saved to the desktop, where you can upload it to whichever service is appropriate to your needs, such as email, Google Docs etc.

Other screenshot methods

Takes a shot of the whole screen.

⌘⌥⇧3 (cmd option shift three)
Copies a shot of the whole screen to the clipboard. Paste it where you need it ⌘v.

⌘⇧4 (described above)
Takes a shot of whatever you enclose in a selection rectangle.

⌘⇧4, then spacebar
Use the spacebar when in selection mode to take a shot of a window or dialog box.

Copies the selected area to the clipboard. Paste it where you need it ⌘v.

Annotating Screenshots

Open the screenshot in, the default simple image editor included with MacOS. It's very good for a number of things, especially annotation.

Go to the Tools menubar item > Annotate > Text, Oval, etc

When you close the file in Preview your changes are committed ie. they are saved.

If you open the same file again in Preview you won't be able to adjust your annotations.. but actually you can.

You can File > Revert to a previous version in Preview after opening a seemingly-saved file. Then you can edit the annotations.


Now you can attach your annotated screenshot to an email, or upload it to Trello, Google Docs, DropBox, or wherever want.

I run my screenshots through ImageOptim to make them upload and perform faster at the other end.


Share this article: