Pixel-Lineal – Screenshots in px, pt, dp und rem ausmessen
Screenshot ablegen oder einfügen, Maßstab wählen (@1x, @2x, @3x) und Abstände, Größen und Eckenradien messen. Beim Hineinzoomen rasten Punkte an Pixelkanten ein, sodass ein 32-px-Abstand auch 32 ergibt. Kopier die Ergebnisse als Markdown-Tabelle für dein Ticket oder als border-radius-CSS.
Screenshot ablegen, einfügen oder aufnehmen, um ihn auszumessen.
Oder mit Strg+V einfügen. Bilder bleiben in deinem Browser – nichts wird hochgeladen.
Von @2x- und @3x-Screenshots zu pt, dp und rem
Ein Screenshot von einem Retina-Mac oder einem iPhone hat zwei oder drei Bildpixel für jeden Punkt, den der Designer gemeint hat. Misst du ihn roh aus, ist jede Zahl doppelt oder dreifach so groß. Sag dem Pixel-Lineal den Bildmaßstab – @1x, @1.5x, @2x, @3x oder @4x –, und jeder Wert erscheint in logischen Einheiten: CSS-px fürs Web, pt für iOS, dp für Android (dieselbe Zahl, nur so beschriftet, wie deine Plattform sie nennt), mit den rohen Bild-px in Klammern. Stellst du auf rem um, wird der Wert durch die Basis-Schriftgröße geteilt – standardmäßig 16, anpassbar. Bildschirmaufnahmen, die du mit diesem Tool machst, starten mit dem Pixelverhältnis deines Displays; eine Aufnahme eines @2x-Bildschirms ist also schon auf @2x eingestellt.
Abstände, Größen und Einrasten an Pixelkanten
Designer brauchen meist Abstände: den Innenabstand einer Karte, den Raum zwischen zwei Buttons, die Höhe einer Zeile. Jede Strecke zeigt ihre Länge zusammen mit Δx, Δy und ihrem Winkel – so bekommst du auch bei einem leicht schrägen Klick den sauberen waagrechten Abstand. Beim Hineinzoomen rasten Punkte an Pixelgrenzen ein, nicht an Pixelmitten, sodass ein 24-px-Abstand 24 ergibt und nicht 23,6 – halt Alt gedrückt, um frei zu setzen. Ab 8-fachem Zoom erscheint ein Pixelraster, und die Lupe zeigt das Pixel unter dem Cursor mit seiner Hex-Farbe, damit du einen 1-px-Rahmen von Kantenglättung unterscheiden kannst. Mit Mausrad oder zwei Fingern zoomst du an der Zeigerposition, durch Ziehen verschiebst du die Ansicht; die Minikarte und „Zurück“ bringen dich wieder zum Ausgangspunkt.
Eckenradius als CSS-border-radius
Abgerundete Ecken sind in einem Entwurf am schwersten nach Augenmaß zu schätzen. Nimm das Bogen-Maß: Klick dort, wo die gerade Kante sich zu biegen beginnt, dann auf einen Punkt der Rundung und dort, wo sie endet. Das Pixel-Lineal legt den Kreis durch diese Punkte und liefert den Radius in deiner Einheit – plus eine fertige border-radius-Zeile zum Kopieren in dein CSS. Das Kreis-Maß macht dasselbe für runde Avatare, Badges und Icons, und das Kurven-Maß folgt einer Reihe angeklickter Punkte – für die Länge einer Wellenlinie oder eines Strichs.
Ab ins Ticket – und weiter zu den Farben desselben Screenshots
Benenne deine Maße („Karten-Innenabstand“, „Button-Abstand“), gib jeder Linie ihre eigene Farbe und gib sie so weiter, wie dein Team arbeitet: „Markdown kopieren“ fügt eine Tabelle direkt in Jira, GitHub oder Linear ein, „Tabelle kopieren“ in eine Tabellenkalkulation, der PNG-Export zeichnet jede Linie mit Name und Wert ein wie eine Redline-Spezifikation, und die Projektdatei (.json) öffnet die ganze Sitzung später wieder. Der Screenshot verlässt nie deinen Browser. Du brauchst auch die Farben? Der Farbwähler öffnet mit einem Klick genau dasselbe Bild, und deine gewählten Farben sind noch da, wenn du zurückkommst. Du misst statt eines Bildschirms das Foto eines echten Raums? Dann nimm Foto ausmessen – mit echten Einheiten und Perspektivkorrektur.
Häufige Fragen
Wie messe ich einen @2x- oder @3x-Screenshot in pt oder dp?
Stell den Bildmaßstab auf @2x oder @3x (iPhone-Screenshots sind meist @3x, Screenshots vom Retina-Mac @2x) und wähl pt oder dp als Einheit. Jeder Wert wird dann durch den Maßstab geteilt: Ein 96-px-Abstand in einem @3x-Screenshot ergibt 32 pt, die Bildpixel stehen in Klammern daneben.
Was ist hier der Unterschied zwischen px, pt, dp und rem?
px sind die eigenen Pixel des Bildes. CSS-px, pt (iOS) und dp (Android) sind dieselbe logische Einheit – Bildpixel geteilt durch den Bildmaßstab –, nur so beschriftet, wie die jeweilige Plattform sie nennt. rem ist CSS-px geteilt durch die Basis-Schriftgröße, standardmäßig 16 und anpassbar.
Wie bekomme ich einen CSS-border-radius aus einem Screenshot?
Zoom auf die Ecke und nimm das Bogen-Maß: Klick dort, wo die Kante sich zu runden beginnt, dann auf einen Punkt der Rundung und dort, wo sie endet. Der Radius erscheint in deiner Einheit, mit einem border-radius-Wert zum Kopieren. Je stärker der Zoom, desto genauer der Radius.
Warum rastet mein Maß auf ganze Pixel ein?
Wenn du hineinzoomst, rasten Punkte an Pixelkanten ein, damit ein 24-px-Abstand genau 24 ergibt statt 23,6. Halt beim Setzen oder Ziehen eines Punkts Alt gedrückt, um das Einrasten für diesen Punkt abzuschalten.
Wie ziehe ich eine exakt waagrechte oder senkrechte Linie?
Halt beim Setzen oder Ziehen eines Punkts die Umschalttaste gedrückt: Die Linie rastet waagrecht, senkrecht oder im 45°-Winkel ein, und eine kleine Anzeige nennt ihren Winkel. Hineingezoomt landet das Ende trotzdem auf einer Pixelgrenze, die Länge bleibt also eine ganze Zahl. Für viele Linien hintereinander schalte „Winkel einrasten“ ein (die Winkel-Schaltfläche oder S) – 45°- oder 15°-Schritte, ohne die Umschalttaste zu halten; die Umschalttaste gibt den Winkel dann frei.
Kann ich Farben aus demselben Screenshot aufnehmen?
Ja. „Farben in diesem Bild aufnehmen“ öffnet denselben Screenshot im Farbwähler, ohne ihn erneut hochzuladen oder abzulegen, und „Dieses Bild ausmessen“ bringt dich zurück – deine Maße und deine gewählten Farben bleiben, wo sie waren.
Kann ich die Maße in Jira oder GitHub kopieren?
Ja. „Markdown kopieren“ legt eine Tabelle mit Namen, Werten und Einheiten in die Zwischenablage, fertig für ein Ticket oder einen Pull-Request. Du kannst auch ein beschriftetes PNG exportieren, eine CSV, reinen Text oder die JSON-Projektdatei, die die Sitzung später wieder öffnet.
Welche Tastenkürzel gibt es?
V Ansicht · D Strecke · C Kreis · A Bogen · L Kurve · M neue Messung (der zuletzt gewählten Art) · R Lineal · K Referenz · H saubere Ansicht · G Lupe ein/aus · S Winkel einrasten (aus / 45° / 15°) · Umschalt beim Setzen oder Ziehen eines Punkts: 45°-Schritte · F einpassen · 1 Originalpixel · B zurück · Pfeiltasten verschieben den gewählten Punkt um 1 px (Umschalt 10, Alt 0,1) · Tab nächster Punkt · Entf löscht die Auswahl · Esc bricht ab · Strg+Z rückgängig / Strg+Umschalt+Z wiederholen.
Wird mein Screenshot hochgeladen?
Nein. Der Screenshot wird vollständig in deinem Browser gelesen und ausgemessen und verlässt nie dein Gerät. Er wird im eigenen Speicher deines Browsers aufbewahrt, damit du später weitermachen kannst – schalte „Bilder auf diesem Gerät behalten“ aus oder lösch ihn unter „Zuletzt verwendet“, wann immer du willst.