How to prepare a highlighted screenshot for a help article

A screenshot can show exactly where a setting or button is, but an unmarked image may leave readers guessing. A useful highlight points to the right detail without hiding the words or controls around it.

You can prepare one in the browser with the Photo Editor. Keep the original image intact, add a clear mark on a separate layer, and check that the result is readable at the size people will see in your help article.

Prepare the screenshot

1. Open the Photo Editor and load the screenshot you want to use. Start with the clearest capture you have, ideally one that shows enough of the surrounding window for readers to recognize where they are.
2. Keep the original separate from your annotations. Add a new layer for the marks and text, so you can adjust or remove them without painting over the screenshot itself. If the image is already difficult to read, choose a clearer capture before adding highlights.
3. Use the brush to draw a neat outline around the important control or area. Choose a color that stands out from the interface, such as a warm color on a mostly blue screen. Keep the line outside the words and icons you need readers to see.
4. Add a short text label if the outline alone could be unclear. Use the text tool to identify the target, for example, “Select the audio input.” Place the label beside the control, not on top of it. For steps that readers must follow in order, use small numbers and explain each number in the article text.
5. Review the image at its expected display size, then save an edited copy. Compare it with the untouched screenshot to make sure the annotation helps rather than obscures the instructions.

If you need more guidance on placing labels, see how to add text to an image in your browser. The Photo Editor also supports layers, brushes, selections, and text, so you can move between the original image and your annotations while you work.

Choose a highlight that fits the screenshot

One setting or button needs attention

Draw a single outline around the target. A box or loop is usually enough. Keep some space between the line and the control so the mark does not cover its label, state, or nearby menu item. A bright, solid outline is easier to notice than a large painted area.

Readers need to compare several parts

Use a consistent color and line weight for every highlight. If the screenshot shows a sequence, put a small number beside each target and describe the same numbers in the article. Avoid giving each area a different color unless the colors have a clear meaning that you explain.

The screen contains lots of small text

Use a screenshot with a closer view of the relevant area, if you can capture one without losing needed context. A highlight cannot make tiny text legible. Check the finished image at the width it will appear in the article, not only while zoomed in inside the editor.

The target is not obvious from the image alone

Add a short label that names the action or setting. Keep the label brief and use the article text for the longer explanation. If readers need to identify a particular item in a crowded list, include enough surrounding interface to show where that item appears.

Make the image easier to read

1. Move marks away from important text. If an outline crosses a word, icon, or value, undo it and redraw it around the outside. Use a separate layer so you can revise the highlight without changing the screenshot.
2. Use stronger contrast. If the outline blends into the background, choose another color. Check the entire path of the line, because one color may stand out on a light panel but disappear against a bright button.
3. Shorten the label. Replace a sentence with a few direct words. Put the explanation in the article itself, where it can be read without covering the interface.
4. Include enough context. If the screenshot shows only an isolated control, readers may not know which app or screen to open. Use a wider view or add a nearby label that identifies the screen.
5. Check the final size. Reduce the image to the approximate size it will have in the article. If the mark or label is hard to see, make it simpler or prepare a closer screenshot instead of adding more decoration.

Protect information before sharing

Look for email addresses, account names, notifications, private messages, and other details that do not belong in the help article. Cover sensitive information completely with an opaque mark, not a soft blur that might leave it readable. Check the saved copy again before publishing.

The Photo Editor works in your browser, and files you open stay on your device.