What Are Step Number Callouts?
Step number callouts are small, ordered markers—often circles or rounded chips—that sit on top of a screenshot to show sequence. Instead of describing “the button under the profile menu, then the billing tab,” you place 1, 2, 3 directly on the interface. Readers follow the path visually, which reduces mis-clicks in support tickets and speeds up async design reviews. They differ from free-form arrows because the number encodes order explicitly: everyone agrees which action comes first, second, and third.
This tool renders those markers as vector objects on a canvas so they stay sharp on retina displays and export cleanly to PNG. You can match brand colors, switch between circled Unicode glyphs and plain digits, or use letters when your tutorial is organized by topic rather than strict order. Because processing happens locally, you can safely annotate production UI that might contain customer data—nothing is sent to a remote image server.
How to Add Step Numbers to Screenshots (3 Steps)
- Upload your screenshot — any common raster format works. The image becomes the background of the editor.
- Choose style, color, and sequence — pick a circle, rounded square, outlined, or arrow badge; set size; decide whether numbers start at 1 or letters at A; optional circled ①②③ for a polished look.
- Click to place and download PNG — each click adds the next number. Drag badges to fine-tune position, remove mistakes with ×, then export a single PNG with no watermark.
Why Tutorial Creators Love Numbered Screenshots
Video editors can show cursor movement, but written guides and help centers still rely heavily on static images. Numbered callouts turn a busy dashboard into a guided tour: the eye knows where to start and how to progress. For SaaS teams, that means fewer “where do I click?” replies in chat; for educators, it means printable handouts that remain readable when projected. Consistent badge styling—same color and size across a series—also signals professionalism, similar to a well-designed slide deck.
Compared with typing long captions beneath each figure, inline numbers keep the screenshot self-contained when embedded in Notion, Confluence, or GitHub README files. Social posts benefit too: a single tall image with stacked steps can outperform a thread of separate attachments because the narrative stays in one frame.
Step Numbers vs Arrows — When to Use Which
Arrows excel when you need to point at one control without implying order—highlighting a new button in a crowded toolbar, for example. Step numbers win when sequence matters: account setup wizards, checkout flows, or any task where skipping a step breaks the outcome. You can combine both in a larger editor by adding arrows for emphasis and numbers for order; on this dedicated page, the focus is fast numeric callouts. If your screenshot already contains directional cues (e.g., a natural left-to-right layout), numbers alone are often enough.
Best Practices for Screenshot Annotations in Tutorials
- Keep three to seven steps per image when possible; split very long flows across multiple figures.
- Use high-contrast badge colors on both light and dark UI regions; outlined or arrow styles help on busy backgrounds.
- Align numbering with your written steps so figure 2 in the image always matches “Step 2” in the article.
- Export PNG when you need lossless edges; JPG is better only when file size is critical and text is large.
- After export, zoom to 100% on a phone screen to ensure numbers remain legible in mobile readers.
Reusing the same palette and badge size across a documentation set builds familiarity: readers learn to scan for your markers. When you update the product UI, regenerate the whole sequence in one session so numbers stay contiguous and no orphan callouts remain from an older layout.
Frequently Asked Questions
- Can I use circled numbers like ①②③?
- Yes—for values 1–20 you can enable circled Unicode. You can also use standard digits or A–Z sequences.
- Are images processed on a server?
- No. Fabric.js runs in your browser; screenshots are not uploaded for processing.
- How do I delete one badge?
- Use the × on that badge, or reset all badges to start over.
- Can I move badges after placing them?
- Yes—select a badge and drag it. The main image stays fixed in the background.
- Is there a watermark?
- No. Downloads are watermark-free and do not require an account.