Screenshot AnnotationScreenshot markieren
genau dort, wo Sie ihn aufgenommen haben
Screenshot markieren, ohne die Seite zu verlassen. Aufnehmen, dann Boxen, Kreise, Pfeile, Text, nummerierte Schritte und mehr direkt auf das Bild setzen — jede Form rastet am echten UI-Element ein, über dem Sie schweben, sodass Ihre Markierungen perfekt ausgerichtet sind statt handgezeichnet auszusehen.
Was bedeutet es, einen Screenshot zu „markieren"?
Einen Screenshot zu markieren bedeutet, Annotationen über dem Bild hinzuzufügen, damit ein Leser weiß, wohin er schauen und was er tun soll: eine Box um den zu klickenden Button, ein Pfeil, der auf den Fehler zeigt, eine Zahl auf jedem Schritt, Text, der die Lösung erklärt. Das ist der Unterschied zwischen einem rohen Screenshot und einem Screenshot, der wirklich kommuniziert.
Der mühsame Teil war nie die Idee — es war die Umsetzung. Sie nehmen auf, fügen in einen Editor ein, zeichnen ein Rechteck, stellen fest, dass es zwei Pixel neben dem Button liegt, machen es rückgängig, zeichnen neu. Jede Form, jeder Screenshot. Markierung, die an echten Seitenelementen einrastet, entfernt das vollständig — über dem Element schweben, klicken, und die Markierung wird an dessen exakte Grenzen angepasst.
Warum Screenshots an Ort und Stelle markieren?
Ein separater Editor bedeutet einen Kontextwechsel, eine zweite Datei und Formen, die von den Pixeln abdriften, auf die sie zeigen sollen. Markierung an Ort und Stelle hält Sie auf der Seite, behält die Quelle in voller Auflösung und hält jede Markierung ausgerichtet. Das ist besonders wichtig für:
- Bug-Reports — Ingenieure mit einer eingepassten Box und einer nummerierten Notiz auf das exakte fehlerhafte Element zeigen, statt einem wackeligen Oval.
- Tutorials & Doku — „hier klicken" ist eindeutig, wenn „hier" ein eingerastetes Rechteck um das echte Bedienelement ist.
- Kundensupport — Screenshot eines Kunden markieren, um die Einstellung zu zeigen, die er ändern muss.
- Review & Feedback — ein Design oder einen Entwurf mit Pfeilen und Text markieren, ohne eine andere App zu öffnen.
Zwölf Tools, alle an echten Elementen einrastend
Ich habe das Markierungs-Toolset selbst gebaut, daher hier genau, wie sich Markierungen verhalten, wenn Sie sie platzieren.
- Formen rasten an Elementen ein. Schweben Sie über einem Button, einer Karte, einem Bild oder Textblock und die Erweiterung liest dessen
getBoundingClientRect. Klicken — Sie erhalten ein Rechteck, einen Kreis, einen Pfeil oder eine Unterstreichung, das an genau diese Grenzen angepasst ist. Ein Klick, pixelperfekt. - Zwölf Tools in einer Toolbar. Rechteck, Ellipse, Linie, Pfeil, Textmarker, Text, nummerierte Schritte, Stempel, Mosaik (pixelieren / verwischen / schwarzer Balken) und Zoom-an-Ort-stelle. Mit einer einzigen Taste wechseln.
- Nummerierte Schritte nummerieren automatisch neu. Schritt 1, 2, 3 in Reihenfolge ablegen und sie bleiben beim Hinzufügen und Umordnen automatisch fortlaufend.
- Alles wird in voller Auflösung exportiert. Die Markierung wird auf der originalen Aufnahme gerendert (einschließlich High-DPI-Pixel), sodass Boxen und Text scharf bleiben, nicht verschwommen.
Zwei Fähigkeiten machen die Markierung stärker, wenn Sie sie brauchen:
- Hervorheben & schwärzen — ein Textmarker lenkt die Aufmerksamkeit auf Text, während das Mosaik-Tool Passwörter, API-Schlüssel und Gesichter verwischt oder pixeliert. Siehe Screenshot bereichsweise unscharf und Screenshot hervorheben.
- Ein Detail zoomen — einen winzigen Bereich an Ort und Stelle vergrößern, sodass ein kleines Icon oder Label lesbar wird, ohne den umgebenden Kontext zu verlieren. Siehe Screenshot-Zoom.
Die Markierung lebt auf der Seite in einem Overlay-Editor — kein neuer Tab, kein Upload. Wenn Sie den Editor schließen, liegt das fertige Bild bereits in Ihrer Zwischenablage.
So markieren Sie einen Screenshot
Von der Aufnahme bis zum vollständig annotierten Bild in unter einer Minute.
Aufnehmen
Alt+A (Win) oder ⌘⇧S (Mac) drücken, um den sichtbaren Bereich zu erfassen, Alt+C / ⌘⇧X, um einen Bereich zu ziehen, oder mit der rechten Maustaste auf die Seite klicken und Freier Bereich wählen. Der Editor öffnet sich auf der Seite.
Markierung hinzufügen
Über einem Element schweben und klicken, um eine eingepasste Form einzurasten, oder eine Tool-Taste drücken — R Rechteck, O Ellipse, A Pfeil, T Text, N Zahl, H Textmarker. Auch frei auf leerem Raum zeichnen.
Exportieren
Editor schließen — das annotierte Bild wird automatisch in Ihre Zwischenablage kopiert. Oder als PNG / JPG / PDF herunterladen.
Tipps für sauberere Screenshot-Markierung
- Klicken, nicht ziehen, für Präzision. Über einem Element schweben und es anklicken liefert dessen exakte Grenzen in einem Schritt — deutlich enger als eine handgezeichnete Box.
- Mehrstufige Abläufe nummerieren. Das Zahlen-Tool (
N) verwenden, damit Leser ① → ② → ③ in Reihenfolge folgen können; sie nummerieren automatisch neu. - Vor dem Teilen schwärzen. Jeder Screenshot mit Zugangsdaten, Tokens oder persönlichen Informationen sollte zuerst das Mosaik-Tool erhalten — verwischen oder pixelieren, niemals nur croppen.
- Eine Akzentfarbe wählen. Eine einzige kräftige Farbe für Boxen und Pfeile liest sich sauberer als ein Regenbogen. Das Tool merkt sich Ihre letzte Farbe und Dicke.
Screenshot markieren, beantwortet
Ist die Markierung kostenlos?
Ja. Alle zwölf Annotations-Tools sind kostenlos — kein kostenpflichtiger Tarif, kein Wasserzeichen, keine Anmeldung. Die gesamte Erweiterung ist kostenlos.
Bleiben Markierungen auf High-DPI-Bildschirmen scharf?
Ja. Die Markierung wird auf der voll aufgelösten Aufnahme gerendert, einschließlich High-DPI-Pixel, sodass Boxen, Pfeile und Text auf Retina- und 4-K-Displays scharf bleiben.
Kann ich Markierungen nach dem Platzieren bearbeiten?
Ja. Wählen Sie eine beliebige Markierung aus, um sie zu verschieben, in der Größe zu ändern, umzufärben oder zu löschen. Nummerierte Schritte nummerieren automatisch neu, wenn Sie sie umordnen.
Funktioniert es offline / sendet es Daten irgendwohin?
Es funktioniert vollständig offline und macht null Netzwerk-Anfragen. Screenshots verlassen nie Ihr Gerät — es gibt keinen Backend.
Geschrieben von Virgil
Ich bin der unabhängige Entwickler, der das Markierungs-Toolset auf dieser Seite gebaut hat — das DOM-Einrasten, die zwölf Tools, die automatisch neu nummerierenden Schritte. Ich habe es gebaut, weil jeder Screenshot-Editor, den ich verwendet hatte, mich Formen von Hand zeichnen ließ, die nie mit dem UI übereinstimmten.
Ich lese jede E-Mail und veröffentliche regelmäßig Updates; im Changelog steht, was sich in jeder Version geändert hat. Fragen zur Markierung? E-Mail an virgil1126@gmail.com.
Markieren Sie Ihren nächsten Screenshot an Ort und Stelle
Kostenlos, keine Anmeldung, kein Tracking. Zwölf Annotations-Tools, die an echten Elementen einrasten.
Zu Chrome hinzufügen — Kostenlos