Geräte-Mockup-Generator

Geräte-Mockup-Generator

Der Geräte-Mockup-Generator setzt einen Screenshot in einen echten Geräterahmen: ein iPhone mit Dynamic Island, ein Android-Telefon, ein iPad, ein MacBook Pro, ein Browserfenster mit Tab-Leiste und Adressleiste oder einen Desktop-Monitor auf einem Standfuß. Jeder Rahmen wird in den echten Bildschirmproportionen dieses Geräts gezeichnet, sodass der Export dem entspricht, wie der Screenshot auf der Hardware tatsächlich aussehen würde. Der Rahmen wird auf einer Canvas in Ihrem eigenen Browser-Tab gemalt, das heißt ein Screenshot einer unveröffentlichten App oder eines internen Dashboards verlässt Ihren Rechner nie.

Die drei Rahmen, nach denen die meisten greifen

Ein Rahmen ist eine Abkürzung für die Leserin oder den Leser: Er sagt auf einen Blick, ob sie eine Telefon-App, eine Webseite oder ein Desktop-Tool sehen, noch bevor sie ein einziges Wort im Screenshot gelesen haben.

Die Zuschneideanzeige: der Teil, den die meisten Mockup-Tools weglassen

Ein Gerätebildschirm hat eine feste Form. Ein iPhone-Bildschirm ist 1179 mal 2556, also grob 9:19,5, und fast nichts, was Sie als Screenshot aufnehmen, hat genau dieses Format. Die meisten Mockup-Generatoren skalieren Ihr Bild still, bis es den Bildschirm bedeckt, und werfen weg, was über den Rand hängt — sodass Sie erst nach dem Posten merken, dass das untere Ende Ihrer Preistabelle fehlt.

Dieses Tool misst das stattdessen. Im Modus Bildschirm füllen meldet die Anzeige unter den Anpassungs-Schaltflächen den genauen Prozentsatz Ihres Screenshots, den der Rahmen verdeckt, und der Balken wechselt von Grün nach Rot, wenn diese Zahl steigt. Ist sie höher, als Ihnen lieb ist, haben Sie zwei Auswege:

• Verschieben. Der Regler bewegt das sichtbare Fenster entlang der Achse, die überläuft, sodass Sie die Kopfzeile, die Mitte oder die Fußzeile behalten können, statt einen zentrierten Zuschnitt hinzunehmen.
• Alles einpassen. Der Screenshot wird skaliert, bis jedes Pixel im Bildschirm liegt, und die restlichen Streifen werden mit einer Farbe Ihrer Wahl gefüllt. Nichts wird zugeschnitten, zum Preis sichtbarer Bänder oben und unten oder links und rechts.

Eine gute Regel: Unter etwa 8 % Zuschnitt ist für Leser unsichtbar, 8 % bis 25 % sind in Ordnung, wenn Sie so verschoben haben, dass das Motiv bleibt, und über 25 % sollten Sie den Screenshot im Seitenverhältnis des Geräts neu aufnehmen oder auf Alles einpassen wechseln.

Welcher Rahmen, und in welcher Auflösung

Screenshots in diesen Pixelgrößen oder größer bleiben bei jeder Exportgröße scharf. Kleinere werden hochskaliert, und als Erstes gibt das Anti-Aliasing bei kleinem Text im Screenshot nach.

So verwenden Sie den Geräte-Mockup-Generator: Schritt für Schritt

1. Screenshot hinzufügen: Ziehen Sie ein PNG oder JPG auf den Upload-Bereich, klicken Sie zum Durchsuchen, oder drücken Sie Strg+V, um eines direkt aus der Zwischenablage einzufügen.
2. Geräterahmen wählen: iPhone, Android, iPad, MacBook, Browser oder Monitor. Telefon- und Tablet-Rahmen wechseln außerdem zwischen Hoch- und Querformat.
3. Zuschneideanzeige prüfen: Wenn zu viel verdeckt ist, ziehen Sie den Verschiebe-Regler oder wechseln Sie zu Alles einpassen, damit nichts verloren geht.
4. Rahmen gestalten: Legen Sie Rahmenfarbe, Hintergrund, Innenabstand, Schatten und Glanz fest. Beim Browser-Rahmen geben Sie eigenen Tab-Titel und Adresse ein.
5. Exportieren: Wählen Sie eine Exportgröße, dann PNG herunterladen, um das Mockup zu speichern, oder Bild kopieren, um es in einen Beitrag einzufügen.

Praktische Tipps

• Nehmen Sie den Screenshot nach Möglichkeit im Seitenverhältnis des Geräts auf. Ein Browserfenster, das Sie vor der Aufnahme auf 1179 mal 2556 verkleinern, lässt die Zuschneideanzeige 0 % anzeigen und das Mockup pixelgenau werden.
• Nutzen Sie den Browser-Rahmen, wenn die URL zählt. Eine eigene Domain in der Adressleiste setzt Ihre Marke ins Bild, ohne eine Bildunterschrift hinzuzufügen.
• Halten Sie den Innenabstand zwischen 6 % und 12 %. Weniger, und das Gerät berührt den Rand des Beitrags; mehr, und der Bildschirm wird im Feed unleserlich.
• Passen Sie die Rahmenfarbe an den Screenshot an. Space Black unter einem Dark-Mode-Screenshot, Silber oder Titan unter einem hellen; die Browser-Leiste folgt derselben Wahl automatisch.
• Drehen Sie den Glanz bei textlastigen Bildschirmen herunter. Ein dezenter Schimmer liest sich als Glas, ein starker als Stockfoto und verdeckt Ihren Text.
• Exportieren Sie transparent für Folien. Der Hintergrund KEINE ergibt ein schwebendes Gerät mit Schatten, bereit für jedes Deck oder jeden Hero-Bereich.

Datenschutz

Alles geschieht im Browser-Tab über die HTML5-Canvas-API. Ihr Screenshot wird über eine lokale Objekt-URL gelesen, in den Rahmen gezeichnet und vom Browser selbst als PNG kodiert. Kein Bild wird hochgeladen, gespeichert oder übertragen, und sobald die Seite geladen ist, funktioniert das Tool ohne Netzwerkverbindung weiter.

Häufig gestellte Fragen

Wird mein Screenshot auf einen Server hochgeladen?

Nein. Die Geräterahmen werden mit der HTML5-Canvas-API in Ihrem eigenen Browser-Tab gezeichnet, und Ihr Screenshot wird über eine lokale Objekt-URL gelesen. Nichts wird irgendwohin gesendet, sodass Mockups unveröffentlichter Apps, interner Dashboards oder Kundenarbeit auf Ihrem Rechner bleiben. Nach dem Laden der Seite funktioniert das Tool ganz ohne Netzwerkverbindung weiter.

Welche Geräterahmen gibt es?

Sechs: ein iPhone mit Dynamic Island, ein Android-Telefon mit Punch-Hole-Kamera, ein iPad Pro, ein MacBook Pro mit Notch und Sockel, ein Browserfenster mit Tab-Leiste und Adressleiste sowie ein Desktop-Monitor auf einem Standfuß. Jeder Rahmen verwendet die echten Bildschirmproportionen dieses Geräts, sodass ein hier erstelltes Mockup dem entspricht, wie der Screenshot auf der Hardware aussehen würde.

Mein Screenshot hat nicht dieselbe Form wie der Gerätebildschirm. Was passiert?

Dafür ist die Zuschneideanzeige da. Bildschirm füllen skaliert den Screenshot, bis er den ganzen Bildschirm bedeckt, schneidet also ab, was über den Rand hängt, und die Anzeige nennt den genauen Prozentsatz, der verdeckt ist. Der Verschiebe-Regler bewegt dann das sichtbare Fenster entlang der zugeschnittenen Achse, damit Sie den wichtigen Teil behalten. Alles einpassen skaliert den Screenshot, bis er vollständig im Bildschirm liegt, und füllt die restlichen Streifen mit einer Farbe Ihrer Wahl, sodass nichts verloren geht.

Welche Auflösung sollte mein Screenshot haben?

Passen Sie sie an das Gerät an, das Sie einrahmen: 1179 mal 2556 für das iPhone, 1080 mal 2400 für das Android-Telefon, 1668 mal 2388 für das iPad, 3024 mal 1964 für das MacBook, 1440 mal 900 für das Browserfenster und 2560 mal 1440 für den Monitor. Alles in dieser Größe oder größer bleibt scharf. Kleinere Screenshots funktionieren weiterhin, werden aber hochskaliert, und weiche Kanten werden um Text herum sichtbar.

Kann ich das Gerät auf einem transparenten Hintergrund exportieren?

Ja. Wählen Sie das Farbfeld KEINE, dann wird der Innenabstand um das Gerät als Alpha statt als Farbe exportiert, während Rahmen, Bildschirm und Schlagschatten weiterhin gezeichnet werden. PNG herunterladen behält diese Transparenz — genau das, was Sie wollen, wenn das Mockup auf eine Folie, einen Hero-Bereich oder eine Seite kommt, deren eigener Hintergrund durchscheinen soll.

Warum wird der Browser-Rahmen dunkel?

Die Browser-Leiste folgt der Rahmenfarbe, die Sie wählen. Wählen Sie Space Black, dann wechseln Tab-Leiste, Werkzeugleiste und Adressleiste in ein dunkles Theme, damit das Mockup zu einem Dark-Mode-Screenshot passt; jede der helleren Rahmenfarben ergibt das helle Theme. Tab-Titel und Adresse sind einfache Textfelder, sodass Sie Ihren eigenen Produktnamen und Ihre Domain ins Bild setzen können.

Bildwerkzeuge:

• Linie zu Bild hinzufügen
• Text zum Bild hinzufügen
• Seitenverhältnis-Rechner Neu
• Bild rund zuschneiden Neu
• Collage Maker
• Punkt-zu-Punkt-Generator Beliebt
• EXIF-Daten-Viewer und -Entferner Neu
• GIF spiegeln
• Bild spiegeln Beliebt
• GIF-Ersteller
• bildvermischungstool
• bildkompressor
• bildausschnitt
• bildverbesserer
• Bildgrößenänderer
• bildrotator
• bildteiler
• Bild zu ASCII Art Konverter Neu
• Bild zu SVG Tracer Neu
• Lorem Picsum / Platzhalterbild-Generator Neu
• 📷 OCR / Bild zu Text Neu
• Druckgrößen- und Auflösungsrechner (DPI/PPI)
• Bildgenerator für abgerundete Ecken Neu
• Screenshot-Verschönerer Neu
• Geräte-Mockup-Generator Neu
• Schlagschatten zum Bild hinzufügen Neu
• Rahmen zu Bild hinzufügen Neu