Ist dieser Geräte-Mockup-Generator kostenlos?

Ja. Alle Geräte, Farben, Winkel und Exportgrößen sind kostenlos, ohne Anmeldung und ohne Wasserzeichen.

Kann ich damit ein iPhone- oder iPad-Mockup erstellen?

Sie können ein Mockup eines modernen Smartphones oder Tablets erstellen, das heute beliebten Modellen ähnelt — genau das, was die meisten für eine App- oder Website-Vorschau brauchen. Die Modelle sind generisch und im Code gezeichnet; sie sind keine offiziellen Apple-Produktbilder, und dieses Tool ist nicht mit Apple verbunden.

Kann ich ein Website- oder Browser-Mockup erstellen?

Ja. Wählen Sie Browser, um einen Screenshot Ihrer Website in ein Desktop-Browserfenster mit Adressleiste zu setzen — geben Sie Ihre eigene Domain ein und wählen Sie eine helle oder dunkle Symbolleiste —, oder wählen Sie Desktop, um ihn auf einem großen Display mit Ständer zu zeigen.

Wie bekomme ich ein transparentes PNG-Mockup?

Stellen Sie den Hintergrund auf Transparent und das Format auf PNG (oder WebP) und laden Sie es herunter. Der Schatten bleibt als weiche, halbtransparente Pixel erhalten und fügt sich so in jeden Untergrund ein.

Wie drehe ich das Gerät?

Nutzen Sie die Regler X, Y und Z oder geben Sie einen genauen Winkel von −180° bis 180° ein. Sie können das Gerät auch in der Vorschau ziehen — mit gedrückter Shift-Taste dreht es sich in der Bildebene — oder in die Vorschau klicken und die Pfeiltasten nutzen. Die Voreinstellungen springen zu gängigen Ansichten, und Zurücksetzen stellt den Standardwinkel wieder her.

Welche Auflösung kann ich exportieren?

1080, 2048 oder 4096 Pixel an der langen Seite oder eine eigene Größe bis 8192 Pixel, in 1:1, 4:5, 16:9, 9:16 oder 4:3. Das Mockup wird in dieser Größe neu gerendert, ist also scharf statt hochskaliert.

Mein Screenshot wird auf dem Bildschirm abgeschnitten. Wie zeige ich ihn ganz?

Stellen Sie die Bildschirmanpassung von Füllen auf Einpassen um; dann wird das ganze Bild mit Balken in einer Farbe Ihrer Wahl gezeigt. Bei Füllen bestimmen die Ausrichtungsknöpfe, ob oben, Mitte oder unten eines hohen Screenshots erhalten bleibt.

Wird mein Screenshot hochgeladen?

Nein. Die 3D-Szene läuft mit WebGL in Ihrem Browser, und das Bild verlässt Ihr Gerät nie.

Es heißt, WebGL sei nicht verfügbar. Was kann ich tun?

Die 3D-Ansicht benötigt WebGL. Aktivieren Sie die Hardwarebeschleunigung in den Browsereinstellungen, aktualisieren Sie Ihre Grafiktreiber oder probieren Sie einen anderen Browser; jede aktuelle Version von Chrome, Edge, Firefox oder Safari unterstützt es.

3D Mockup Generator: Smartphone & Laptop

Ihr Screenshot auf einem realistischen 3D-Gerät, aus jedem Winkel

Legen Sie einen Screenshot oder ein Design ab, und es erscheint auf dem Bildschirm eines 3D-Smartphones, -Tablets, -Laptops, -Desktop-Displays oder Browserfensters. Drehen Sie das Gerät um die X-, Y- und Z-Achse mit Schiebereglern, eingegebenen Winkeln, den Pfeiltasten oder per Ziehen; wählen Sie eine Gerätefarbe, einen Hintergrund und einen weichen Schatten; exportieren Sie dann ein scharfes PNG, JPEG oder WebP mit bis zu 8192 Pixeln — mit transparentem Hintergrund, wenn Sie es auf Ihrer eigenen Folie oder Landingpage platzieren möchten. Die Geräte sind im Code modelliert und werden mit WebGL in Ihrem Browser gerendert, daher wird nichts hochgeladen und es gibt kein Wasserzeichen.

So erstellen Sie ein Geräte-Mockup

1Legen Sie einen Screenshot auf der Seite ab, wählen Sie eine Datei oder fügen Sie ihn mit Ctrl/⌘ + V ein. Bis dahin wird ein Beispiel-App-Bildschirm angezeigt.
2Wählen Sie Smartphone, Tablet, Laptop, Desktop oder Browser. Wählen Sie eine Farbe — oder beim Browserfenster eine helle oder dunkle Symbolleiste und die angezeigte Adresse. Smartphones und Tablets lassen sich ins Querformat drehen; der Laptop-Deckel öffnet sich in jedem Winkel.
3Wählen Sie eine Ansicht in der Leiste über der Vorschau — Hero ¾, Vorne, Nach links/rechts geneigt, Isometrisch oder Flat Lay — und feinjustieren Sie im Tab Ansicht, oder ziehen Sie das Gerät in der Vorschau.
4Legen Sie den Hintergrund (transparent, einfarbig, Verlauf oder eine Unschärfe Ihres eigenen Screenshots), den Schatten und die Lichtrichtung fest.
5Wählen Sie Seitenverhältnis, Größe und Format, und laden Sie das Bild herunter oder kopieren Sie es in die Zwischenablage.

Smartphone-, Tablet-, Laptop-, Desktop- und Browser-Mockups in 3D

Flache Mockup-Vorlagen bieten einen einzigen festen Winkel. Hier ist das Gerät ein echtes 3D-Modell, sodass Sie es frontal für einen Screenshot im App-Store-Stil, in einem dramatischen Dreiviertelwinkel für ein Hero-Bild oder flach liegend für einen Social-Media-Post zeigen können — aus demselben Upload, in Sekunden.

Das Smartphone-Mockup hat ein modernes randloses Display mit einer pillenförmigen Kameraaussparung, einen polierten Metallrahmen und eine Dreifachkamera auf der Rückseite. Das Tablet-Mockup hat schmale, gleichmäßige Ränder im Stil aktueller Tablets der iPad-Klasse, und das Laptop-Mockup hat eine vollständige Tastatur, ein Trackpad und einen Deckel, der sich von geschlossen bis ganz zurückgeklappt öffnen lässt. Es sind generische Designs, die heute beliebten Geräten ähneln — nützlich überall dort, wo nach einem iPhone-, iPad- oder MacBook-Mockup gesucht wird —, aber keine offiziellen Produktbilder, und dieses Tool ist weder mit Apple noch mit einem anderen Hersteller verbunden.

Website-Mockups in einem Browserfenster

Für eine Website oder Web-App wählen Sie Browser: Ihr Screenshot füllt den Seitenbereich eines schlichten Desktop-Browserfensters mit Fensterknöpfen und einer Adressleiste, die die von Ihnen eingegebene Domain zeigt. Die Symbolleiste gibt es hell und dunkel passend zu Ihrem Design, und das Fenster kann wie die Geräte in jedem Winkel schweben — oder frontal ausgerichtet sein für ein klares, flaches Website-Mockup.

Lieber echte Hardware? Desktop zeigt die Seite auf einem großen Display mit schmalen Rändern auf einem Aluminiumständer, so wie eine Website auf einem Studiomonitor aussieht. Mit Füllen und Oben zeigt ein langer ganzseitiger Screenshot seinen ersten Bildschirm, genau wie ihn ein Besucher sieht.

Steuerung

Drehung X, Y und Z: X kippt das Gerät zu Ihnen hin oder von Ihnen weg, Y dreht es nach links und rechts, Z dreht es in der Bildebene. Jede Achse reicht von −180° bis 180° und akzeptiert eingegebene Werte. Ziehen Sie in der Vorschau, um um X und Y zu drehen, halten Sie beim Ziehen <kbd>Shift</kbd>, um um Z zu drehen, oder fokussieren Sie die Vorschau und nutzen Sie die Pfeiltasten (<kbd>Shift</kbd> für 15°-Schritte), <kbd>Q</kbd>/<kbd>E</kbd> für Z und <kbd>R</kbd> zum Zurücksetzen.
Zoom und Sichtfeld: Der Zoom bestimmt, wie viel des Bildausschnitts das Gerät ausfüllt. Das Sichtfeld legt die Perspektive fest: Ein Weitwinkel übertreibt die Tiefe wie eine nah gehaltene Handykamera, ein sehr enges wirkt fast orthografisch, wie ein Produktrendering oder eine isometrische Illustration.
Bildschirmanpassung: Füllen bedeckt den ganzen Bildschirm und schneidet den Überstand ab — oben verankert zeigt es den Anfang eines langen ganzseitigen Screenshots. Einpassen zeigt das ganze Bild mit Balken in einer Farbe Ihrer Wahl, und Strecken verzerrt es auf die Form des Bildschirms.
Glasspiegelung: Eine dezente Spiegelung des Studiolichts auf dem Deckglas, durch die der Bildschirm wie Glas statt wie ein Aufkleber wirkt. Schalten Sie sie aus für vollkommen flache Bildschirmfarben.
Hintergrund und Schatten: Exportieren Sie auf transparentem Hintergrund, einer Volltonfarbe, einem zweifarbigen Verlauf oder einer weichen Unschärfe Ihres eigenen Screenshots. Der Schatten kann auf dem Boden unter dem Gerät liegen, passend für einen Laptop auf einem Tisch, oder an der Wand dahinter, was einem Smartphone einen schwebenden Schlagschatten gibt.
Beleuchtung: Das Gerät wird von einer weichen Studioumgebung beleuchtet, sodass Metall und Glas realistische Spiegelungen zeigen. Der Lichtwinkel schwenkt Lichter und Spiegelungen um das Gerät; die Intensität macht die ganze Szene heller oder dunkler.

Exportgrößen und Formate

Das Bild wird in der Exportgröße neu gerendert — 1080, 2048 oder 4096 Pixel an der langen Seite oder eine beliebige eigene Größe von 256 bis 8192 — als Quadrat 1:1, Hochformat 4:5, Querformat 16:9, Story 9:16 oder 4:3. Da es ein neues Rendering und keine vergrößerte Vorschau ist, bleiben die Kanten in jeder Größe scharf, unabhängig von der Größe Ihres Bildschirms.

PNG ist verlustfrei und behält die Transparenz, die richtige Wahl für ein Mockup, das Sie auf einer Website, Folie oder in einer Designdatei platzieren. WebP behält ebenfalls die Transparenz und ist viel kleiner. JPEG hat keine Transparenz, daher wird ein transparenter Hintergrund weiß gefüllt. Kopieren legt ein PNG in die Zwischenablage, bereit zum Einfügen in Figma, Keynote, Slack oder ein Dokument.

Tipps für bessere Mockups

Exportieren Sie den Screenshot in der Auflösung des Geräts — ein Smartphone-Screenshot von etwa 1179 × 2556 oder eine Desktop-Aufnahme mit 2560 × 1600 —, damit der Bildschirm selbst in einem 4K-Mockup scharf bleibt.
Ein Dreiviertelwinkel mit Licht von derselben Seite wie die Drehung wirkt am natürlichsten; eine Frontansicht eignet sich am besten für App-Store-Einträge.
Verwenden Sie für das Hero einer Landingpage ein transparentes PNG und lassen Sie den Hintergrund Ihrer eigenen Seite durchscheinen.
Muss der Screenshot erst zugeschnitten oder skaliert werden? Nutzen Sie den Bildzuschneider oder das Tool zum Bildskalieren, und das Tool für Social-Media-Bildgrößen, um das fertige Mockup an jede Plattform anzupassen.

Ein kostenloser Mockup-Generator, der Ihre Designs privat hält

Unveröffentlichte App-Bildschirme und Kundenarbeiten sollten nicht auf fremde Server hochgeladen werden. Hier wird Ihr Screenshot vollständig auf Ihrem Gerät mit WebGL gelesen, gezeichnet und gerendert; er wird nirgendwohin gesendet. Kein Konto, kein Wasserzeichen und keine Begrenzung, wie viele Mockups Sie erstellen. Ihre Einstellungen — Gerät, Winkel, Hintergrund und Exportoptionen — werden in diesem Browser gespeichert; das Bild nicht.

Häufige Fragen

Ist dieser Geräte-Mockup-Generator kostenlos?: Ja. Alle Geräte, Farben, Winkel und Exportgrößen sind kostenlos, ohne Anmeldung und ohne Wasserzeichen.
Kann ich damit ein iPhone- oder iPad-Mockup erstellen?: Sie können ein Mockup eines modernen Smartphones oder Tablets erstellen, das heute beliebten Modellen ähnelt — genau das, was die meisten für eine App- oder Website-Vorschau brauchen. Die Modelle sind generisch und im Code gezeichnet; sie sind keine offiziellen Apple-Produktbilder, und dieses Tool ist nicht mit Apple verbunden.
Kann ich ein Website- oder Browser-Mockup erstellen?: Ja. Wählen Sie Browser, um einen Screenshot Ihrer Website in ein Desktop-Browserfenster mit Adressleiste zu setzen — geben Sie Ihre eigene Domain ein und wählen Sie eine helle oder dunkle Symbolleiste —, oder wählen Sie Desktop, um ihn auf einem großen Display mit Ständer zu zeigen.
Wie bekomme ich ein transparentes PNG-Mockup?: Stellen Sie den Hintergrund auf Transparent und das Format auf PNG (oder WebP) und laden Sie es herunter. Der Schatten bleibt als weiche, halbtransparente Pixel erhalten und fügt sich so in jeden Untergrund ein.
Wie drehe ich das Gerät?: Nutzen Sie die Regler X, Y und Z oder geben Sie einen genauen Winkel von −180° bis 180° ein. Sie können das Gerät auch in der Vorschau ziehen — mit gedrückter Shift-Taste dreht es sich in der Bildebene — oder in die Vorschau klicken und die Pfeiltasten nutzen. Die Voreinstellungen springen zu gängigen Ansichten, und Zurücksetzen stellt den Standardwinkel wieder her.
Welche Auflösung kann ich exportieren?: 1080, 2048 oder 4096 Pixel an der langen Seite oder eine eigene Größe bis 8192 Pixel, in 1:1, 4:5, 16:9, 9:16 oder 4:3. Das Mockup wird in dieser Größe neu gerendert, ist also scharf statt hochskaliert.
Mein Screenshot wird auf dem Bildschirm abgeschnitten. Wie zeige ich ihn ganz?: Stellen Sie die Bildschirmanpassung von Füllen auf Einpassen um; dann wird das ganze Bild mit Balken in einer Farbe Ihrer Wahl gezeigt. Bei Füllen bestimmen die Ausrichtungsknöpfe, ob oben, Mitte oder unten eines hohen Screenshots erhalten bleibt.
Wird mein Screenshot hochgeladen?: Nein. Die 3D-Szene läuft mit WebGL in Ihrem Browser, und das Bild verlässt Ihr Gerät nie.
Es heißt, WebGL sei nicht verfügbar. Was kann ich tun?: Die 3D-Ansicht benötigt WebGL. Aktivieren Sie die Hardwarebeschleunigung in den Browsereinstellungen, aktualisieren Sie Ihre Grafiktreiber oder probieren Sie einen anderen Browser; jede aktuelle Version von Chrome, Edge, Firefox oder Safari unterstützt es.

3D-Geräte-Mockup-Generator