Add Step Numbers to Image

What this tool does

Number locations in an image walkthrough

The Step tool places circles on a screenshot, product photo, map, or diagram to guide a reader through a sequence. Click locations in reading order, choose a contrasting color and size, and review the result before export. The circles are rendered into a separate browser-generated image while the source stays unchanged.

Use these circles to guide readers through a visual sequence. Add explanatory wording with the text tool or direction with Arrow; the Step tool does not create connector lines.

Features of add step numbers to image

• Sequential numbering. Each click adds a circle for a visual walkthrough.
• Click-to-place controls. Place each marker at a precise point on the screenshot or image in the order it should be read.
• Color and size options. Choose a contrasting color and size for legibility at the image’s expected display size.
• Undo the last edit. Remove a misplaced circle by undoing the most recent change, then add it again at the intended location.
• Standard export formats. Save PNG, JPG, WebP, or PDF and review the marked copy before sharing it.
• Local processing. Circles are drawn in the browser. Local files stay in your browser; URL imports pass through PhotoSaver for retrieval and are not stored.

Add numbered steps to screenshots and photos

Select Step and click each location in the order a reader should follow. The first circle begins the sequence and each later click adds another. This makes a static image useful for showing interface controls, assembly points, recipe stages, map stops, or product setup locations without writing a separate paragraph for every position.

Place each circle close enough to identify the intended object but not directly over its label, button text, or critical detail. If several targets sit near each other, leave space between them so their edges remain distinct. Consider simplifying the screenshot or cropping unused areas before adding circles when the source is crowded.

Make circles easy to read on mobile and desktop

Choose a marker color that contrasts with the background at every location, not only the first one. A color that stands out on a light panel may disappear on a red product or dark photograph. Adjust marker size for the final image dimensions and view the preview at the scale people will use to follow the instructions.

If circles overlap or hide an important symbol, use Undo and place one again. The click order sets the sequence, so plan it before adding locations. A short list of steps nearby can reinforce the order, especially when readers may view the image without the original context.

Use numbered images for tutorials, support, and assembly guides

Support teams can indicate which settings to open before pressing a button. An assembly guide can mark screw locations or components, while a recipe image can show preparation stages. For software tutorials, keep the screenshot current and avoid calling out controls that have changed in a newer version of the interface.

This image works best with a clear sequence and concise supporting instructions. The Step tool does not add text labels, descriptions, or connector lines; each circle only indicates a location. Use Add Text to Image for a short caption or Arrow to show direction when the relationship between two items is not obvious from the sequence alone.

For a customer support reply, number the visible controls in the order they should be opened and pair the image with short sentences using those same numbers. For assembly or recipe photos, capture each stage clearly before marking it. One image can introduce the sequence, while a written checklist gives readers enough detail to complete every action.

Keep numbered annotations accurate and accessible

The circles are visual cues and should not be the only place essential instructions appear. Include the same sequence in surrounding text or a document so screen-reader users and people viewing a low-resolution image can follow it. Use a contrast that remains visible for common display conditions and do not rely on color alone to communicate order.

Check that the numbers remain unambiguous after the image is compressed, resized, or embedded in a page. Very small markers can blur or look similar at thumbnail scale. Save a copy at the final dimensions and inspect the exported file, especially when the image will be printed or shown on a phone.

For a team handoff, keep the visual order aligned with the written checklist and use the same terms for each control or part. If a step refers to a button, make sure its circle lands on that button rather than its neighboring label. This review helps a polished walkthrough guide readers to the correct place.

Export a numbered picture without changing the source

The editor draws markers into a new output, leaving the source file unchanged. Use Undo to correct the last marker before exporting. Once flattened, the numbers are part of the image and cannot be independently selected in a regular image viewer, so keep the original and maintain a written step list if revisions are likely.

PNG can retain transparent pixels and sharp edges; WebP may create a smaller file when the destination accepts it. JPG is widely compatible for photographs, while PDF places one image on a white page. Select the format for the next tool or service and verify that the marker order and contrast survive its upload or print process.

How to use it

How to add sequential step numbers to a photo

1. Open a tutorial screenshot, diagram, map, or photo from your device, clipboard, or an accessible direct image URL.
2. Select Step and choose a marker color and size that stand out against the image at each target location.
3. Click the first location, then click every later point in the order readers should follow the instructions.
4. Check the sequence, spacing, and contrast. Use Undo to remove the most recent misplaced marker and add it again.
5. Add explanatory text or arrows with the matching tool if readers need more than numbered locations.
6. Choose an export format, save a separate copy, and inspect it at the final display size before sharing.

Common questions

Add Step Numbers to Image FAQ

Keep editing

Related PhotoSaver tools