Online Tool Store
· 6 min read
How to Add Arrows and Numbered Steps to a Screenshot
Manesh Jayawardhana
CIO & Co-founder
A colleague messages: “Where do I change the billing email?” You could type out Settings, then the Account tab, scroll down, the second field from the bottom. Or you could send one screenshot with a red arrow and three numbered circles. The screenshot wins every time, as long as making it takes less time than typing the paragraph.
That’s the catch. The built-in screenshot markup on most computers is either missing or limited, and it rarely does numbered steps. Opening a full image editor for one arrow feels like overkill. Then there’s the email address, customer name or API key sitting in the corner of the capture, which has to be hidden before the image goes anywhere.
What a good annotated screenshot does
An annotated screenshot does one job: it points. It shows the reader exactly where to look and, for a process, in what order. Everything you add should serve that.
- Arrows point at one specific thing: a button, a field, a menu item.
- Boxes mark out a region: a panel, a form section, a row in a table.
- Highlights draw the eye to text without hiding it.
- Numbered steps turn a screenshot into a mini tutorial: 1, 2, 3, in the order you’d click.
- Text labels add the few words an arrow can’t say, like “Leave this blank.”
- Redaction hides what the reader shouldn’t see.
Why people get stuck here
- No step numbers. Basic markup tools give you a pen and maybe an arrow. Numbering steps by hand with the text tool is fiddly, and renumbering after a mistake is worse.
- Annotations look wrong on retina captures. A 3px arrow looks fine on a 1000px screenshot and thin on a 3000px one.
- Exports lose quality. Some tools downscale large screenshots or save as a compressed JPEG, so the UI text you were pointing at goes fuzzy.
- Uploading feels wrong. Screenshots of admin panels, customer records and internal tools are exactly what you shouldn’t hand to an unknown server.
What a good markup tool looks like
Steps count themselves
Click, click, click: 1, 2, 3. If you undo the last step, the counter should follow, so the next one you place is still in sequence.
Sizes scale with the screenshot
Arrow thickness, label size and step circles should scale with the image, not your screen. A medium arrow should look the same on a laptop capture and a 4K one.
Redaction that actually removes the data
Pixelation should replace the original pixels in the exported file with coarse color blocks, not lay a blur filter over them that only looks hidden. Pixelization works by averaging blocks of pixels, and the bigger the block, the less of the original survives.
| Annotation | Use it for | Tip |
|---|---|---|
| Arrow | One exact target | Drag from empty space toward the target |
| Step | Multi-click processes | Place them in the order you’d click |
| Box | A region or panel | Leave a little margin around the region |
| Highlight | Text to read | Yellow on light UIs, keep it brief |
| Redact | Names, emails, keys | Use size L on short values |
Common mistakes to avoid
- Too many arrows. Five arrows on one screenshot point at nothing. If there’s a sequence, use numbered steps. If there are many targets, split them across two screenshots.
- Pixelating short, predictable values with small blocks. A four-digit code or a short name in a small block size can sometimes be guessed from the block colors. Use the large redaction size, and for anything truly secret, crop it out of the capture entirely.
- Annotating a cropped-down, resized capture. Shrinking first makes the UI text unreadable. Annotate at full size, and let the reader zoom.
- Arrows that cover the target. Point at the button, ending just before it, so the label on the button is still readable.
- Using a color that matches the UI. A blue arrow on a blue interface disappears. Pick a contrasting color, usually red or orange.
How to do it with Screenshot Annotation Generator
Screenshot Annotation Generator draws your screenshot and every annotation on a canvas in your browser tab, and builds the PNG on your device. Nothing is uploaded.
- Paste your screenshot with Ctrl+V, drop it on the canvas, or choose the file.
- Pick a color (red, orange, yellow, green, blue or black) and a size (S, M or L).
- Choose Arrow, Box, Highlight or Redact and drag on the screenshot to draw.
- Choose Step and click each place in order. The numbers count up automatically. Choose Text and click to place a label.
- Fix mistakes with Undo and Redo (or Ctrl+Z and Ctrl+Shift+Z, Cmd on Mac), or Clear to start over.
- Download the annotated screenshot as a full-size PNG, or copy it to your clipboard and paste it straight into Slack, Jira or a doc.
Annotations are drawn at your screenshot’s original pixel size, up to 8192 pixels on the longest side, and saved as a lossless PNG. One thing to know: annotations can’t be dragged after you place them. Undo and draw again instead.
If all you need is to blur or block out sensitive areas, see how to use Redacted Screenshot Maker or how to pixelate a photo online. For marking up a document rather than an image, read how to annotate and mark up a PDF online.
Frequently asked questions
How do I add numbered steps to a screenshot?
Use an annotation tool with a step marker that counts automatically. In Screenshot Annotation Generator, choose Step and click each spot in the order a reader should follow. The numbers go up by one each time, and Undo keeps the count in sync.
Is pixelating a screenshot safe for hiding an email or password?
The exported PNG from Screenshot Annotation Generator contains only coarse color blocks where you redacted, not the original pixels. For very short or predictable values, use the large size so each block covers more of the text. For real secrets, crop them out of the screenshot entirely.
Will annotating a screenshot reduce its quality?
Not if the tool draws on the original pixels and saves a lossless PNG. Screenshot Annotation Generator keeps your capture at its original size, up to 8192px on the longest side, and scales the annotations to match.
Final thought
Before sending a screenshot, ask one question: could someone follow it without reading your message? If not, add steps. If it shows anything private, redact it first. Keep the markup to the minimum needed to point, and the screenshot does the explaining for you.