Mockup-Studio

Screenshot rein, fertiges Gerätebild raus — Browser, Notebook, Tablet oder Handy, mit Winkel, Schatten und eigenen Farben.

LocalKostenlosBilderDesign

Warum du den Screenshot selbst mitbringst: Ein Browser darf fremde Seiten aus Sicherheitsgründen nicht abfotografieren. Werkzeuge, die das anbieten, schicken die Adresse an einen Server, der die Seite dort in einem Browser öffnet. Wir machen das nicht — dafür verlässt hier auch nichts dein Gerät. Screenshot machst du mit Umschalt+Strg+S in Firefox oder Umschalt+Befehl+4 auf dem Mac.

Alles läuft in deinem Browser. Deine Daten verlassen dieses Gerät nicht.

Keine Uploads Die Verarbeitung passiert lokal im Browser. Nichts wird an einen Server geschickt.
Sofort einsatzbereit Kein Konto, keine E-Mail, keine Wartezeit. Seite öffnen und loslegen.
Ohne Limit Kein Wasserzeichen, keine Beschränkung auf X Durchläufe pro Tag.

So funktioniert es

  1. Screenshot machen — Umschalt+Strg+S in Firefox, Umschalt+Befehl+4 auf dem Mac.
  2. Bild ins Feld ziehen und einen Rahmen wählen.
  3. Unter „Szene" Hintergrund, Farben, Drehung und Schatten anpassen.
  4. Seitenverhältnis für den Einsatzzweck wählen und als PNG herunterladen.

Ein blanker Screenshot in einem Angebot, auf einer Landingpage oder in einem Social-Post wirkt unfertig. Derselbe Screenshot in einem Geräterahmen, auf einem passenden Hintergrund und mit etwas Schatten sieht nach Arbeit aus, die jemand ernst genommen hat. Genau diesen Schritt macht dieses Werkzeug — in ein paar Sekunden statt in Photoshop.

Was du einstellen kannst

Fünf Rahmen: Browserfenster mit Adresszeile und Fensterknöpfen, Notebook mit Unterteil, Monitor mit Standfuss, Tablet und Smartphone. Dazu die Möglichkeit, ganz ohne Rahmen zu arbeiten und nur die Ecken zu runden.

Drei Darstellungen: gefüllt für den normalen Einsatz, Glasrahmen für helle Hintergründe — und eine technische Zeichnung, die nur die Konturen zeigt. Die passt in Präsentationen, in denen das Gerät nicht vom Inhalt ablenken soll.

Die Szene: Verlauf, einfarbig, weicher Farbnebel, Raster oder transparent. Zwei frei wählbare Farben, Rand, Drehung, Neigung und Schattenstärke. Für Social Media gibt es die üblichen Seitenverhältnisse als Vorgabe, inklusive 1,91:1 für Vorschaubilder in sozialen Netzwerken.

Warum du den Screenshot selbst mitbringst

Ein Browser darf aus Sicherheitsgründen keine fremden Websites abfotografieren. Werkzeuge, die das trotzdem anbieten, schicken die Adresse an einen Server, der die Seite dort in einem echten Browser öffnet und abfotografiert. Das funktioniert, hat aber zwei Haken: Die Adresse verlässt dein Gerät, und geschützte Bereiche hinter einem Login lassen sich so gar nicht abbilden.

Hier läuft alles lokal. Der Screenshot wird nicht hochgeladen, das fertige Bild entsteht in deinem Browser. Damit kannst du auch Kundenprojekte, interne Werkzeuge und Seiten hinter einem Login abbilden, ohne dass jemand anderes sie zu sehen bekommt.

Häufige Fragen

Kann das Werkzeug den Screenshot selbst machen?

Nein, und das ist eine bewusste Entscheidung. Ein Browser darf fremde Seiten nicht auslesen; dafür bräuchte es einen Server, der die Seite in einem echten Browser öffnet. Dann würde die Adresse aber unser Gerät verlassen — und Seiten hinter einem Login wären ohnehin nicht abbildbar. Mit deinem eigenen Screenshot funktioniert beides.

Wie gross sollte mein Screenshot sein?

Mindestens so breit wie das fertige Gerät im Bild, besser doppelt so breit. Bei einer Ausgabe mit 1600 Pixeln und einem Rand von 12 Prozent ist das Gerät rund 1250 Pixel breit — ein Screenshot mit 1440 oder 1920 Pixeln Breite passt gut. Das Werkzeug weist dich darauf hin, wenn das Bild für die gewählte Grösse zu klein ist.

Was ist der Unterschied zwischen Drehung und Neigung?

Die Drehung kippt das Gerät in der Bildebene, wie ein schief aufgelegtes Blatt Papier. Die Neigung täuscht Tiefe vor, als würde man von der Seite auf den Bildschirm schauen. Beide lassen sich kombinieren; sparsam eingesetzt wirkt das lebendig, übertrieben wirkt es unruhig.

Welches Seitenverhältnis brauche ich wofür?

16:9 für Präsentationsfolien, 1:1 und 4:5 für Instagram-Beiträge, 9:16 für Stories und Reels, 1,91:1 für das Vorschaubild, das beim Teilen eines Links erscheint. „Automatisch" richtet sich nach dem gewählten Gerät und lässt oben und unten etwas Luft.

Bleibt der Hintergrund wirklich transparent?

Ja. Bei der Einstellung „Transparent" enthält das PNG einen echten Alphakanal — du kannst das Gerät also direkt über einen bestehenden Hintergrund legen. Im Vorschaufenster ist die Transparenz am Schachbrettmuster zu erkennen.

Ein Problem, das kein Tool löst?

Weblabs übernimmt Entwicklung, SEO und Shop-Optimierung — für alles, was über ein Werkzeug hinausgeht.

Zur Agentur