Choose the right mark for the detail

Pins and pointers

Use numbered pins when the reader needs an order. Add a pin beside a control, then adjust its position and pointer so the target is clear. Choose a preset or change the color, border, and size to suit the image.

The Edit inspector follows the selected pin. Change its number or style there, and open Manage all pins when you need to renumber the image.

Text labels

Choose Text or press T, then click to place a label or drag to choose its box. Write in the Label text field. Enter adds a line; Escape or Command/Control+Enter finishes editing. Double-click an existing label to edit its text again.

Choose a local font, size, weight, alignment, color, and optional background in the inspector. More text appearance includes right-to-left direction, padding, opacity, and rotation. Text wraps inside its box; enlarge it or reduce the font size if the inspector reports that content does not fit.

Text size and placement use original image pixels. Zoom changes the view; resizing the box reflows the text. Saved and copied images contain flattened labels. Label content stays in the current document; only typography defaults are saved in application preferences.

Freehand Pen

Choose Pen or press D to draw freehand strokes, or click to place a round dot. Pen stays active for consecutive strokes. Each completed stroke has its own undo step. Escape discards an unfinished stroke and switches to Select.

Pen has separate saved defaults for color, width, opacity, and line pattern. Select a completed stroke to move, resize, rotate, duplicate, or edit its path. Strokes use constant width; tablet pressure and tilt do not change it. Preview, clipboard, and export use the same smoothed source-pixel path.

Arrows, lines, and shapes

An arrow points to one detail. A line connects related areas. Rectangles, circles, and ovals work well around a group of controls or a region that needs attention.

Select a mark to move or adjust it. The Edit inspector shows controls for that object; Crop and Export are separate sections. Arrow keys nudge the selection; hold Shift for a larger nudge. Undo and redo let you revise the explanation without starting again.

Highlights and magnifiers

A highlight draws attention while leaving the underlying content visible. A magnifier gives a small detail more room without enlarging the whole screenshot.

Check the finished image at the size you expect someone to view it. A mark that looks comfortable while zoomed in can be too small in a support reply.

Spotlight focus regions

Choose Spotlight or press S, then drag to keep a region clear while dimming the surrounding image. Adjust Backdrop dimming and Corner radius in the inspector. Move, resize, duplicate, delete, and undo work in original image pixels. Spotlight has its own saved defaults.

Multiple Spotlight regions share one backdrop and remain clear where they overlap. The frontmost Spotlight controls dimming; use To front or To back to change it. Labels and other drawings stay above the dimming. Include drawings can omit Spotlight from export, but opaque Redact covers always remain on top. Spotlight is a visual effect, not secure redaction.

Color sampling and contrast

Choose Color inspector or press I. Select foreground or background, then click a pixel. Sample by coordinates provides keyboard access with zero-based native pixel positions. Copy HEX or RGBA beside each sample; HEX includes alpha when needed.

Edited image samples the native preview, including framing and every drawing, before export resizing or exclusions. Source samples original pixels inside the current crop without optional drawings or framing, while keeping opaque redaction covers. Changing the image or sampling mode clears old picks.

The text contrast panel compares the selected pair using WCAG 2.2 sRGB luminance. Transparent background colors blend over the chosen Canvas color, and transparent foreground colors blend over that background. Text-size thresholds are shown separately; the inspector does not detect font sizes or certify a whole screenshot. Inspection does not modify the image, history, or saved defaults.

Compose images

Choose Images or press G, then Add image. Overlay a local PNG, JPEG or WebP inside the current crop, append right for a side-by-side layout, or append below. Appending keeps native image size, expands the canvas and clears the crop in one undoable edit. Existing annotations keep their coordinates.

Select an image to drag it, resize its corner, or edit X, Y, width and height. The corner preserves aspect ratio unless Shift is held. Use opacity, visibility and stacking controls in the image inspector. Arrow keys move one pixel, Shift-arrow moves ten, and Delete removes the selected layer. Canvas sizing and Trim unused canvas preserve the original bitmap origin and support undo.

Images are base pixels below pins and drawings; redaction covers remain on top. Imported images stay in exports when drawings are excluded. Color sampling, QR scanning and OCR can read imported pixels. Limits include eight layers, 32 million imported source pixels and a canvas up to 16384 pixels per side / 64 million pixels. Old undo snapshots can expire to keep imported-asset memory bounded.

Compare images and save a GIF

Import an after image using Images, then align it with the original using native-pixel position and size controls. Select the visible image layer and choose Compare images. Before hides only that layer; After keeps its current opacity and stacking. Close the comparison to adjust alignment in the inspector.

Use the wipe slider, opacity overlay or complete Before/After views to inspect changes. Play comparison alternates the two whole frames only when requested. Frame duration controls both playback and the looping GIF. Preview blending and wipe position do not alter the saved frames.

Save GIF uses the native file dialog and keeps the crop, framing and mandatory redaction covers identical in both frames, including when drawings are excluded. Choose an output width and an explicit background for transparent areas. Frames are limited to 4096 pixels per side and four million pixels each; GIF uses a limited palette, so colors can change. This is a two-still-image comparison, not screen recording or video-to-GIF export.

Extract QR codes

Choose Extract QR codes in the editor toolbar, then Scan QR codes. Scan the current crop or full screenshot. Framio uses a bundled local decoder and shows QR payloads as plain text for you to review and copy. It never opens or fetches decoded URLs automatically.

Scanning uses original pixels with redactions kept, without drawings, frame padding or export resizing. Cancel or close the dialog to stop a scan. If no code is found, crop closer to a clear QR code with its surrounding border. Up to eight separate codes are returned per scan; crop to scan other codes. QR extraction does not change the image or undo history.

Pixel ruler and measurement

Choose Pixel ruler or press U. Drag between image points to measure width, height, distance and angle in original image pixels. Hold Shift for a horizontal or vertical line. Drag an endpoint, use its coordinate fields, or focus it and use arrow keys (Shift for ten pixels).

Coordinates refer to image edges: an image 1200 pixels wide spans X 0 through 1200. Angles turn clockwise from right. Zoom and frame padding do not affect measurements. Changing crop clears the reading. Copy measurement copies plain text; measurements never appear in saved/copied images or undo history.

Blur and private information

Blur softens part of the image. Pixelate (Y) replaces a selected region with mosaic cells; adjust Pixel size in its inspector. Both support moving, resizing, undo, and export. They are visual effects, not secure redaction.

Choose Redact or press X to cover sensitive pixels with opaque black. Covers stay in saved and copied images even when drawings are excluded, and magnifiers sample the covered source. The original and undo history remain editable in Framio, so keep them private. Inspect the exported image before sharing.