How to Highlight One Part of a Screenshot

A screenshot of a busy web app shows everything at once: menus, sidebars, banners, buttons. The reader has to work out which part you mean. A good highlight answers that question before they ask it, whether it is a setting in a support article, a bug in a report or a new feature in a release note.

There are several ways to highlight part of a screenshot, and each suits a different job. This guide explains when to use a spotlight, a highlighter, a box, an arrow, numbered markers or a magnifier, then shows how to add them by hand in any image editor and with InnoShot's editor.

Choose the right kind of highlight

Most screenshots need one or two of these, not all of them. A spotlight plus a short callout, or a box plus an arrow, is usually enough.

The manual way

You can highlight a screenshot with the tools already on your computer plus any image editor.

1. Take the screenshot. On Windows, press Win+Shift+S to open Snipping Tool. On macOS, press Cmd+Shift+4 to drag an area or Cmd+Shift+5 for the screenshot toolbar. In Chrome you can also use DevTools: press F12, then Ctrl+Shift+P (Cmd+Shift+P on macOS), type screenshot and choose Capture area screenshot.
2. Use the built-in markup if it covers what you need. Snipping Tool has markup tools such as a pen and a highlighter. On macOS, clicking the floating thumbnail that appears after a screenshot opens a Markup view with shapes, text and drawing tools.
3. For more control, open the image in an image editor. Draw an unfilled rectangle or ellipse with a thick, contrasting outline around the area, and add an arrow if the area is small.
4. To dim everything except the focus area, add a new layer filled with semi-transparent black over the whole image, then cut or erase a hole where the focus area is.
5. Export a flattened PNG.

This works, but the dimming step takes several actions, and changing the focus area later usually means starting over.

The InnoShot way

InnoShot is a free Chrome extension for capturing and editing screenshots. Its editor treats every highlight as a separate, editable layer, so you can move, restyle or remove it at any time. InnoShot is coming to the Chrome Web Store; the download page links to the listing once it is live.

Start by capturing the page: Alt+Shift+V for the visible area, Alt+Shift+S for a selected area, Alt+Shift+F for the full page or Alt+Shift+E for a single element. The capture opens in the editor in a new tab.

Spotlight: make one area the focus

A spotlight keeps one area sharp and changes everything around it, so the eye goes straight to the focus.

1. Choose the Spotlight tool and draw a region. The shape can be a rectangle, rounded rectangle, ellipse, circle, freehand shape or polygon.
2. Choose what happens outside the region: dim it with a color and opacity of your choice, blur it, desaturate it, or apply dark glass, frosted glass or a vignette. Feather softens the edge between the two.
3. Style the region itself with a solid or gradient border, border width, corner radius, an outer or inner glow, a shadow and padding. Scale emphasis enlarges the focus area slightly so it stands forward.
4. Add more regions if you need several focus areas in one image.
5. Turn on invert to apply the effect inside the region instead, which is handy for toning down one distracting area.

Spotlight comes with editable presets, so you can save a look and reuse it across a set of screenshots. The spotlight docs describe every setting.

Keep the dimming moderate. The surrounding interface is context; readers still need to see where the highlighted part sits.

Highlighter and underline: mark text

The highlighter works like a marker pen on paper: a translucent stroke over a word or line, in the color, width and opacity you choose. Underline and strikethrough are good for showing a specific phrase or a change in wording.

Because a highlighter is translucent, the text stays readable underneath. That is what you want for emphasis, and also why it is no way to hide anything.

Boxes and arrows: point at a spot

Rectangles, rounded rectangles and ellipses outline an area without changing anything around it. They suit screenshots where the rest of the interface still matters, such as "this panel, in the context of the whole page".

Arrows are for small targets: an icon, a toggle, a single field. Curved arrows can route around content that a straight arrow would cross. You can style both with color, width, opacity, arrowheads, fill, outline and shadow. Annotations are not clipped to the screenshot, so if you have added a background with padding, an arrow can start in the margin and point into the image. See the annotation tools for the full list.

Numbered markers: show a sequence

When a screenshot explains a process, such as open this menu, choose this option, then click save, place numbered markers in the order of the steps and refer to the same numbers in your text. Readers can follow along without matching vague descriptions to parts of the image.

Magnifier: enlarge a small detail

A magnifier shows an enlarged view of a small area, such as a tooltip, a status label or a line of fine print, without cropping away the rest of the screenshot. If you have redacted something, the magnifier never samples the pixels under a redaction box, so it cannot reveal them.

The magnifier enlarges the pixels you captured. For very small text, zoom the page in Chrome before you capture so the text is drawn with more pixels.

Text, callouts and speech bubbles: say why

A highlight shows where; a few words say why. Use a callout or speech bubble for a short explanation next to the area, and keep it to one line where you can.

Everything you add appears in the layers panel, where you can select, move, resize, lock, hide or reorder each item; the text and annotation docs cover the details. Undo and redo treat one gesture as one step, and autosave keeps your work as you go.

Tips for highlights that read clearly

• One main focus per image. If you need six arrows, consider two screenshots.
• Use one accent color. Pick a color that contrasts with the page and use it for every highlight in the set.
• Leave breathing room. Add a little padding around a spotlight or box so it does not touch the content.
• Check it at real size. Look at the image at the size readers will see it, not zoomed in inside the editor.

Common problems

You expected a blur to hide something. Spotlight blur, the highlighter and the Blur tool are all cosmetic. To hide a password, token or account number, use the Redact tool instead; the guide to blurring sensitive information in screenshots explains why.

The magnified area looks soft. The magnifier can only enlarge the pixels that were captured. Zoom the page in before capturing, or capture just the area you need.

The image looks cluttered. Remove the weakest annotation first. Hiding a layer in the layers panel lets you compare the image with and without it.

You need the annotations to stay sharp at any size. Export as SVG: annotations are kept as vectors over a flattened image of the screenshot. PNG, JPEG, WebP and PDF exports are fully flattened.

Wrapping up

Pick the highlight that matches your message: a spotlight for one clear focus, a highlighter for text, boxes and arrows for location, numbered markers for steps and a magnifier for small details. You can build any of them by hand in an image editor, or add them in InnoShot's editor as layers you can keep adjusting. To finish the image for a presentation or a product page, the guide to adding a beautiful background to screenshots is a natural next step.