Annotate a Screenshot

The toolbar runs down the left of the canvas. A button with a small corner triangle is a group: click and hold, or right-click it, to reach the other tools inside. The button then shows whichever one you used last.

Every tool has a keyboard shortcut, in brackets below. They are worth learning if you annotate more than a handful of steps.

The workhorse. Point at the thing the reader has to click. One arrow per step is usually right; a screenshot with four arrows is a screenshot that should have been four steps.

Drag from where you want the tail to where you want the point. Both ends stay draggable afterwards.

• Line: Thickness and colour.
• Line style: Solid, dashed, dotted, long dash, dash-dot.
• Arrow type: Straight or curved, regular or expanding.
• Line start and Line end: What sits on each end: none, arrow, circle, bar, square or diamond. Setting both gives you a double-headed arrow for spanning a distance.
• End size: How big the head is, independently of the line thickness.

A box around a region: a form section, a menu, a row in a table. Where an arrow says "this one", a rectangle says "all of this".

Hold Shift while dragging to keep it square, or circular for the oval.

• Fill color: Leave it empty for an outline. A filled shape is also the safe way to cover something up, since nothing survives underneath it. See blur or redact.
• Border color and width: The outline itself.
• Border radius: Rounds the corners, on the rectangle.
• Shadow: Lifts the shape off a busy screenshot.

An arrow with nothing on the end. Use it to connect two things, to underline a value, or to rule off part of a screen. It carries the same line styles and end caps as the arrow, so a line with a circle at one end and a bar at the other is a measurement rather than an instruction.

Freehand. Circle something the way you would on paper, or scribble over a value you do not want read. It is the least precise tool here and that is the point: a hand-drawn ring reads as a person pointing rather than a diagram.

• Line: Thickness and colour, set before you draw.

A label on the screenshot itself. Keep it to a few words: anything longer belongs in the step description, where it is searchable and translatable and does not cover the screen you are documenting.

• Font: Family, size, weight and colour.
• Text background: A panel behind the text, for when the screenshot underneath is busy.
• Outline: A contrasting edge on the letters, which does the same job without a box.
• Text align: Left, centre or right inside the box.

A speech bubble with a pointer: a sentence of explanation attached to the exact spot it is about. This is the one to reach for when a label alone would be ambiguous, because the pointer removes the ambiguity.

• Pointer style: A speech-bubble tail or an arrow.
• Tail size: How far the pointer reaches.
• Box: Border, padding and background of the bubble.

Numbered badges for a sequence that happens inside one screenshot: fill this, then this, then press that. Folge counts up as you place them, and renumbers the rest if you delete one in the middle.

• Size: The badge diameter.
• Fill and border colour: Yellow with an amber edge by default.
• Font: The numeral itself.
• Lock: Pins a number so it keeps its value when an earlier one is deleted. Useful when the order on screen is not the order you placed them in.

A translucent wash, like a marker pen. It draws the eye without hiding what is underneath, which makes it the right choice for a value the reader still needs to read. Use it where a rectangle would feel heavy-handed.

• Fill color: Including its transparency.

A magnifying glass over part of the screenshot, enlarged in place. It solves the problem of a wide screenshot where the important detail is eight pixels tall: the reader keeps the context and still sees the detail.

• Magnify: How much it enlarges.
• Shape: Circle or rectangle.
• Border and shadow: The frame around the lens.

The inverse of a highlight: everything outside the area you draw is dimmed. On a dense screen it is the strongest way to say "look here and ignore the rest", and unlike cropping it keeps the surroundings visible for orientation.

• Dim Opacity: How dark everything else goes.
• Remove All Spotlights: Clears them from the step in one go.

Hides customer names, account numbers and anything else that should not leave the building, with a smooth blur or pixelation, on one step or on every step at once.

It has its own page, because what is safe to send afterwards is not obvious: blur or redact sensitive information.

A mouse pointer you place yourself, and a click marker. Both put the reader where your hand was. Folge can also mark your clicks automatically while it captures, so reach for these when you need one in a screenshot that was imported rather than captured, or when the automatic marker landed slightly off.

• Cursor type: Hand, pointer or text caret.

The last three buttons are not annotations. They act on the screenshot itself rather than drawing on top of it.

• Crop (C): Trims the screenshot. Worth doing before you annotate, because cropping afterwards moves everything you drew.
• Grab text (K): Reads the text out of the image and puts it on your clipboard, so an error message can be pasted into the step description instead of retyped.
• Add image: Places another image on the canvas: a logo, an icon, an inset diagram.

Whatever is selected, the Object panel on the right has the same three blocks at the top.

• Arrange: Front, forward, backward, back. Matters the moment a tooltip lands behind a rectangle.
• Align: Left, centre, right, top, middle, bottom. Three arrows aligned on their left edges look deliberate; three nearly aligned look sloppy.
• Apply style to: Pushes the current object's styling onto every object of that type in the step, or across the whole guide. This is how a guide ends up looking like one document instead of forty.

• One idea per screenshot: If you need three arrows, you probably need three steps.
• Annotate after you capture, not during: Record the whole process first, then go back and mark it up. Stopping to draw breaks the flow and you miss clicks.
• Leave room around the mark: An arrow touching the edge of a button is harder to read than one that points at it from a little way off.
• Say it in the description if it needs a sentence: Text on the image cannot be searched, translated or read by a screen reader. The description can.