Tutorials•5 min read
How to Add Arrows and Numbered Steps to a Screenshot
Turn a screenshot into instructions people can follow, without opening a design app.
Raviraj Sarangan
Lead Extension Architect & Founder • Published October 11, 2026
Summary
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 + A` for an area or `Alt + Shift + F` for the whole page.
- Arrow (A): drag from where the reader’s eye starts to the thing they should click. Choose straight, curved or double, 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.
- Copy and paste into your doc, ticket or reply.
What makes annotations easy to follow
- One arrow per action. Several arrows pointing at once confuse people.
- Number in reading order: left to right, top to bottom.
- Use one accent colour that contrasts with the page. Red or blue usually work.
- Keep text short: “Click Save”, not a paragraph.
- Hide anything private with a solid box or pixelate before you share.
Good uses
- Help-centre articles and onboarding guides
- Bug reports (“1. Open settings, 2. Toggle this, 3. Error appears here”)
- Design feedback on a full-page capture
Read more in how technical writers build step-by-step guides.
Start capturing with ClickSnap today
Lossless full-page scrolling with smart sticky suppression, 14 annotation tools, and 100% private local storage.