Echte 3D-Geräte statt flacher Rahmen: warum wir Showoff gebaut haben

Showoff kommt von Ryvelia aus Deutschland, demselben Team, das auch Podless baut. Der Anlass ist unspektakulär: Wer Software veröffentlicht, braucht Bilder davon. Screenshots für den Store, ein Aufmacher für die Website, ein kurzer Clip für den Launch. Und fast immer landet man bei derselben Lösung — einem flachen Rahmen.

Das Problem mit flachen Rahmen

Ein flacher Rahmen ist ein Bild von einem Telefon mit einem Loch, in das dein Screenshot geklebt wird. Das geht schnell und sieht ordentlich aus. Es hat nur ein paar eingebaute Grenzen, die man spätestens beim dritten Projekt spürt:

• Es gibt genau eine Ansicht: frontal. Wer das Gerät schräg will, braucht einen anderen Rahmen — und der passt dann zum Rest der Serie nicht.
• Licht und Schatten sind aufgemalt. Sie wissen nichts vom Hintergrund, vor dem das Gerät steht. Vor einer kräftigen Farbe sieht es deshalb aus wie ausgeschnitten und aufgeklebt, weil es genau das ist.
• Bewegung gibt es nicht. Wer aus denselben Bildern ein Video machen will, fängt in einem anderen Programm von vorn an.

Was ein 3D-Gerät anders macht

In Showoff liegt dein Screenshot auf dem Display eines 3D-Modells. Das Gerät steht auf einer Bühne mit Boden, Hintergrund und Licht, und davor steht eine Kamera. Daraus folgt eine ganze Menge, ohne dass du etwas dafür tun musst:

• Der Blickwinkel ist frei. Leicht von oben, leicht von der Seite, ganz nah an einer Kante — dieselbe Szene, eine andere Kameraposition.
• Der Hintergrund beleuchtet das Gerät. Mit „An Hintergrund anpassen“ nimmt das Gehäuse die Farbe der Umgebung an den Kanten auf, wie ein echtes Gerät vor einer farbigen Wand.
• Das Gerät steht auf etwas. Ein Kontaktschatten am Boden verankert es, statt es schweben zu lassen.
• Das Display ist Glas. Eine leichte Spiegelung zeigt das, ist aber so niedrig eingestellt, dass dein Screenshot sein Schwarz und seine Farben behält.
• Die Kamera hat ein langes Objektiv. Der Bildwinkel steht von Haus aus auf 20 Grad — der flache, ruhige Look, den man von Produktfotos kennt, ohne die verzerrten Kanten eines Weitwinkels.

Eine Szene, viele Ausgaben

Der eigentliche Vorteil zeigt sich erst beim zweiten Export. Weil die Szene aus Gerät, Licht und Kamera besteht und nicht aus einem fertigen Bild, kannst du sie in einem anderen Format noch einmal ausgeben: Hochformat für den App Store, 9:16 für Google Play und Stories, quadratisch für den Feed, breit für die Website. Den Screenshot tauschst du per Rechtsklick aus, der Rest bleibt stehen.

Und dieselbe Bühne kann sich bewegen. Ein Projekt als „Film“ angelegt, bekommt eine Zeitachse: Geräte fliegen herein, die Kamera fährt auf die Stelle im UI, auf die es ankommt, darunter liegt Musik. Exportiert wird als MP4 oder WebM, direkt aus dem Browser.

Echte Geräte, nicht irgendein Telefon

Ein Mockup lebt davon, dass man das Gerät wiedererkennt. Deshalb stehen im Editor Modelle konkreter Geräte: iPhone 17 und 17 Pro, die iPhone-16-Reihe, Google Pixel 10 Pro und 11 Pro, Samsung Galaxy S24 und S24+, iPad Pro in 11 und 13 Zoll, MacBook Pro in 14 und 16 Zoll, Apple Watch Series 9 und Ultra 2 und das Studio Display. Wo es mehrere Farben gibt, kannst du wählen — das MacBook in Silber oder Space Schwarz, die Uhren mit verschiedenen Armbändern.

Auch der Inhalt wird wie beim echten Gerät behandelt. Ein Handy-Screenshot wird mittig eingepasst. Eine Webseite auf dem MacBook dagegen behält ihre volle Breite und läuft nach unten weiter, damit Logo und Navigation nicht im Beschnitt verschwinden.

Wo 3D nicht die Antwort ist

Ehrlich gesagt: nicht überall. Ein paar Dinge solltest du wissen, bevor du jedes Bild schräg stellst.

• Schrift in starker Schräge liest niemand. Für textlastige Screens ist ein fast frontaler Blick richtig, und bei Kamerafahrten gibt es dafür den 2D-Modus, der senkrecht auf das Display schaut.
• 3D rechnet. Showoff läuft im Browser, und ein Video in hoher Auflösung braucht dort seine Zeit, weil jedes Bild einzeln gerechnet wird. Dafür sieht die Datei aus wie die Vorschau, egal wie schnell der Rechner ist.
• Wir haben bewusst vereinfacht. Frei gesetzte Schlüsselbilder gibt es nicht; Bewegung entsteht aus Auftritten, Abgängen, Dauerbewegungen und der automatischen Kamerafahrt. Das deckt die Aufnahmen ab, die man für ein Produkt braucht. Wer einen Werbefilm mit Figurenanimation plant, braucht ein anderes Werkzeug.

Im Browser, und im Team

Es gibt nichts zu installieren. Projekte liegen in einer Organisation, sortiert in Ordnern, und für jedes Projekt legst du fest, wer aus der Organisation hineindarf. Wer drin ist, arbeitet mit — gleichzeitig, mit sichtbaren Mauszeigern der anderen. Die Designerin richtet das Licht ein, während der Entwickler die neuen Screenshots austauscht, und keiner schickt dem anderen eine Datei.

Probier es aus

Der schnellste Weg ist eine fertige Szene aus den Vorlagen: anklicken, Screenshot austauschen, exportieren. Ein Konto legst du hier an. Und wenn dir ein Gerät fehlt oder etwas nicht so funktioniert, wie es hier steht, schreib uns — wir lesen das.