Skip to content
Alle Beiträge
Blog25. März 20264 min read
SL

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
  )
end

Damit 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 ./screenshots

Dieser 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.

Ähnliche Beiträge