How to Annotate a Screenshot: Arrows, Boxes, Blur

A practical guide to annotating screenshots so people understand them instantly: which callout to use when, how to blur private data. With examples.

An annotated screenshot does the job of a paragraph. "Click the Export button in the top-right of the Billing page, under the date filter" becomes one image with one red box. Done well, annotation is the fastest form of documentation there is; done badly, it is clutter. This guide is about doing it well, and it ends with the quickest ways to get there, including letting an AI place the callouts for you.

Start with the crop

Before any arrows: crop. The reader should not have to search the image. Keep enough context to recognise the screen (a page title, the left nav) and remove everything else. If the point of the screenshot is a 200-pixel dialog, the image should be roughly the dialog plus a margin.

Choose the right callout

Each callout answers a different question.

Callout	Use it when	Avoid when
Box (rectangle)	"Look at this area": a form, a card, a table row	The element is tiny; a box around a 12-px icon hides it
Arrow	"This exact thing": a button, a toggle, a link	You need more than three; it becomes a porcupine
Ellipse	A single value or word inside dense text	Around rectangular UI; it looks sloppy
Numbered step	A sequence: 1 open menu, 2 pick option, 3 confirm	The order does not matter
Highlight	Emphasise a line of text or a row	Over coloured backgrounds; it disappears
Text label	The callout needs a word or two of explanation	It restates what the UI already says
Blur / pixelate	Emails, names, tokens, amounts, faces	Hiding something the reader needs to see

Rules of thumb: one idea per screenshot, at most three callouts, the same colour for all of them (a red that contrasts with the UI is the safe choice), and consistent stroke width across a document.

Arrows that actually point

Start the arrow in empty space and end it touching the target, not hovering nearby.
Keep it short. A long diagonal across the image draws the eye along the line, not to the point.
Do not cross text.
Add a label at the tail, not the head, so the head stays clean.

Numbered steps

When the reader has to do several things in order, numbers beat arrows. Place each badge on the top-left corner of the element, keep the numbering left-to-right and top-to-bottom where you can, and list the steps as text below the image with the same numbers. Readers skim the numbers first, then read.

Blur what should not leave the building

Screenshots leak. Before you share, blur or pixelate:

Email addresses, phone numbers, full names of customers
API keys, tokens, invoice numbers, account IDs
Amounts and balances
Browser tabs and bookmarks that reveal other work
Faces in webcam thumbnails

Pixelate rather than draw a black box when you want the layout to remain readable. Never rely on a translucent blur that can be reversed: a proper pixelation or a solid cover is final.

Text labels: fewer, shorter

A label should add what the image cannot: "Click here" is useless, "Export runs nightly, so today's rows are missing" is useful. Keep labels to a handful of words, in a filled pill with white text so they stay legible on any background, and place them where they do not cover the UI you are pointing at.

Frames and backgrounds

Raw screenshots have hard edges that disappear into white documents and look unfinished on social media. Two fixes:

A window frame. A browser bar with three dots (and optionally the URL) tells the reader this is a web page. A phone bezel does the same for mobile shots.
A background with padding. A solid colour or a soft gradient behind the framed screenshot, with 5–10% padding, rounded corners and a soft shadow. This is the "CleanShot look" that makes product screenshots feel designed.

Pick one background for a whole document or deck so the set looks consistent. Save the style and reuse it.

Export settings

PNG for UI. JPEG smears text.
2× resolution when the image will be zoomed or printed; 1× is fine for chat.
Keep the original unannotated file. You will need it when the UI changes and you want to redo the callouts.

Three ways to annotate a screenshot

Built-in tools. macOS Preview and Markup, Windows Snipping Tool, iPhone Markup. Arrows, shapes and text; no blur on some, no frames on any.
An online editor. Take a screenshot online and annotate it in the browser: arrows, boxes, ellipses, numbered steps, highlight, pixelate, crop, then background, padding, corners and a browser or phone frame. Download the PNG or copy it.
Let the AI do it. On takeascreen.com you can type "take a screenshot of our pricing page with the Pro plan boxed and the monthly price circled". The agent opens the page, captures it, anchors each callout to the real element on the page (so a box lands exactly on the button, not roughly near it), adds the frame and background and sends a share link. You can still open the result and move anything. Start with a dollar.

Frequently asked questions

What is the best colour for screenshot annotations?

A saturated red or orange that does not appear in the UI you are capturing. If the product itself is red, switch to a strong blue or yellow. Use one colour per document.

How do I blur part of a screenshot on a Mac?

Preview has no blur. Use the Screenshot app's Markup only for shapes, and an online editor or a dedicated tool for pixelation. In the takeascreen.com editor draw a blur region over the private part and export.

Should I annotate screenshots in documentation?

Yes, but sparingly: one callout that shows where the action happens. Over-annotated docs age badly because every UI change invalidates the artwork.

Can I annotate a full-page screenshot?

Yes. Capture the full page with a Chrome extension or DevTools, then annotate as usual; crop sticky headers that repeated during stitching.

Related: how to take a screenshot on every device.