polyshBrowserrahmen-Generator
Zeigen Sie einen Webseiten-Screenshot in einem realistischen Browserfenster.
- Läuft in Ihrem Browser
- Keine Uploads
- Kein Konto
Ihr Browser-Tool wird geladen…
Was Browserrahmen-Generator macht
Ein Website-Screenshot in einem Browserfenster zeigt auf einen Blick, dass es sich um eine Webseite handelt, und gibt ihm eine saubere Kante. Wählen Sie „Chrome“ für eine Tableiste mit Adressleiste, „Safari“ für eine schmale Symbolleiste mit zentriertem Adressfeld oder „Minimal“ für nur drei graue Fensterpunkte und ein kleines pillenförmiges Adressfeld.
„Darstellung“ wechselt zwischen heller und dunkler Browser-Oberfläche, passend zu Ihrem Screenshot. „Adresse“ unter „Weitere Optionen“ legt die URL in der Leiste fest, etwa die echte Domain Ihres Produkts. Der Rahmen liegt standardmäßig auf einem Sand-Verlauf mit Innenabstand, abgerundeten Ecken und Schatten. Desktop-Apps wirken im Mac-Fenster-Mockup besser.
Beispiel
Ihre Auswahl
Ein Screenshot mit 1440 × 900 px Browser: Safari, Darstellung: Hell
Download
screenshot-browser-mockup.png 1584 × 1096 px: eine 52 px hohe Safari-Symbolleiste über dem Screenshot, 72 px Innenabstand in Sand
Die Symbolleisten sind bei einem 1440 px breiten Bild 82 px (Chrome), 52 px (Safari) und 38 px (Minimal) hoch und wachsen bei breiteren Screenshots mit.
Anleitung: Browserrahmen-Generator
- Wählen Sie „Datei auswählen“ oder fügen Sie einen Screenshot der Webseite ein, ohne die eigene Symbolleiste des Browsers.
- Wählen Sie Browser, Darstellung und Hintergrund; geben Sie die URL unter „Adresse“ in „Weitere Optionen“ ein und bei Chrome den Tab-Titel.
- Klicken Sie auf „.png herunterladen“.
Gut zu wissen
- Der Tab-Titel unter „Weitere Optionen“ erscheint nur im Chrome-Stil. Safari und Minimal haben keine Tableiste.
- Lange URLs werden mit Auslassungspunkten gekürzt, damit sie in die Adressleiste passen.
- Schneiden Sie die echte Symbolleiste Ihres Browsers zuerst mit dem Tool Screenshot zuschneiden ab, sonst zeigt das Mockup zwei Symbolleisten.
Fragen zu Browserrahmen-Generator
Wie setze ich einen Screenshot in ein Browserfenster?
Nehmen Sie einen Screenshot nur des Seiteninhalts auf, laden Sie ihn hier und wählen Sie Chrome, Safari oder Minimal. Die Browser-Symbolleiste wird im passenden Maßstab darüber gezeichnet, und das ganze Fenster wird auf einen Hintergrund gesetzt.
Sollte ich ein Chrome- oder ein Safari-Mockup verwenden?
Richten Sie sich nach Ihrer Zielgruppe: Chrome für die meisten Web- und B2B-Produkte, Safari für Mac-orientierte oder Design-Zielgruppen. Minimal passt, wenn Sie den Look keiner der beiden Marken möchten und nur eine Andeutung eines Browsers brauchen.
Funktioniert das Mockup mit Screenshots im Dark Mode?
Ja. Stellen Sie „Darstellung“ auf „Dunkel“, damit die Symbolleiste dunkelgraue Töne verwendet, die zu einer dunklen Oberfläche passen. Eine helle Symbolleiste über einer dunklen Seite wirkt wie ein Fehler.