How to annotate a screenshot so your point is easy to see
Choose the right crop, add arrows and highlights, and export an annotated screenshot that makes feedback easier to follow.
A useful annotation answers a question before someone has to ask it. Where should I look? What needs changing? What happens next? You rarely need to mark everything. Start with one clear point and give it enough context to make sense.
1. Keep enough of the screen to orient the reader
In Framio, choose Capture area and drag around the part of the display you want to explain. You can also open a PNG, JPEG, or WebP image you already have. Include a nearby heading or recognisable part of the interface so the reader knows where they are.
Use Crop to remove empty space and unrelated content. A tightly cropped icon can be confusing without its surroundings; a whole desktop can make a small problem hard to find. Aim for the smallest image that still tells the story.
2. Give each mark a job
Use an arrow to point at a particular control. Draw a rectangle or an ellipse around a group of related items. A highlight works well when the original text needs to stay readable. For a detail that is too small to see, add a magnifier.
Choose a color that stands out against the screenshot, then use it consistently. Three similar arrows in different colors can suggest three different meanings even when you intended one. Leave enough room around the mark to keep the interface legible.
3. Number anything that needs an order
If the reader needs to visit more than one place, use numbered pins instead of several unlabelled arrows. Keep the numbers in the same order as your explanation. Framio lets you move pins, adjust their pointers, and renumber them when the sequence changes.
Write the accompanying message as actions: “1. Open Settings. 2. Choose Notifications. 3. Turn on email alerts.” Keep the words outside the image when you expect them to change often or need to be copied.
4. Check the image you will actually send
Copy the annotated image into your message, or save a PNG or WebP. PNG is a useful choice for interface text and crisp edges; check WebP output at the size your reader will see it. Editor zoom changes your view of the image, not its original pixel dimensions.
Open the exported image once before sharing. Check that the arrows land in the right place, labels are readable, and private information has been removed. Blur is a visual effect, not secure redaction; do not rely on it to hide passwords or personal details.
Before adding another mark, ask whether it helps the reader decide what to look at or do next. If it does neither, leave it out.