Screenshot-Mockup-Rahmen

Ein roher Screenshot in einer Präsentation oder einer README wirkt wie ein Ausschnitt. Dieselben Pixel in einem Browserfenster oder Handy-Rahmen, auf farbigem Hintergrund mit weichem Schatten, wirken wie ein Produkt. Dieses Screenshot-Mockup-Tool erledigt das in wenigen Sekunden: Bild ablegen, Rahmen wählen, Hintergrund setzen und ein fertiges Bild für Landing Page, Pitch Deck, Release Notes oder LinkedIn-Beitrag herunterladen. Ein typischer Schritt in Designer-Workflows, aber genauso praktisch für Entwickler und Produktmarketing, wenn kein Designprogramm zur Hand ist.

Die drei Rahmen-Vorlagen

• Simple: rundet die Ecken des Screenshots ab und legt ihn mit 48 Pixeln Abstand und Schlagschatten auf den Hintergrund. Gut für Dashboards, zugeschnittene UI-Details und alles, was nicht nach einem bestimmten Gerät aussehen soll.
• Browser: setzt über den Screenshot eine dunkle, 44 Pixel hohe Titelleiste mit den drei bekannten Fensterpunkten (Pink, Gelb, Grün), rundet die äußeren Ecken ab und platziert das Fenster mit 52 Pixeln Abstand. Gut für Screenshots von Websites und Web-Apps. Die Leiste enthält weder Adresszeile noch Tab-Text und bleibt so betriebssystemneutral.
• Phone: umgibt den Screenshot mit einem dunklen Gehäuse, abgerundeten Displayecken und einer Notch oben, auf einem Hintergrund mit 72 Pixeln Abstand. Gut für App-Screens und responsive Ansichten in Handybreite. Der Rahmen ist ein generisches Smartphone, kein Nachbau eines bestimmten Modells.

So erstellen Sie ein Screenshot-Mockup

1. Legen Sie einen oder mehrere Screenshots ab (PNG, JPG, WebP, BMP, TIFF oder AVIF).
2. Wählen Sie eine Vorlage: Simple, Browser oder Phone.
3. Passen Sie Hintergrund, Eckenradius, Schattenunschärfe und Schattendeckkraft an, falls die Standardwerte nicht passen.
4. Wählen Sie das Ausgabeformat und bei JPEG oder AVIF die Qualität.
5. Klicken Sie auf Apply Mockup Frame, prüfen Sie die Vorschau und laden Sie das Bild herunter (oder ein ZIP bei mehreren Dateien).

Die Einstellungen im Detail

• Hintergrund: ein sechsstelliger Hex-Wert wie #0F172A (das voreingestellte dunkle Schiefergrau) oder das Wort transparent. Mit transparentem Hintergrund erhalten Sie einen gerahmten Screenshot samt Schatten, den Sie auf jede farbige Website-Sektion oder Folie legen können.
• Eckenradius: 0 bis 200 Pixel, Standard 24. Bei Browser formt er die äußeren Fensterecken. Bei Phone behält das Gehäuse einen Mindestradius von 30, damit es als Gerät erkennbar bleibt, und die Displayecken folgen mit etwa dem halben Wert.
• Schattenunschärfe: 0 bis 200, Standard 20. Niedrige Werte ergeben einen kurzen, klaren Schatten, hohe Werte einen breiten, weichen Schein. Bei 0 wirkt das Bild flach.
• Schattendeckkraft: 0 bis 1, Standard 0,35. Auf hellen Hintergründen reduzieren, wo ein dunkler Schatten schwer wirkt, oder auf 0 setzen, um ihn ganz zu entfernen.
• Format und Qualität: PNG ist verlustfrei und die richtige Wahl für Oberflächen mit scharfem Text. JPEG und AVIF nehmen einen Qualitätswert von 1 bis 100 (Standard 90) und liefern deutlich kleinere Dateien bei fotolastigen Screenshots. WebP wird hier verlustfrei geschrieben. JPEG kennt keine Transparenz, ein transparenter Hintergrund wird dort weiß.

Ausgabegröße und Auflösung

Der Screenshot wird nie skaliert. Der Rahmen entsteht um ihn herum in nativer Pixelgröße, danach kommt der Abstand auf allen Seiten hinzu. Ein Screenshot mit 1440x900 wird in der Browser-Vorlage zu einem Bild mit 1544x1048 (1440 plus 2 x 52 in der Breite, 900 plus 44 Pixel Leiste plus 2 x 52 in der Höhe). Das ist gut für die Schärfe auf Retina-Displays, große Aufnahmen ergeben aber große Dateien. Für ein leichteres Bild geben Sie das Ergebnis in den Bildkompressor oder schneiden den Screenshot vorher mit dem Tool zum Zuschneiden und Drehen auf den relevanten Bereich zu.

Anwendungsfälle

• Landing Pages und Produktseiten: Screenshots im Browserfenster auf einem Hintergrund in Markenfarbe, exportiert als PNG oder AVIF.
• Pitch Decks und Case Studies: einheitliche Rahmen auf jeder Folie, mit transparentem Hintergrund für jede Vorlage.
• Release Notes und Changelogs: den Screenshot eines neuen Features in Sekunden rahmen, ohne Figma oder Keynote zu öffnen.
• Social Media und App-Store-Entwürfe: Handy-Rahmen für mobile Screens auf LinkedIn oder im Newsletter.
• Dokumentation und READMEs: ein dezenter Simple-Rahmen hebt UI-Screenshots vom umgebenden Text ab.

Mehrere Screenshots auf einmal rahmen

Legen Sie einen ganzen Ordner Screenshots ab, und dieselbe Vorlage, Farben und Schatten gelten für alle. Jede Datei behält den Namen der Quelle mit dem Zusatz -mockup, und bei mehreren Bildern erhalten Sie alles in einem einzigen mockup-images.zip. So bleibt eine Serie einheitlich, was beim einzelnen Rahmen in einem Designprogramm mühsam ist.

Im Vergleich zu Designprogrammen

Figma, Sketch oder Keynote bieten volle Kontrolle: Gerätemodelle, Perspektive, mehrere Screens in einer Szene. Dafür brauchen sie mehr Zeit, eine Datei und eine Vorlage. Dieses Tool macht genau eine Sache, einen flachen Rahmen mit Schatten auf Hintergrund, in einem Schritt und ohne Konto. Für detaillierte Geräte-Renderings bleibt ein Designprogramm die bessere Wahl, für schnelle, einheitliche Rahmen bei alltäglichen Screenshots ist dieses Tool schneller.

Screenshots bleiben auf Ihrem Rechner

Screenshots zeigen oft mehr als beabsichtigt: Kundennamen im CRM, Umsätze im Dashboard, interne URLs, unveröffentlichte Funktionen, E-Mail-Adressen in einer Seitenleiste. Viele Online-Mockup-Generatoren laden das Bild zum Rendern hoch. Hier berechnet Rust-Code, der zu WebAssembly kompiliert ist, Rahmen, Schatten und Kodierung direkt im Browser-Tab, und keine Anfrage sendet den Screenshot irgendwohin. Personenbezogene Daten auf dem Bildschirm verlassen Ihr Gerät also nicht, was die DSGVO-Frage gar nicht erst aufkommen lässt. Prüfen können Sie das im Netzwerk-Tab der Entwicklertools.

Häufige Fragen

Kann ich ein Mockup mit transparentem Hintergrund erstellen?

Ja. Geben Sie transparent im Hintergrundfeld ein und exportieren Sie als PNG, WebP oder AVIF. Rahmen und Schatten behalten ihre Transparenz und passen auf jede Farbe.

Verschlechtert das Tool die Qualität meines Screenshots?

Nicht bei PNG oder WebP: Der Screenshot wird pixelgenau und ohne Skalierung eingesetzt, und beide Formate werden hier verlustfrei geschrieben. JPEG und AVIF komprimieren verlustbehaftet je nach Qualitätseinstellung.

Welches Gerät stellt der Handy-Rahmen dar?

Keines im Besonderen. Es ist ein generisches dunkles Smartphone mit abgerundeten Ecken und Notch, passend für iOS- wie Android-Screens.

Kann ich eine URL in der Browserleiste anzeigen?

Nein. Die Leiste zeigt nur die drei Fensterpunkte. Der Rahmen bleibt neutral, und Sie vermeiden es, eine Staging- oder interne URL preiszugeben.

Warum ist meine Mockup-Datei so groß?

Der Screenshot behält seine volle Auflösung, und PNG ist verlustfrei. Wählen Sie AVIF oder JPEG mit einer Qualität um 80, schneiden Sie den Screenshot vorher zu oder komprimieren Sie das Ergebnis anschließend.

Werden meine Screenshots hochgeladen?

Nein. Alles läuft lokal im Browser über WebAssembly. Nichts wird an einen Server gesendet oder dort gespeichert.