App-Store-Screenshots gestalten ohne Photoshop
Photoshop und Figma sind Allzweck-Design-Tools. Sie können alles — auch App-Store-Screenshots. Doch App-Store-Screenshots sind ein enges Designfeld mit sehr spezifischen Anforderungen (exakte Abmessungen pro Geräteklasse, sich wiederholende Layouts über mehrere Panels, Batch-Export pro Sprache, Geräterahmen-Rendering), die Allzweck-Tools nur umständlich abdecken.
Browser-native Screenshot-Tools — Mokbi ist eines davon, aber zur Kategorie gehören auch AppLaunchpad, Previewed, AppMockUp, MockUPhone und einige weitere — sind speziell für dieses enge Feld entwickelt. Für die konkrete Aufgabe sind sie schneller. Der Kompromiss: Benachbarte Aufgaben wie allgemeines Grafikdesign oder Bildbearbeitung decken sie nicht ab.
Was du dir sparst
Den Einrichtungsaufwand in Photoshop
App-Store-Screenshots in Photoshop bedeuten in der Regel: eine Arbeitsfläche in den richtigen Abmessungen anlegen, ein Geräterahmen-Asset importieren (meist von Apples Design Resources oder einem kostenlosen PSD-Pack heruntergeladen), den Screenshot im Rahmen positionieren, Ecken maskieren, Textebenen hinzufügen, die Smart-Object-Skalierung anpassen. Das alles multipliziert mit jeder Geräteklasse.
Browser-Tools erledigen das mit einem Klick: Gerät auswählen, Screenshot ablegen, der Rahmen wird gerendert. Sprachvarianten speicherst du, ohne die Einrichtung zu wiederholen. Der Einrichtungsaufwand sinkt von einer Stunde auf etwa dreißig Sekunden.
Die Komponentenkomplexität in Figma
Figma kann das Wiederholungsproblem über Komponenten, Varianten und Auto-Layout lösen. Der initiale Aufwand ist real — ein sauber komponentiertes App-Store-Screenshot-System in Figma zu bauen dauert beim ersten Mal ein bis zwei Tage. Danach geht es schnell, doch der Kompromiss ist, dass jede nicht-triviale Änderung am System (neue Geräteklasse, neue Sprache, neues Seitenverhältnis) macht es nötig, die Komponenten neu aufzubauen.
Für ein hauseigenes Designteam, das Screenshots quartalsweise veröffentlicht, rechnet sich die Figma-Investition. Für einen Indie-Entwickler, der Screenshots zweimal im Jahr veröffentlicht, nicht.
Den Export-Aufwand
Manueller Export pro Gerät × pro Sprache in Photoshop oder Figma bedeutet hunderte Einzelexporte für eine mehrsprachige Einreichung. Browser-Tools erzeugen das gesamte ZIP mit einem Klick. Hier summieren sich die Zeitersparnisse — jede weitere Sprache, in der du veröffentlichst, ist praktisch kostenlos.
Was du einbüßt
Pixelgenaue Fotoretusche
Wenn dein Screenshot Foto-Hintergründe mit aufwendiger Retusche enthält (Color Grading eines echten Fotos, störende Elemente entfernen, Hauttöne in Lifestyle-Aufnahmen korrigieren), ist Photoshop nach wie vor die erste Wahl. Browser-Tools können CSS-Filter anwenden (Weichzeichner, Helligkeit, Kontrast, Sättigung), aber keine selektive Retusche.
Für die meisten App-Store-Screenshots — die entweder einfarbige Verläufe oder vergleichsweise schlichte Geräte-Screenshots verwenden, keine retuschierten Fotos — ist das keine echte Einschränkung.
Ausgefallene Blend-Modi
Multiply, Overlay, Screen, Color-Dodge — der vollständige Photoshop-Blend-Mode-Satz ist in Browser-Tools selten verfügbar. Die meisten App-Store-Screenshots verwenden einfache Deckkraft und Schatteneffekte, keine kreativen Blend-Modi. Wenn dein Design auf einem bestimmten Multiply-gemischten Textur-Overlay basiert, gewinnt Photoshop.
Finales Compositing für App-Preview-Videos
App-Preview-Videos (30-Sekunden-Clips, die auf der App-Store-Seite automatisch abgespielt werden) brauchen Videobearbeitung: After Effects, Premiere, Final Cut oder Ähnliches. Browser-Tools decken Screenshots ab, aber kein Video-Compositing — für den Video-Teil der App-Store-Seite benötigst du also weiterhin ein separates Tool.
Der hybride Workflow
Viele Indie-Teams setzen auf einen hybriden Ansatz:
- Echte Screenshots aufnehmen aus der laufenden App über den Simulator oder ein echtes Gerät.
- Einzelne Frames in Photoshop nachbearbeiten, wenn ein Screenshot Korrekturen braucht (Statusleisten-Artefakt entfernen, Grafikfehler beheben, Farbkorrektur durchführen).
- Das Karussell in Mokbi zusammenstellen (oder einem gleichwertigen Browser-Tool) — Geräterahmen, Text-Overlays, Verlauf, mehrere Panels.
- Übersetzen und per Batch-Export ausgeben über das Browser-Tool.
- App-Preview-Video bearbeiten in After Effects oder DaVinci Resolve, wenn du Video lieferst.
Wann Photoshop die bessere Wahl ist
- Du machst aufwendiges Foto-Compositing (Lifestyle-Aufnahmen, komplexe Hintergründe, mehrschichtige Fotoretusche).
- Du hast eine bestehende Photoshop-Pipeline und eine Asset-Bibliothek, die du nicht neu aufbauen möchtest.
- Deine Marke erfordert sehr spezifische eigene Typografie oder Effekte, die Browser-Tools nicht bieten.
- Du arbeitest in einer Agentur mit erfahrenen Designern, die täglich mit Photoshop arbeiten — die eingespielte Gewohnheit wiegt mehr als der Tool-Aufwand.
Wann Browser-Tools die bessere Wahl sind
- Indie-Entwickler oder kleines Team, veröffentlicht selten.
- Mehrsprachige Veröffentlichung (wo Batch-Export und Übersetzung per Klick echte Zeit sparen).
- Häufige App-Store-Screenshot-Updates (bei jedem Release).
- Keine bestehende Design-Infrastruktur — alles von Grund auf neu.