{"id":1899,"date":"2017-11-01T16:41:43","date_gmt":"2017-11-01T14:41:43","guid":{"rendered":"http:\/\/themanual.local\/?p=1899"},"modified":"2017-11-14T10:12:19","modified_gmt":"2017-11-14T08:12:19","slug":"making-notes-guides-manuals","status":"publish","type":"post","link":"https:\/\/simonbarnett.co.za\/themanual\/making-notes-guides-manuals\/","title":{"rendered":"Making Notes, Guides and Manuals"},"content":{"rendered":"

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.<\/p>\n

Rather than attempt to communicate something that might be difficult to put into words, it’s much easier to mark up a screenshot.<\/p>\n

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

This guide is mostly for Mac users, but here’s a tool<\/a> which I hear is a popular choice of screenshot programs for Windows users.<\/p>\n

Sometimes a movie is better than a picture. You can make simple animated GIFs with Giphy (Mac<\/a> | Windows<\/a>) or Droplr<\/a>.<\/p>\n

\n

 <\/p>\n

Screenshots on MacOS<\/h2>\n

Your best friend is:<\/h3>\n

\u2318\u21e74<\/strong><\/p>\n

AKA cmd shift 4<\/strong>\u00a0or in long form:<\/p>\n

“hold down the command and shift keys, and tap the ‘4’ key on the keyboard. Then release command and shift.”<\/p><\/blockquote>\n

\"\"<\/p>\n

This activates some crosshairs that, when click-dragged, draw a selection rectangle.<\/p>\n

When you release, it takes a snapshot of the part of the screen you captured with the rectangle.<\/p>\n

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.<\/p>\n

\n

Other screenshot methods<\/h3>\n

\u2318\u21e73
\n<\/strong>Takes a shot of the whole screen.<\/p>\n

\u2318\u2325\u21e73\u00a0<\/strong>(cmd option shift three)
\nCopies a shot of the whole screen to the clipboard.\u00a0Paste it where you need it\u00a0\u2318v.<\/p>\n

\u2318\u21e74 (<\/strong>described above)
\nTakes a shot of whatever you enclose in a selection rectangle.<\/p>\n

\u2318\u21e74, then spacebar
\n<\/strong>Use the spacebar when in selection mode to take a shot of a window or dialog box.<\/p>\n

\u2318\u2325\u21e74
\n<\/strong>Copies the selected area to the clipboard. Paste it where you need it\u00a0\u2318v.<\/p>\n

\n

Annotating Screenshots<\/h3>\n

Open the screenshot in Preview.app, the default simple image editor included with MacOS. It’s very good for a number of things, especially annotation.<\/p>\n

Go to the Tools menubar item > Annotate > Text, Oval, etc<\/p>\n

\"\"<\/p>\n

When you close the file in Preview your changes are committed ie. they are saved.<\/p>\n

If you open the same file again in Preview you won’t be able to adjust your annotations.. but actually you can.<\/p>\n

You can\u00a0File > Revert<\/strong> to a previous version in Preview after opening a seemingly-saved file. Then you can edit the annotations.<\/p>\n

\n

Next<\/h3>\n

Now you can attach your annotated screenshot to an email, or upload it to Trello, Google Docs, DropBox, or wherever want.<\/p>\n

I run my screenshots through ImageOptim to make them upload and perform faster at the other end.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Being able to communicate visually is vital to the process of building a website.<\/p>\n","protected":false},"author":1,"featured_media":2039,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,6,4],"tags":[19,13,14,15],"class_list":["post-1899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-specific-instruction","category-content-manager","category-beginner","tag-preview-app","tag-notes","tag-screenshots","tag-communicating"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts\/1899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/comments?post=1899"}],"version-history":[{"count":0,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts\/1899\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/media\/2039"}],"wp:attachment":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/media?parent=1899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/categories?post=1899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/tags?post=1899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}