Device-Mockup-Generator
Screenshots in Browser-, Smartphone-, Tablet- oder Laptop-Mockups einsetzen und als PNG exportieren – lokal, ohne Upload.
Der Device-Mockup-Generator setzt Screenshots in Browser-, Laptop-, Smartphone- oder Tablet-Rahmen ein. Du lädst ein Bild, wählst Gerät, Rahmenfarbe, Hintergrund, Abstand und Schatten und exportierst das Ergebnis als PNG bis 4000 Pixel Breite, auch mit transparentem Hintergrund. Die Rahmen werden per Canvas gezeichnet, alles läuft lokal im Browser ohne Upload.
Screenshots im Gerät zeigen
Ein Mockup setzt ein Bild in den Rahmen eines Geräts. So wirken Präsentationen, Case Studies und Store-Bilder greifbarer. Der Generator zeichnet neutrale Rahmen für Browser, Laptop, Smartphone und Tablet und exportiert sie als PNG, auf Wunsch mit transparentem Hintergrund.
Die Geräte im Überblick
| Gerät | Typisches Seitenverhältnis des Bilds | Einsatz |
|---|---|---|
| Browser | 16:10, ab 1440 × 900 px | Websites, Landingpages, Web-Apps |
| Laptop | 16:10 | Dashboards, Software |
| Smartphone | 9:19,5, z. B. 1170 × 2532 px | Apps, mobile Seiten |
| Tablet | 3:4 oder 4:3 | Apps, Editorial-Layouts |
So gehst du vor
- Bild laden und Gerät wählen.
- Hintergrund und Abstand für den gewünschten Look einstellen.
- PNG laden. Den Hintergrund kannst du zuvor im Mesh-Gradient-Generator als Bild erzeugen. Große Screenshots verkleinerst du mit dem Bildformat-Konverter.
Beispiel
Für ein Portfolio setzt du einen Screenshot deiner Startseite in den Browser-Rahmen mit Verlaufs-Hintergrund im Format 16:9 und exportierst ihn mit 2000 Pixel Breite. Die Adresszeile zeigt deine Domain. Passende Größen für Social-Media-Bilder findest du im Platzhalterbild-Generator.
Häufige Fragen
Wozu dienen Device-Mockups?
Sie zeigen ein Design im Kontext eines Geräts. Das wirkt in Portfolios, Präsentationen, App-Store-Bildern und Social-Media-Posts professioneller als ein nackter Screenshot und gibt Betrachtenden ein Gefühl für Format und Größe.
Welche Bildgröße passt am besten?
Für Smartphones etwa 1170 × 2532 Pixel (Hochformat), für Desktop und Browser ab 1440 × 900 Pixel. Das Bild wird passend zugeschnitten oder eingepasst, sodass auch andere Größen funktionieren.
Was bedeutet „oben ausrichten“?
Bei langen Screenshots zeigt das Mockup den oberen Bereich, wie beim ersten Blick auf die Seite. Mit „Zentriert“ wird die Mitte gezeigt, mit „Einpassen“ das ganze Bild mit weißen Rändern.
Darf ich die Mockups kommerziell nutzen?
Die Rahmen sind einfache, selbst gezeichnete Formen ohne Marken oder geschützte Designs. Für deine Inhalte im Screenshot bist du selbst verantwortlich. Die Rahmen haben bewusst kein Logo und keinen Herstellernamen.
Werden meine Bilder hochgeladen?
Nein. Das Bild wird nur im Browser gelesen und gezeichnet. Es findet keine Übertragung an einen Server statt.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.