Numbered Step Markers for Screenshot Tutorials
Drop numbered circles. Auto-increment. Export. Done.
A vendor-neutral guide for tutorial creators who need numbered annotations on a screenshot — without uploading the screenshot to a hosted web tool. Covers the simplicity-vs-flexibility trade-off, the 3-step FileHop workflow, an 8-tool comparison table, and the privacy story for screenshots of internal dashboards, beta features, and unreleased UI.
What Is a Numbered Step Marker on a Screenshot?
A numbered step marker is a small numbered circle dropped onto a screenshot to walk a viewer through a sequence of clicks, taps, or fields in order. Marker 1 sits on the first thing to click, marker 2 on the next thing, marker 3 on the field to type into — the reader's eye follows the numbers and the screenshot does the rest of the explaining.
Tutorial creators reach for numbered markers because they answer the 'where do I look first / next' question that arrows alone can't answer when there are 4+ steps in one screen. An arrow points at one thing. A numbered sequence walks the reader through the whole path. That's why help-center articles, onboarding emails, bug reports, and slide-deck walkthroughs lean on numbered markers for any flow with more than two steps.
There is an important tool distinction. Manual numbering in Photoshop, Figma, Skitch, or MS Paint means typing each number into a text layer, then retyping every later number when you delete or re-order a step. Auto-incrementing tools (FileHop, Maxisnap, Snagit's step tool) increment the numbers for you — drop the marker, the number is computed; delete a marker, the rest renumber automatically. We'll compare 8 numbered-annotation tools further down.
Who Needs Numbered Step Markers
Four common situations where a numbered sequence makes the screenshot land.
Product and customer-success teams
Writing onboarding emails, help-center articles, and feature announcements for new users. A 5-step numbered walkthrough on one screenshot beats five separate paragraphs of 'click the menu, then choose settings, then…' — the reader skims the image and finishes faster.
Engineers writing bug reports
Walking a reproducer through 3-5 clicks ('click here, then this dropdown, then this menu') in a single annotated screenshot. The reviewer sees the whole path at once instead of scrolling between five separate captures.
Indie hackers and founders
Shooting Twitter/X tutorial threads and Loom-replacement screenshot decks. A numbered screenshot is the cheapest viral teaching format on a busy timeline — readers parse it in two seconds and re-share it.
Educators, coaches, and consultants
Creating slide-deck walkthroughs of software they teach. Numbered markers turn a recorded lesson into a glanceable handout that students can review without rewatching the video.
Numbered Markers vs Other Annotation Styles
Numbered markers aren't the right answer for every screenshot. Use the format that matches the message:
Use a numbered step marker when…
- •The step order matters and you have 3+ clicks to walk through.
- •The screenshot will sit in an email, blog, or slide where the reader can't hover for tooltips.
- •You want auto-incrementing numbers so re-ordering or deleting a step is one undo, not a retype.
- •The screenshot is going to a non-technical audience who reads sequentially.
Use a different annotation when…
- •You only need to point at ONE thing — use an arrow.
- •You need to label what the number means inline — use a callout or text annotation.
- •You need shape variants, draggable repositioning, or per-marker color overrides — use Snagit, Photoshop, or Figma.
- •You're documenting a video flow rather than a static UI — use Loom or a video-first tool.
Once the numbered approach fits, the workflow is the same in every tool — what differs is the default style, the number of clicks to place a marker, and whether your screenshot ever leaves your device.
How to Add Numbered Step Markers in FileHop
The workflow is the same across most numbered-annotation tools. Three steps:
Open the screenshot beautifier and load your screenshot
Drop in your image, set the canvas size if needed (any of the 33 canvas presets including the 12 social presets — YouTube thumbnails, Twitter posts, LinkedIn cards, Instagram tiles). Add a gradient backdrop or device frame first if you want them; markers go on top of everything.
Enable step markers and click to drop numbers
Toggle on Step Markers in the Style panel, pick a color (Blue, Red, Green, Orange, Purple, or Black) and a size (Small, Medium, or Large), then click on the screenshot for each step. Numbers auto-increment 1, 2, 3, ... in click order. Undo the last marker or Clear All if you mis-click; deleting a marker renumbers the rest automatically so there are no gaps.
Export PNG, JPG, or WEBP
Click Export, pick a format, and the markers bake into the final image at full canvas resolution. PNG is the lossless default and supports transparency; JPG and WEBP have a quality slider. Drag the file straight into your tweet, blog, slide, email, or help-center article.
The FileHop screenshot beautifier does all three steps locally — the screenshot never leaves your machine.
Open the FileHop screenshot beautifier →What FileHop Ships for Step Markers Today
Four feature areas covering colors, sizes, the auto-incrementing logic, and how markers compose with the rest of the beautifier. Everything renders on your CPU — the screenshot is not uploaded.
6 Marker Colors
Six pre-tuned badge colors verbatim from the StylePanel. Pick one per tutorial and stick with it for visual continuity.
- • Blue (#3b82f6, default), Red (#ef4444), Green (#22c55e)
- • Orange (#f97316), Purple (#a855f7), Black (#18181b)
3 Size Presets
Three fixed badge sizes covering dense, default, and sparse screenshots. The badge keeps a colored fill, white outer ring, and bold white number across all three sizes.
- • Small (24px badge / 11px font), Medium (32px badge / 14px font, default)
- • Large (40px badge / 18px font)
Auto-Incrementing Numbering
Numbers are 1, 2, 3, ... in click order. Deleting a marker renumbers the remaining markers 1..N so there are never gaps. Undo and Clear All actions are one click each.
- • 1, 2, 3, ... by click order
- • Renumbers automatically on delete + Undo + Clear All
Composes With Every Beautifier Feature
Markers render on top of any background (gradient, solid, transparent, image), any device mockup frame (MacBook, iPhone, iPad, browser), any padding or corner-radius, any social canvas preset, and any code snapshot. Markers are always the LAST layer in the export.
- • On top of any backdrop or frame
- • Survives canvas resize (positions stored as percentages)
- • PNG / JPG / WEBP export
Honest footnote: today FileHop ships only auto-incrementing numbered circles — no letter labels (A, B, C), no Roman numerals, no shape variants (square / pin / arrow / callout), no draggable repositioning after placement, no per-marker text captions, no per-marker color overrides, no connecting lines between markers. Markers render via the local browser-canvas path. If you need any of those features, the comparison table below names tools that ship them.
Web Annotation Tools vs Offline Annotation Tools
Annotation tools live or die by what happens to your screenshot
- ⚠ Most numbered-annotation tools — Zight, Storylane, screenshoteditor.app, Tango, Markup Hero, Maxisnap web mode — upload your screenshot to their servers when you drop the first marker, then store the rendered output on their CDN.
- ⚠ For tutorial creators annotating internal dashboards, customer-facing flows, beta features, or unreleased UIs, that means a third party now has a copy of a screen the world hasn't seen yet.
- ⚠ Even if the privacy policy is good, the screenshot has left your device. It now lives in transit, in CDN caches, in error logs, and (often) in usage analytics.
- ⚠ For a screenshot of a public marketing page that's fine. For a screenshot of a customer's account in a bug report, an unreleased feature, or an internal revenue dashboard — it is not.
How offline annotation tools work
- ✓ FileHop runs on your laptop. Drop the screenshot in, click to place markers, export — the entire round-trip happens on your CPU.
- ✓ No upload, no account, no log line on a CDN, no privacy policy to read.
- ✓ You can unplug the ethernet cable and the tool still produces a PNG with the markers baked in.
- ✓ The trade-off is that you install a desktop app instead of opening a browser tab — once.
For the matching offline workflow when you need a backdrop, a frame, a code snippet, or a sized canvas alongside your numbered markers, see the four sibling guides:
Numbered Annotation Tools Compared
The numbered-annotation landscape in one table. We tried to be honest on rows where competitors beat us — Snagit ships shape variants and draggable repositioning, Markup Hero ships custom labels, Tango and Scribe auto-record sequences from a Chrome extension. FileHop is the simplest auto-incrementing-numbered-circle tool that runs offline.
| Tool | Auto-numbering | Custom Labels | Shape Variants | Draggable | Per-marker Color | Offline | Price |
|---|---|---|---|---|---|---|---|
| FileHop ⭐ | Yes (auto-increment) | No | No (circle only) | No (Undo + re-click) | No (one color per session) | Yes (desktop) | Free |
| Snagit | Yes | Yes (letters, custom) | Yes (many shapes) | Yes | Yes | Yes (desktop) | $63 one-time |
| ScreenSnap Pro | Yes | Yes | Yes (arrows + shapes) | Yes | Yes | Yes (Mac desktop) | $29 one-time |
| Maxisnap | Yes (auto-increment) | No | No | No | No | Partial (Mac native) | Free |
| Scribe | Yes (auto-record) | No | No | No | No | No (browser uploads) | Free + $12/seat/mo |
| Tango | Yes (auto-record) | No | No | No | No | No (Chrome uploads) | Free + $22/user/mo |
| Markup Hero | Yes | Yes | Yes (arrows + shapes) | Yes | Yes | No (web app) | Free + $4/mo |
| Zight / CloudApp | Yes | No | Yes | Yes | Yes | No (uploads) | Free + paid |
For wrapping the numbered screenshot on a gradient backdrop first, see our gradient background guide for the full breakdown of 22 curated presets.
Gradient background guide →For wrapping the screenshot in a MacBook, iPhone, iPad, or browser frame before annotating, see our device mockup guide.
Device mockup guide →For annotating a code snippet rather than a UI screenshot, see our code snapshot guide.
Code snapshot guide →For sizing the final annotated image to a specific platform (YouTube, Twitter, LinkedIn, Instagram, OG image), see our social media canvas guide.
Social media canvas guide →Best Practices for Numbered Step Markers
Most numbered-annotation problems are decisions, not tooling. Use this checklist before shipping the image.
- Number left-to-right and top-to-bottom — readers parse Western UIs in an F-pattern, so unsorted markers force back-tracking. Place marker 1 in the upper-left of the relevant region and walk forward.
- Keep markers in the 32px medium size unless the screenshot is dense (then go large) or sparse (then go small) — consistency across a tutorial set matters more than per-screenshot tuning.
- Pick ONE color per tutorial — switching from blue to red between screenshots breaks visual continuity and makes the reader re-orient on every image. Lock in a color in the first screenshot and keep it.
- Place the marker on the click target, not next to it — readers need to see exactly where to click, not approximately where. Center the badge over the button or field.
- Limit a single screenshot to 5 markers — past 6 the eye gets lost. If you have 8 steps, split into two screenshots and continue the numbering across them (steps 1-4 in image A, steps 5-8 in image B).
- Pair the markers with a numbered list in your prose — '1. Click the menu (1). 2. Choose Settings (2). ...' — the numbers in your prose should match the numbers in the screenshot exactly.
- Capture at 2x retina resolution and let the export downscale — markers stay crisp on Twitter, LinkedIn, and blog displays. Anything smaller will look soft on modern phones and laptops.
- Annotate the FINAL look of the UI you're documenting (not a half-loaded state) — markers placed on a placeholder spinner age badly. FileHop loads the screenshot at full resolution into a local canvas — no upload, no recompression — so your retina captures stay crisp.
Common Mistakes
Manually typing numbers in a paint app
Hand-typed numbers in Preview, Skitch, or MS Paint break the moment you re-order or delete a step — you have to retype every later number. Auto-incrementing tools renumber for you. If you find yourself opening Photoshop just to drop circles with text in them, the tool is fighting you.
Using a hosted web tool for sensitive screenshots
Zight, Markup Hero, Storylane, and web-mode Maxisnap all upload the screenshot to render the annotation. For screenshots of internal dashboards, customer data, beta features, or unreleased product UI, a third-party CDN copy is a real exposure — even when the company's privacy policy is fine. Use a local tool when the image is sensitive.
Mixing annotation styles in one tutorial
Switching between numbered circles, arrows, and squares within the same 6-step tutorial sequence makes readers re-orient on every image. Pick one style and stick to it for the whole sequence — numbered circles for a click-path, arrows for a single 'look here', boxes for a region.
Drop Numbered Step Markers on a Screenshot — Locally
Open the beautifier, drop your screenshot, click to place markers, export PNG / JPG / WEBP. No upload. No account. No watermark.
Open the Screenshot BeautifierMore Tools for Sharing What You Build
Gradient Background Guide
Pick a gradient backdrop for your screenshot before you drop the markers.
Device Mockup Guide
Wrap the screenshot in a MacBook, iPhone, iPad, or browser frame.
Code Snapshot Guide
Turn a code snippet into a polished, shareable image.
Social Media Canvas Guide
Size the final image for YouTube, Twitter/X, LinkedIn, Instagram, and 8 more platforms.