How to Add Arrows and Numbered Steps to a Screenshot
Turn a screenshot into instructions people can follow, without opening a design app.
To add arrows and numbered steps to a screenshot in Chrome, capture it with ClickSnap, then use the Arrow tool (A) and the Numbered Step tool (S). Steps count up automatically (1, 2, 3), and you can reset the numbering. Arrows can be straight, curved or double-headed, with any colour and thickness.
Step by step
- Capture with ClickSnap:
Alt + Shift + Afor an area orAlt + Shift + Ffor the whole page. - Arrow (A): drag from where the reader’s eye starts to the thing they should click. Choose straight, curved or double-headed, and pick a colour and thickness.
- Numbered step (S): click each place in order. The numbers count up on their own; use Reset to start again at 1.
- Text (T): add a short label next to anything that needs a word of explanation. Fonts include Inter, Poppins, JetBrains Mono (for code) and Arial.
- Shapes: rectangle (R), rounded rectangle (U), circle (O) and line (L) to frame an area.
- Highlighter (H): a translucent marker for text you want to draw attention to.
- Copy and paste into your doc, ticket or reply.
Made a mistake? Ctrl/Cmd + Z undoes, and the Select tool (V) lets you move, resize or delete any annotation.
What makes annotations easy to follow
- One arrow per action. Several arrows at once make people hunt.
- Number in reading order: left to right, top to bottom.
- Use one accent colour that contrasts with the page. Red or bright blue usually work; avoid colours already used heavily in the interface.
- Keep text short: “Click Save”, not a paragraph. Put explanations in the document, not on the image.
- Leave the target visible. Point at a button rather than covering it.
- Hide anything private with a solid box or pixelate before you share.
Templates that work
Help-centre article: one screenshot per step, a single numbered badge on each, and the step number matching the text.
Bug report: one screenshot with badges 1–3 showing what you clicked, an arrow at the wrong result, and a text label “Expected: X”.
Design feedback: a full-page capture with numbered badges on each comment, and a numbered list of comments in the ticket.
Release notes: a cropped area with one arrow and a frame on a gradient background for a polished look (see frames in the docs).
Annotating long pages
On a full-page capture, zoom out to see the whole page, place your numbered steps, then zoom in to fine-tune arrows. If the page is very long, crop to the relevant section first so the annotations are readable when the image is shown smaller.
Related
Frequently asked questions
- How do I add numbers to a screenshot?
- In ClickSnap, choose the Numbered Step tool (S) and click each spot in order. The badges count up automatically, and Reset starts again at 1.
- How do I draw an arrow on a screenshot in Chrome?
- Capture the page with ClickSnap, press A for the Arrow tool and drag from start to end. You can choose straight, curved or double-headed arrows.
- Can I edit annotations after adding them?
- Yes. Use the Select tool (V) to move, resize or delete them, and Ctrl/Cmd+Z to undo.
Written by Sarangan Raviraj
Sarangan Raviraj builds ClickSnap, a free full-page screenshot and annotation extension for Chrome, and tests every step in these guides in the current version of Chrome.
Related guides
Start capturing with ClickSnap today
Full pages with the header shown once, free arrows, steps and blur, and nothing uploaded.