Photo Studio

A special mode for taking screenshots and recording videos of multiple devices with fancy custom backgrounds, device configs, and zoom levels. It also replaces the default app UI and puts screenshot- and video capture-specific features front and center.

Photo Studio uses Float Mode, which lets you drag and drop devices wherever you want in the workspace.

Document image

Screenshotting all devices in default mode takes individual screenshots of each device—this results in a different file for every device. In contrast, taking screenshots in Photo Studio is meant to capture the entire workspace—all the devices and custom background included.

Click the Photo Studio icon (hotkey p) in the app toolbar to access this mode.

Document image

Here's a rundown of all the Photo Studio features that you can use with screenshots and videos.

Custom background

Photo Studio's background options include colors, gradients, and images. To open the custom background dropdown menu, click the 💧 Background icon in the toolbar.

Document image

Here's what each tab in the menu does.

Color

Choose a solid color as the background. You can use a color map, hex values, individual RGB values, and set transparency.

Document image

Overlay and Shift Color sliders

These two sliders are used as a complement to other background modes and are not exclusive to Color mode. To learn more about them, see the "Other background options" section below.

Gradient

Use one of the several preloaded gradients as a background.

Document image

Image

Use one of the preloaded images with a custom blur value, or add yours with the ➕ button. Currently, only URLs can be used—no locally stored images.

Document image

Other background options

The Black/white Overlay and Shift Color options are common to all background types.

Black/white Overlay

Set a black or white overlay on the background and its intensity. If you don't want an overlay, drag the slider to the extreme left.

Document image

Shift Color

If you like the background type or pattern but aren't a fan of the color, you can modify the color values using this slider. Works best with the Gradient and Image background types.

Document image

Device config

This section includes options for hiding the browser's UI and device frames, which header icons to display, and more. For a detailed explanation of each setting, see Device Configuration.

Document image

Add custom device

Create and add a custom device to Photo Studio by clicking the ➕ Add Device icon.

Document image

Zoom levels

A dedicated section in the toolbar to set custom zoom levels for devices. For a detailed explanation of what the controls do, see Zoom Levels.

Document image

Taking screenshots (Shortcut Ctrl+p/Cmd+p)

Use the 📷 Take photo button to take a screenshot of all the devices in view with the custom background and other settings that you chose.

Document image

Video & GIF recording

Record videos and GIFs with the custom background and other settings that you chose. See the dedicated article Video and GIF Recording to learn about all the available options and settings.