Screenshots: Außenabstand und Innenabstand richtig nutzen

Mit Padding entsteht Abstand zwischen einem Screenshot und dem Rand seines Hintergrunds. Inset fügt innerhalb der Karte des Screenshots Platz hinzu. Verwende Padding, wenn die gesamte Komposition beengt wirkt; verwende Inset, wenn Text oder Bedienelemente zu nah an den abgerundeten Ecken der Karte liegen.

Diese Beispiele verwenden denselben 800 × 400 Beispiel-Screenshot. Er enthält erfundenen Checklisten-Text, sodass du jede Einstellung ausprobieren kannst, ohne einen privaten Bildschirm hochzuladen.

Beginne mit Padding, dann füge Inset hinzu

Öffne den Screenshot Beautifier, lade das Beispiel hoch und wähle Stil zurücksetzen. Unter Rahmen belässt du Rahmenstil auf Nur Bild. Die Standardwerte sind Außenabstand 80, Innenabstand 0, Eckenradius 20 und Schatten 40.

Das ergibt ein 960 × 560 PNG: 800 + 80 + 80 in der Breite und 400 + 80 + 80 in der Höhe. Der Aurora-Hintergrund liegt außerhalb der Karte.

Setze nun Innenabstand auf 24. Der Screenshot behält seine Größe, aber seine weiße Karte wächst auf jeder Seite um 24. Der Export wird 1008 × 608. Text hat mehr Platz innerhalb der abgerundeten Kante, während der äußere Abstand bei 80 bleibt.

Lade die Version nur mit Padding und die Version mit Inset herunter, um sie in voller Größe zu vergleichen. Diese genauen Pixelwerte gelten für dieses Beispiel mit automatischer Größenanpassung; größere Quellen und feste Exportgrößen können die gesamte Komposition skalieren.

Inset an den Screenshot anpassen, nicht an den Hintergrund

Wenn der Innenabstand über null liegt, bietet Farbe des Innenabstands die Optionen Bildkanten anpassen oder Benutzerdefinierte Farbe. Die automatische Option tastet die Kanten des Screenshots ab und wählt eine dominante deckende Farbe. Unser Beispiel mit weißen Kanten ergibt #FFFFFF.

Das funktioniert gut bei einem Screenshot mit einfachem Rand. Ein Foto, ein Verlauf oder ein Bildschirm mit unterschiedlichen Farben an den Kanten kann eine Naht zeigen: Der Innenabstand ist eine einzige Farbe, kein neu generierter Bildinhalt. Wähle Benutzerdefinierte Farbe und passe Hex-Farbe an, wenn die automatische Anpassung falsch aussieht.

Der Tab Hintergrund steuert den äußeren Bereich unabhängig. Das Ändern dieses Verlaufs verändert nicht die Farben des Screenshots selbst.

Eine quadratische Leinwand schafft Platz; sie schneidet nicht zu

Unter Größe änderst du Seitenverhältnis von Auto · Bild anpassen auf 1:1 · Quadrat und lässt Exportgröße auf Auto · bis 4096 px. Mit dem 24-Pixel-Innenabstand ist das Ergebnis 1008 × 1008. Die Karte bleibt zentriert, mit mehr Hintergrund darüber und darunter.

Du kannst den quadratischen Export ansehen. Wenn der Screenshot selbst ein Quadrat füllen soll, schneide ihn zuerst mit dem Bildzuschneider zu. Ein langer Screenshot, der in ein kleines Quadrat gequetscht wird, kann zwar jede Zeile erhalten, aber den Text zu klein zum Lesen machen.

Exportgröße prüfen, bevor du deinen Stil speicherst

Lade das PNG herunter und betrachte es in der Größe, die dein Publikum sehen wird. Das Hineinzoomen in die Vorschau des Tools hilft dir, Kanten zu prüfen; es erhöht nicht die Exportauflösung. Auf Mobilgeräten öffnest du Anpassen, um zu den Einstellungen zu gelangen, und Vorschau, um das Ergebnis zu prüfen.

Browserfenster fügt eine dekorative Titelleiste hinzu. Ihr helles/dunkles Erscheinungsbild ändert nur diesen Rahmen, nicht deinen hochgeladenen Screenshot. Behalte Nur Bild bei, wenn dein Screenshot bereits eine Browserleiste enthält.

Wenn dir das Ergebnis gefällt, speichert Stil speichern den Stil in diesem Browser für den nächsten Screenshot. Er wird nicht auf ein anderes Gerät synchronisiert.

Am 12. Oktober 2026 haben wir alle drei PNGs aus dem Tool heruntergeladen und ihre Abmessungen mit der Layout-Funktion verglichen. Die Ergebnisdatei dokumentiert die Einstellungen und Datei-Hashes, sodass du den Vergleich nachvollziehen kannst.