App Screenshots – now make them look like ads!

This is part 2 of 3. Part 1 covered capturing the screenshots. Part 3 will be uploading them.

Last time, fastlane took the actual pictures of Subtitles Viewer – search results, language list, every localization, iPhone and iPad. That’s the honest view of the app. But if you look at the App Store page, the first two images aren’t just the app. They’re “Subtitles at home!” and “Subtitles at the cinema!” – a bit of design, a caption, a reason to keep swiping.

Those are the marketing screenshots. And they have the same maths problem as the raw captures. Four images × 22 languages × two app flavors is still 176 files. You do not want to open Figma 176 times.

The trick is the same as part 1: do the creative work once, then let the computer stamp it out in every language.

Design once, caption many times

For Subtitles Viewer I ended up with two kinds of store image, and they both follow that rule.

• Home and Cinema – illustrated scenes I designed myself. The picture stays the same in every language. Only the caption changes.
• Search and Language – the screenshots from part 1, dropped onto a colored background, slightly shrunk, with rounded corners and a caption underneath. The app UI is already localized. The caption on the frame is localized too.

fastlane has a built-in tool for the second kind, called frameit. It puts your screenshot in a device bezel and adds a title from a strings file. That’s a great fit if a framed phone is all you need.

I needed the illustrated Home and Cinema images as well, in 22 languages, on iPhone and iPad, with no transparent pixels (App Store Connect is fussy about that). So I kept the idea of frameit – background, caption, store-sized PNG – and did the assembling in a small script of my own. Same result, a bit more control.

Leave space for the text

The Home and Cinema graphics are just PNG templates. I drew them at Apple’s exact pixel sizes for the 6.9-inch iPhone slot and the 13-inch iPad slot – not “close enough”. Apple will reject a screenshot that’s just one pixel off.

The important bit: I left an empty band at the bottom. No English baked into the image. If the words are in the Photoshop file, you’re back to 22 exports. If the words live in a text file, you can change “Subtitles at home!” to “¡Subtítulos en casa!” without touching the picture.

I keep those templates in git. Everything the script generates can be thrown away and rebuilt.

A captions file, not 176 text layers

All of the store copy for the frames lives in one JSON file. One entry per screenshot, then one string per language:

{
  "01Home": {
    "en-US": "Subtitles at home!",
    "es-ES": "¡Subtítulos en casa!",
    "fr-FR": "Des sous-titres à la maison !",
    "ja": "自宅で字幕を。",
    "ko": "집에서 보는 자막!"
  },
  "02Cinema": {
    "en-US": "Subtitles at the cinema!",
    "es-ES": "¡Subtítulos en el cine!",
    "fr-FR": "Des sous-titres au cinéma !",
    "ja": "映画館で字幕を。",
    "ko": "영화관에서 보는 자막!"
  },
  "03Search": {
    "en-US": "Search for any movie or TV show!"
  },
  "04Language": {
    "en-US": "Subtitles in your language!"
  }
}

Keep the captions short. They have to fit on an iPhone and an iPad, in German and in Malay. If a line wraps onto three lines and covers the sofa in the Home image, you’ll see it when you review the English pass – which is why I always generate English first.

What the compose step actually does

In my head it’s two recipes.

Recipe one – the illustrated shots:

for each template (Home, Cinema):
  for each language:
    draw the template
    draw that language's caption in the empty band
    save it into store/that-language/

Recipe two – the in-app shots from part 1:

for each captured screenshot (Search, Language):
  fill a background in the app's color
  shrink the screenshot a little, round the corners
  draw the caption underneath
  save it next to the Home and Cinema images

The script I used is a Swift file that Fastlane just shells out to. You could do the same with Python, or with frameit if you don’t need the illustrated templates. The Fastlane side is only a few lines:

lane :compose_store_screenshots do
  sh("swift fastlane/compose_store_screenshots.swift")
end

Then:

bundle exec fastlane compose_store_screenshots

That reads the templates, the captions file, and the raw screenshots from part 1, and writes a store folder ready for App Store Connect. Recaptioning German is a JSON edit and a re-run. You don’t recapture the app, and you don’t redraw the sofa.

A few things that bit me

Do English first. I have a lane that only composes en-US, so I can check caption size, contrast, and the gap under the words before multiplying by 22. Same habit as part 1: one language, then the rest.

App Store Connect hates transparent pixels. Marketing tools love alpha. Apple does not. The compose step flattens every image onto an opaque background before saving. If you skip that, the upload in part 3 will fail in a very unhelpful way.

Number the files in store order. Home is 01, Cinema is 02, Search is 03, Language is 04. The App Store shows them left to right. The first two are the pitch. The next two are the product.

Keep the device name in the filename. Something like iPhone 17 Pro Max-01Home.png. That’s how fastlane knows which screenshot slot the file belongs to when we upload. More on that next time.

Watch the long languages. German and French captions are longer than English. Japanese is shorter but a different shape. After a full compose, skim the HTML gallery – or just open a few folders – and look at the ones you already know are chatty.

What we have now

A fastlane/screenshots/store folder with, for every localization, four iPhone images and four iPad images. Captions in the right language. No spinner. No 9:47 on the status bar. No English accidentally left on the Japanese store page.

The Pro app gets the same treatment into its own folder, with the same captions and the same templates, from the Pro captures.

That’s 176 files sitting on disk, looking the way they should on the store. The remaining problem is getting them out of that folder and into App Store Connect without dragging each one by hand.

That’s part 3…Coming soon.

Oh and if you’re interested you can check out Subtitles Viewer here.