Annotate an Image with Arrows and Steps

The standout feature for anyone who writes instructions is the step markers: click to place a numbered badge, and each subsequent click yields the next number in sequence. A twelve-step walkthrough gets markers 1 through 12 without you tracking the count, which sounds trivial until you have manually renumbered a tutorial after inserting a step in the middle. Combined with arrows for direction and boxes for grouping, it covers the full grammar of how-to imagery.

Good annotations follow a few conventions worth stealing. Use one accent color for everything - a saturated red or orange that does not occur in the screenshot - so the eye learns instantly what is annotation and what is interface. Point arrows at the target, not vaguely toward a region. Box the smallest area that contains the relevant control, because an enormous rectangle around half the window tells the reader nothing. And number in reading order, top-left to bottom-right, unless the workflow genuinely jumps around.

For bug reports specifically, an annotated screenshot beats three paragraphs of description: box the broken element, arrow the control that triggered it, and add markers for the reproduction sequence. If the capture shows anything private - emails, names, tokens in a URL bar - run it through the blur tool before annotating, so the sensitive parts are gone from the file you attach to the ticket.

Export as PNG for anything with linework and text; screenshot content is exactly the material JPEG handles worst, smearing crisp edges into faint mush. Note that annotations are baked into the exported pixels - the arrows and badges are not movable objects in the downloaded file - so hold on to the clean original capture in case the interface changes and the guide needs an update.