ClarShot is now on the Chrome Web Store, for Chrome, Brave and Opera too.

Guide

How to annotate a screenshot for client feedback

The short answer

Capture the whole page, put a number on each change, mark the spot with a box or an arrow, and write the notes in the same order. Cover anything the reader should not see, then send one PNG, or a PDF when the page is long.

On a phone? The ClarShot steps below are for a computer: ClarShot runs in Chrome and Edge on Windows, Mac, Linux and ChromeOS.

Feedback on a website or a design goes wrong in the same few ways: the reader cannot tell which element you mean, the notes and the marks do not line up, or the screenshot shows data the reader should not see. A simple method fixes all three.

The method: one number per change

  1. Capture the whole page, not a series of crops. The reader sees where each change sits, and you send one file. The full-page screenshot guide shows how.
  2. Put a number on each change, in reading order, from the top of the page to the bottom.
  3. Mark the spot. A box around an area, an arrow for a small element such as an icon or a link. One colour for everything keeps it calm; a second colour can mean "must fix".
  4. Write the notes in a list with the same numbers, in the message or the ticket. Keep text on the image short, a word or two; the explanation belongs in the list.
  5. Cover what the reader should not see: other clients' names, emails, internal notes, logins. Use a solid block, not blur.
  6. Send one file. A PNG for one screen, a PDF when the page is long and the reader will print it or read it on a phone.

An example of the notes

  1. Hero: the headline wraps to three lines on laptop width. Can we shorten it?
  2. Pricing card: the yearly price should read $120, not $12.
  3. Footer: the privacy link goes to a 404.

Without installing anything

  • Microsoft Edge: press Ctrl Shift S, capture the full page, and use Draw to circle or write on it by hand. There are no boxes, arrows or numbers.
  • Windows Snipping Tool: pen and highlighter on a screenshot of what is on screen.
  • Mac: open the screenshot in Preview and use Markup for shapes, arrows and text.

They work for a quick note. For numbered feedback on a long page, you end up combining two or three tools: one to capture the whole page, another to mark it up, a third to make a PDF.

With ClarShot

  1. Press Alt Shift F to capture the full page. It opens in the editor.
  2. Add step numbers, boxes, arrows, highlights and short text from the toolbar.
  3. Cover anything private with the hide tool (its button says Blur), which covers with Solid by default.
  4. Download as PDF, split into A4 or Letter pages or as one long page, or as PNG, JPEG or WebP. Or Copy and paste it straight into an email or a chat.

A real recording: a staging site captured, numbered, a login covered, and exported as a PDF.

The ClarShot download menu with PNG, JPEG, WebP and PDF

All of it is free, with no watermark, and the page never leaves your computer while you work on it: ClarShot makes no network requests.

Common questions

PNG or PDF for a client?

PNG when it is one screen and they will look at it in a chat. PDF when the page is long: it keeps pages readable, prints well and opens on any device.

Should feedback go on the image or in the message?

The marks and numbers go on the image, the words go in the message. Long text on an image is hard to read and impossible to copy.

How do I show an interaction, not a still page?

Record it. A short screen recording with your voice explains a hover state or an animation better than any arrow; see the screen recording guide.

Try it in ClarShotFree, no account, and nothing you capture leaves your computer.
Add to Chrome

ClarShot works in Chrome and Edge on a computer, not on phones. Send yourself the link and open it there.