Skip to content
DocsComposing
Docs / Screenshots / Composing: frames, backgrounds and headlines

Composing: frames, backgrounds and headlines

Put each capture in a device frame on a background, add a headline and a subheadline, and check every output in the live preview grid before you export.

DemoTake Agent and StudioLive preview

The set editor has three parts: the captures strip at the top, the selected shot with its words and hidden regions, and the outputs grid with a live preview of every shot in every format. The Style inspector on the right applies to the whole set.

Click an output in the grid to see it large. Use ← and → to step through the outputs, Copy Image or Save… to keep one, and Esc or Space to close.

DemoTake — Tidewell App Store
CaptureExport All
HomeTakesScreenshotsProjects
Tidewell App Store

3 shots · 4 formats · 12 images

1 Dashboard2 Funnel3 Sign in+ Capture
HeadlineEvery metric at a glance
SubheadlineYour team's numbers on one calm screen.

iPhone 6.9″
iPad 13″
Play phone
Open Graph
Edits save as you type; the outputs re-render a moment later.

Device frames

Frames are generic shapes drawn by DemoTake, not artwork of any particular product.

Frame Looks like Used by default for
Phone A rounded phone with a thin bezel iPhone and Google Play phone formats
Tablet A rounded tablet with an even bezel iPad and Google Play tablet formats
Laptop A lid with a thin bezel on a base Mac and Chromebook formats
Window A desktop window with a plain title bar Web formats
None The capture with rounded corners Apple TV, Vision Pro, feature graphic

Auto picks the frame from the format, and uses a phone or tablet frame when a web or Mac format gets a phone or tablet capture. Body switches the frame between graphite and silver. Shadow adds a soft shadow under it.

Fitting the capture

The frame's screen takes the shape of your capture, within what a real device looks like. Fit decides what happens when the shapes differ:

  • Smart (default): fills the screen when the shapes are close, otherwise shows the whole capture.
  • Fill: covers the screen and crops the overflow, keeping the top of the capture (where navigation usually is).
  • Fit: shows the whole capture and pads the rest with the capture's own edge color.

For the sharpest result, capture at a size close to the output. DemoTake warns in the export's manifest when a capture had to be enlarged a lot.

Backgrounds

Pick a preset (indigo, sky, lavender, mint, blush, sand, midnight, ocean, graphite, aurora, white or black) or Transparent. Store formats never carry transparency, so a transparent background exports as white there; web formats keep it. Agents and specs can also pass a hex color or a two-color gradient such as #0F172A,#1E3A8A.

Headlines

Each shot has a Headline and a Subheadline. The set has defaults for shots that don't have their own. Choose a type style:

Style Headline Subheadline
Modern System sans, bold System sans
Rounded Rounded sans, bold System sans
Editorial Serif, semibold System sans

Position puts the words above or below the device; on wide formats like Open Graph, a phone sits beside the words instead. Color is automatic (white on dark backgrounds, ink on light ones) or white or ink. Long headlines shrink to fit their space rather than overflow.

Export

Click Export All or press ⌘E. DemoTake renders every included shot in every selected format and shows the folder in Finder. Untick Include in exports to keep a shot in the set but leave it out. Exports replace the previous files, so the folder always matches the set.

Note:

Rendering uses fixed colors and the system fonts, so the same set renders to the same bytes on the same macOS version. That's what makes screenshots practical to keep in a repository and regenerate in CI.

Was this page helpful?