Geräte-Mockup
Device Mockup
Setzt einen Screenshot in einen Smartphone-, Tablet-, Laptop- oder Browser-Rahmen mit Hintergrund und Schatten.
Setzt einen Screenshot in einen Telefon-, Tablet-, Laptop- oder Browser-Rahmen und exportiert ein PNG in bis zu dreifacher Größe. Die Rahmen werden auf einem Canvas aus abgerundeten Rechtecken gezeichnet und sind keine Fotos irgendeines Produkts, hier ist also nichts ein Markenzeichen, und die Ausgabe bleibt in jeder Skalierung scharf. Der Screenshot verlässt den Tab nie.
Screenshot hier ablegen
PNG, JPEG oder WebP. Alles passiert in diesem Tab.
Vorschau
Die Rahmen sind Formen, keine Fotos
Smartphone, Tablet, Laptop und Browserfenster werden auf dem Canvas aus ein paar abgerundeten Rechtecken gezeichnet. Sie sind keine Fotos irgendeines Produkts und tragen keine Marke, Sie können sie also überall verwenden, und sie bleiben in jeder Exportgröße scharf. Die Bildschirmverhältnisse sind die heutiger Geräte — 19,5:9 beim Smartphone, 4:3 beim Tablet, 16:10 beim Laptop —, und wenn ein Screenshot ein anderes Verhältnis hat, schneidet „Ausfüllen“ die Mitte heraus und „Alles zeigen“ lässt Ränder stehen. Für die Aufnahme einer langen Seite ist meist „Oben ausrichten“ das Richtige.
Verkleinern Sie das exportierte PNG mit dem PNG-Kompressor, und bauen Sie eine Karte zum Teilen mit dem Social-Card-Generator.
So funktioniert es
Legen Sie den Screenshot ab
PNG, JPEG oder WebP. Die Statistikzeile darunter zeigt das Bildverhältnis gegen das Bildschirmverhältnis des Rahmens, und das ist die Zahl, die entscheidet, wie die nächste Wahl ausgeht.
Wählen Sie den Rahmen, dann, wie das Bild hineinpasst
Cover beschneidet die Mitte, um den Bildschirm zu füllen, contain zeigt das ganze Bild mit Letterboxing, und top-align ist die Wahl für eine lange Seitenaufnahme – sie behält den oberen Teil der Seite und lässt den Rest unten hinauslaufen, und das ist es, was ein Screenshot einer scrollenden Seite gewöhnlich zeigen soll.
Setzen Sie Rand und Hintergrund
Der Rand ist es, was die Aufnahme komponiert aussehen lässt statt beschnitten. Transparenter Hintergrund ist die Wahl, wenn das Bild auf eine farbige Folie oder eine Seite kommt, deren Hintergrund Sie nicht kontrollieren.
Exportieren Sie mit 2×, sofern Sie es nicht besser wissen
Die Zeile unter der Vorschau gibt die exakte Ausgabegröße für die gewählte Skalierung. 2× ist richtig für einen Retina-Bildschirm oder eine README; 3× ist für Druck oder eine große Folie, und die Datei wird groß.
Häufige Fragen
Ist das ein iPhone? Ein MacBook?
Nein. Es sind generische Formen in den Seitenverhältnissen, die moderne Geräte verwenden – 19.5:9 für ein Telefon, 4:3 für ein Tablet, 16:10 für einen Laptop. Es gibt kein Logo, kein Produktfoto und keinen markenrechtlich geschützten Umriss, und das ist Absicht: Ein Mockup mit einem echten Gerät darin kann gewöhnlich nicht ohne Erlaubnis im Marketing verwendet werden.
Mein Screenshot ist auf eine Weise beschnitten, die ich nicht wollte.
Die Statistikzeile zeigt Ihr Verhältnis und das des Rahmens. Weichen sie ab, muss cover etwas beschneiden. Wechseln Sie zu contain, um das ganze Bild mit Letterboxing zu sehen, oder zu top-align, wenn der wichtige Teil oben ist, oder machen Sie den Screenshot im Verhältnis des Rahmens neu.
Kann ich mehrere Bildschirme nebeneinander setzen?
Nicht hier – ein Bild, ein Rahmen. Eine Szene aus drei Geräten zu komponieren ist Layoutarbeit, und sie schlecht zu machen ist schlimmer, als sie nicht zu machen. Exportieren Sie jedes auf transparentem Hintergrund und ordnen Sie sie in dem an, was Sie für die Folie ohnehin verwenden.
Wird mein Screenshot hochgeladen?
Nein. Er wird in eine ImageBitmap dekodiert und in diesem Tab auf einen Canvas gezeichnet, und das PNG erzeugt der Canvas selbst. Nichts geht über das Netz, und das ist der Punkt bei einem Screenshot eines unveröffentlichten Produkts.
Eingabe aus
Platzhalterbild
Placeholder Image
Erzeugt ein einfarbiges oder mit Verlauf gefülltes Platzhalterbild in beliebiger Größe, mit eingezeichneten Abmessungen.
Screenshot beschriften
Screenshot Annotator
Zeichnet Pfeile, Rahmen, nummerierte Schritte und Unschärfeflächen auf einen Screenshot und exportiert ein flaches Bild.
Rahmen und Rand
Border & Padding
Fügt einen einfarbigen, verlaufenden oder abgerundeten Rahmen samt Rand um ein Bild hinzu oder füllt es auf ein Zielverhältnis auf.
Code-Screenshot
Code Screenshot
Rendert einen Codeausschnitt als Bild mit Syntaxhervorhebung, Fensterrahmen und wählbarem Theme.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Rahmen und Rand
Border & Padding
Fügt einen einfarbigen, verlaufenden oder abgerundeten Rahmen samt Rand um ein Bild hinzu oder füllt es auf ein Zielverhältnis auf.
Social-Card-Generator
Social Card Generator
Setzt ein 1200×630-Teilbild aus Titel, Untertitel, Markenzeile und optionalem Logo auf einer gewählten Vorlage zusammen und schreibt die passenden Meta-Tags dazu.
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
Screenshot beschriften
Screenshot Annotator
Zeichnet Pfeile, Rahmen, nummerierte Schritte und Unschärfeflächen auf einen Screenshot und exportiert ein flaches Bild.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Seitenverhältnis-Rechner
Aspect Ratio Calculator
Berechnet die fehlende Abmessung für ein Zielverhältnis und listet die Standardgrößen auf, die dazu passen.