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.

Point at the thing the reader has to click. One arrow per step is usually enough.

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 or dash-dot-dot.
• Arrow type: Straight or curved. Expanding makes the line wider towards the point.
• 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.
• Start size and End size: How big each end is, set separately and independently of the line thickness.

A box around a region: a form section, a menu, a row in a table. Use it when the reader needs to look at an area rather than one control.

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: Makes the shape easier to see on a busy screenshot.

An arrow with nothing on the end. Use it to connect two things, to underline a value, or to separate part of a screen. It has the same line styles and end caps as the arrow.

Freehand. Circle something the way you would on paper. It is the least precise tool here, and a hand-drawn circle looks less formal than a rectangle. To hide a value, use a filled rectangle instead: a scribble can leave it readable.

• 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. Use it when a text label alone could be read as belonging to the wrong thing.

• 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.

• Shape: Circle, square, rounded, tag, diamond or teardrop. A teardrop gets a point direction and a tag a corner position.
• Size: The badge size.
• 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.

• 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 shows the reader where to look, and unlike cropping it keeps the rest of the screen visible.

• 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 readers should not see, 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 show the reader where you clicked. 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. Lines up several objects exactly.
• Apply style to: Pushes the current object's styling onto every object of that type in the step, or across the whole guide, so every step uses the same style.

• 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.