Screenshots.live
Team
Schluss mit manuellem Design: So automatisierst du App-Store-Screenshots per API
Erfahre, wie du mit Screenshots.live und einer API-basierten Loesung App-Store-Screenshots automatisch generierst, lokalisierst und in deine CI/CD-Pipeline integrierst.
Wenn du eine App im App Store oder bei Google Play anbietest, kennst du das Problem: Jedes Update, jede neue Sprache, jedes neue Geraet bedeutet dutzende Screenshots, die manuell erstellt werden muessen. Was bei einer Sprache noch machbar ist, wird bei zehn oder zwanzig Sprachen zu einem logistischen Albtraum.
In diesem Artikel zeigen wir, warum manuelle Screenshot-Erstellung nicht skaliert, und wie du mit Screenshots.live und einer API-basierten Loesung den gesamten Prozess automatisieren kannst.
Warum manuelle Screenshot-Erstellung nicht skaliert
Stell dir vor, deine App unterstuetzt 15 Sprachen und du hast 6 Screenshots pro Store-Eintrag. Das sind 90 Bilder nur fuer eine Plattform. Fuer iPhone und iPad verdoppelt sich die Zahl. Kommt noch Google Play dazu, bist du schnell bei mehreren hundert Assets.
Jedes Mal, wenn sich das UI aendert oder du eine neue Funktion bewirbst, musst du diesen Prozess wiederholen. Das kostet nicht nur Zeit, sondern ist auch fehleranfaellig. Falsche Texte, veraltete Screenshots oder inkonsistentes Branding sind die typischen Folgen.
Der Template-basierte Ansatz von Screenshots.live
Screenshots.live loest dieses Problem mit einem Template-System. Du erstellst einmal ein visuelles Template mit Platzhaltern fuer Text, Bilder und Geraete-Frames. Dieses Template kann dann per API mit verschiedenen Inhalten befuellt werden, um lokalisierte Screenshots in Sekundenschnelle zu generieren.
Das Grundprinzip ist einfach: Design einmal, rendere unbegrenzt oft. Dein Designer erstellt das Template, und die API uebernimmt den Rest.
So funktioniert es
1. Template erstellen: Im visuellen Editor von Screenshots.live legst du Layout, Schriften, Farben und Platzhalter fest.
2. API-Aufruf konfigurieren: Du sendest einen POST-Request mit den gewuenschten Texten und Bildern.
3. Screenshot erhalten: Die API gibt dir ein fertig gerendertes Bild zurueck, das du direkt im Store verwenden kannst.
YAML-Konfiguration fuer Lokalisierung
Um den Prozess weiter zu vereinfachen, kannst du eine YAML-Datei verwenden, die alle Texte pro Sprache enthaelt:
templates:
- id: "hero-screenshot"
layers:
title:
de: "Deine Aufgaben im Griff"
en: "Stay on Top of Tasks"
fr: "Gerez vos taches"
subtitle:
de: "Einfach. Schnell. Zuverlaessig."
en: "Simple. Fast. Reliable."
fr: "Simple. Rapide. Fiable."Ein einfaches Skript iteriert ueber die Sprachen und ruft fuer jede Kombination die API auf. So generierst du hunderte Screenshots in Minuten statt Tagen.
Fastlane-Integration
Wenn du bereits Fastlane fuer dein App-Deployment nutzt, laesst sich Screenshots.live nahtlos integrieren. In deinem Fastfile kannst du einen eigenen Lane definieren, der die Screenshots generiert und direkt hochlaedt:
lane :generate_screenshots do
screenshots = generate_via_api(
template_id: "hero-screenshot",
locales: ["de", "en", "fr", "es"]
)
upload_to_app_store(
screenshots_path: screenshots.output_dir
)
endDamit wird die Screenshot-Generierung Teil deines bestehenden Release-Workflows.
CI/CD-Pipeline-Setup
Noch besser wird es, wenn du die Screenshot-Generierung in deine CI/CD-Pipeline einbindest. Bei jedem Release werden automatisch neue Screenshots erzeugt und im Store aktualisiert. Ein typischer Workflow sieht so aus:
1. Code-Aenderung wird gepusht: Ein neuer Commit loest die Pipeline aus.
2. Build und Tests: Die App wird gebaut und getestet.
3. Screenshot-Generierung: Die Pipeline ruft die Screenshots.live-API auf und erzeugt alle lokalisierten Bilder.
4. Store-Upload: Die fertigen Screenshots werden automatisch in den App Store und Google Play hochgeladen.
# GitHub Actions Example
steps:
- name: Generate Screenshots
run: |
python generate_screenshots.py \
--template hero-screenshot \
--locales de,en,fr,es,it,pt \
--output ./screenshots
- name: Upload to App Store
run: fastlane deliver --screenshots_path ./screenshotsDieser Ansatz eliminiert manuelle Schritte komplett und stellt sicher, dass deine Store-Eintraege immer aktuell sind.
Lokalisierung automatisieren
Die groesste Zeitersparnis ergibt sich bei der Lokalisierung. Anstatt fuer jede Sprache manuell Texte in Bilder einzusetzen, definierst du die Uebersetzungen einmal in deiner YAML-Datei oder holst sie direkt aus deinem Uebersetzungs-Tool.
Screenshots.live unterstuetzt dabei alle gaengigen Sprachen und Schriftsysteme. Ob Arabisch mit Rechts-nach-links-Schrift oder Japanisch mit komplexen Zeichen, die Rendering-Engine behandelt alles korrekt.
Durch die Integration mit Uebersetzungsplattformen wie Lokalise oder Phrase kannst du den Workflow vollstaendig automatisieren: Neue Uebersetzungen loesen automatisch die Generierung neuer Screenshots aus.
Vorteile gegenueber manueller Erstellung
Zusammengefasst bietet der automatisierte Ansatz folgende Vorteile:
- Geschwindigkeit: Hunderte Screenshots in Minuten statt Tagen
- Konsistenz: Alle Screenshots folgen demselben Design-System
- Skalierbarkeit: Neue Sprachen oder Geraete hinzuzufuegen kostet kaum zusaetzlichen Aufwand
- Fehlerreduktion: Keine manuellen Tippfehler oder veralteten Screenshots
- Kostenersparnis: Weniger Design-Stunden, schnellere Time-to-Market
Fazit
Manuelle Screenshot-Erstellung ist ein Relikt aus einer Zeit, in der Apps nur in einer Sprache und fuer ein Geraet veroeffentlicht wurden. Heute, mit globalen Maerkten und dutzenden Geraeteklassen, braucht es einen automatisierten Ansatz.
Screenshots.live bietet genau das: Ein Template-System mit leistungsstarker API, das sich nahtlos in bestehende Workflows integriert. Ob Fastlane, GitHub Actions oder ein anderes CI/CD-System, die Integration ist einfach und der Nutzen enorm.
Starte noch heute und automatisiere deine App-Store-Screenshots. Dein zukuenftiges Ich wird es dir danken.