Image Overlay

An overlay is anything placed on top of a picture: text, arrows, a logo, or a device frame. See the main types, how transparency works, and common mistakes.

An image overlay is any visual layer placed on top of a base image: text, shapes, arrows, a logo, a device frame, a color tint or another picture. The overlay and the base image are combined into what the viewer sees.

Overlays are combined with alpha compositing. Each overlay pixel has an opacity value, and the result mixes the overlay color with the base color in proportion to it. At 100 percent opacity the overlay hides the base. At 50 percent both are visible.

An overlay can stay editable as a separate layer, or it can be flattened into the pixels when the image is exported. A flattened overlay cannot be removed later without the original file.

Types of overlays

Annotations: arrows, boxes, ellipses, lines, text labels and step numbers.
Highlights: semi-transparent color over an area of interest.
Obscuring layers: blur or solid boxes over private content.
Branding: logos and watermarks.
Frames: device or browser frames around a screenshot.
Comparison layers: one image over another at partial opacity.

Where overlays are used

Step-by-step guides use arrows and numbered markers to show where to click. Bug reports use boxes to point at the problem. Marketing images add headlines and logos on top of screenshots, and design reviews overlay two versions to spot shifts.

How overlays work

Editors keep overlays as objects with a position, size, color and stacking order. Rendering draws the base image first, then each overlay from bottom to top. Export either flattens everything into one image or keeps layers in a project format.

In the Temposhot Documents editor, overlays include Text (T), Rectangle (R), Ellipse (O), Line (L), Arrow (A), and the Pro tools Blur (B), Click Marker (M) and Step Numbers (N). The [ and ] keys change stacking order. The editor keeps annotations separate from the captured image.

Common mistakes

Covering the very control the overlay is meant to point at.
Using colors that disappear on the screenshot's background.
Relying on a semi-transparent box to hide private data.
Sharing original frames when the overlays only exist in the edited version. A Temposhot ZIP of frames with annotations warns that it contains the original unedited files.