DocsScreenshot studio

Working on an app

Screenshot studio

Turn raw captures into framed App Store screenshots with headlines, backgrounds and layouts, per device family and per locale.

The Screenshots tab is a design studio for App Store screenshots. Each screen is one App Store screenshot: a raw capture, a headline, a background and a layout. The studio renders every screen at Apple's exact pixel sizes, so what you see in the editor is what gets uploaded.

What you need#

  • PNG or JPG captures from the simulator or a device, or screenshots that are already live on App Store Connect.
  • Optional: an AI provider and model in Settings ▸ AI for the AI features. See AI providers and models.

How the studio is laid out#

  • The screens rail (left) lists the screens for the current device family, for example IPHONE · 5.
  • The canvas (center) shows the selected screen at the selected size. Its top-left label shows the size, its pixel dimensions and the locale.
  • The size strip (bottom) lists the sizes you're producing. The + menu adds and removes sizes.
  • The inspector (right) has the AI, headline, template, background and element settings, and the Publish buttons. Its Product Page section opens the header and search results slots in the Assets tab.

The device families depend on the version's platform. An iOS version has iPhone, iPad and Apple Watch. A macOS version has Mac, a tvOS version has Apple TV, and a visionOS version has Apple Vision. Each family has its own list of screens, because App Store Connect keeps a separate set for each one. Click a size in the size strip to switch to its family.

The studio is saved automatically for each app, in ~/Library/Application Support/Slipway/<app id>/.

Start from what's live#

The first time you open the tab, Slipway checks App Store Connect. Any family that has screenshots there but nothing in the studio is imported automatically. If a family is empty, the canvas offers Import N from App Store Connect and Add Screen. You can import again any time: the inspector's App Store Connect section shows how many screenshots are live for the family on screen, with Import into Studio, and the + menu on the screens rail has the same action.

Screenshots you already have as files go in as they are. Drop PNG or JPEG files on the empty canvas or on the screens rail, or use Add Screenshots… (also in the rail's + menu). Each file becomes a full-bleed screen on the size its pixels match, named after the file, and uploads unchanged. Use Frame it with a headline in the inspector to turn one into an editable screen. Dropping a file on the canvas while a screen is selected replaces that screen's capture instead.

Slipway looks for live screenshots under the studio's locale first, then the app's primary locale, then any locale that has some, so an app localized in, say, en-GB imports just as well. When the studio holds nothing but imported screens, it adopts that locale.

Warning — Importing into a family that already has screens replaces them. Slipway asks first. App Store Connect doesn't change until you upload.

Imported screenshots are shown as they are, filling the whole canvas with no frame or added text. The inspector's Live on App Store Connect section looks at the top edge of the image to work out what it is:

  • Finished screenshot — uploaded as-is. The image already has a background or headline. Raw captures always have the status bar (time, signal, battery) at the top, and this one doesn't.
  • Plain app capture — uploaded as-is. The image has a status bar, so it's a bare capture.

To edit a live screenshot, click the button below that message. Its label depends on what Slipway found:

  • Redesign in Studio (finished screenshot): starts a new Text Top layout without the image, so a finished design never ends up inside a device frame. Add a raw capture for it.
  • Frame it with a headline (plain capture): puts the capture in a device frame with a headline above it.
  • Convert to editable screen: shown when Slipway can't read the image.

Converted screens keep a backup of the live version. Revert to live screenshot under Converted from App Store Connect undoes the conversion. The live screenshot on App Store Connect stays until you upload.

Add screens and captures#

  1. Click + on the screens rail and choose New Screen, or click Add Screen on an empty canvas. New screens use your default layout from Settings ▸ Screenshots ▸ Default layout.
  2. Drag a PNG or JPG from Finder onto the canvas. You'll see "Capture added for iPhone 6.9″".
  3. Or select the device and click Choose… in the capture row.

Captures are stored per size. If a size has no capture of its own, Slipway uses another capture from the same family. Right-click a screen in the rail to Rename…, Duplicate, Move Up or Delete it.

Design a screen#

On the canvas, click the text or the device to select it, then drag to move it.

Template applies one of nine layouts: Text Top, Text Bottom, Angled, Showcase, Frameless, Minimal, Hero Angle, Spotlight and Two Up.

Background has five types: Solid, Gradient, Duotone, Glow and Blobs. Pick one of the preset palettes or set the three colors yourself (base, accent, accent 2). Gradient and duotone backgrounds can run vertical or diagonal. The text color switches between near-black and white automatically, based on how light the background is.

Element changes whatever is selected:

  • Text: the font (SF Pro Display, SF Pro Rounded, New York or SF Mono), the weight, the alignment, Headline size, Subhead size and Block width. You can also add a badge (for example NEW) and turn on Page dots.
  • Device: Framed or No frame, Angle (−30° to 30°) and Size. Second device behind adds a second device.

iPhone, iPad and Apple Watch sizes get a device frame drawn to match the model: Dynamic Island, notch or iPad camera. Mac, Apple TV and Apple Vision screens are never framed.

Captions per locale#

The Headline section has a locale picker, a Headline field and a Subhead (optional) field. Each locale has its own captions. If a locale has no headline yet, the source locale's headline is used. The studio's source locale is English (U.S.). To give the studio more locales, add them with Add Locale on the Metadata tab.

Ask AI#

The Ask AI section rewrites the selected screen. It writes a new headline and subhead in the current locale and can suggest a new background.

  1. Optionally type a hint, or click Punchier headline, Darker background or Shorter subhead.
  2. Click Regenerate This Screen.

This works on the Free plan with your own AI key. Regenerate All N iPhone Screens (the family name changes) applies the same brief to every screen in the family.

Generate All Sizes & Locales, under Publish, writes headlines and subheads for every studio locale from the source captions, then opens the upload sheet so you can render every size. It needs at least one locale besides the source locale.

Pro — Regenerate All … Screens and Generate All Sizes & Locales need Slipway Pro. During the beta the paywall unlocks locally. Designing, single-screen AI and uploading one locale are free.

Publish#

  • Preview in App Store shows the rendered screens in a mock App Store listing.
  • Upload to App Store Connect renders and uploads everything. See Uploading screenshots.

Tips#

  • The orange dot in the size strip means at least one locale has no screenshots on App Store Connect for that size.
  • Only sizes selected in the size strip are rendered and uploaded. Add the sizes Apple needs for each family. Slipway won't let you remove the last selected size.
  • Captures are copied into the app's studio folder, so moving or deleting the originals doesn't break anything.