Screenshots im Browser erstellen

Des öfteren kommt es vor, dass man einen Screenshot aus dem Browser benötigt. Sei es das komplette Fenster, die aktuelle Ansicht oder gar ein einzelnes Element. Wichtig kann dies zum Zeigen von Daten sein, und auch für Anleitungen/Hilfestellungen mit beschrifteten Bildern. Dabei möchte man nicht immer Arbeit in Nachbearbeitungen stecken sondern „mal eben schnell“ es erledigen und die gesammelten Bilder weiterverwenden.

Um einen Screenshot in einem Browser zu erstellen gibt es mehrere Möglichkeiten Ich zähle hier die auf, welche ich regelmäßig nutze und gebe Beispiele, für was diese angebracht sind.

Snipping Tool

Seit Windows Vista hat Microsoft das Snipping Tool mitgeliefert. Das Programm ermöglicht es schnell Screenshots zu erstellen und bietet hierfür einige Einstellungen.

  • Neu: Erstellt einen neuen Screenshot mit dem vorherh gewählten Modus
  • Modus: Verschiedene Möglichkeiten einen Screenshot zu aufzunehmen
    • Freies Ausschneiden: Ermöglicht das Ausschneiden einer Freihand-Form
    • Rechteckiges Ausschneiden: Aufnahme eines Bereiches der mit dem Cursor aufgezogen wird
    • Fenster ausschneiden: Fenster auswählen um dies komplett aufzunehmen (inkl. Titelleiste und Ränder)
    • Vollbild ausschneiden: Aufnahme des gesamten Bereiches, geht auch über mehrere Monitore
  • Verzögerung: Mit der Verzögerung können zum Beispiel noch Navigationsleisten angeklickt werden um diese einfacher ausgeklappt anzuzeigen; die Verzögerung geht von 0-5 Sekunden
  • Abbrechen: Bricht die aktuelle Aufnahme ab
  • Optionen: kleinere Einstellungen für das Programm

Nach der Aufnahme eines Ausschnittes, kann man diesen auch noch weiter bearbeiten (Textmarker hervorheben; Stift kennzeichnen; Radierer rauslöschen). Zusätzlich besteht die Möglichkeit, die Aufnahme direkt per eMail zu versenden (Eingebetet oder Anlage).

Diese Methode der Screenshots verwende ich meist um ein komplettes Browserfenster aufzunehmen (inkl. Adressleiste) um gezielt einen bestimmten Inhalt auf einer bestimmten Seite zu Zeigen, auch für Anleitungen im Softwarebereich eignet sich die Fensteraufnahme. Rechteckiges Ausschneiden ist praktisch um bestimmte Elemente zu zeigen für eventuelle  Fehldarstellungen (wenn das gesamte Fenster nicht benötigt wird).

Beim Programm vermisse ich allerdings ein nachträgliches ausschneiden, sowie einfache Formen um auf Bestimmtes besser aufmerksam zu machen. Auch Tastenkombinationen um „on the fly“ etwas aufzunehmen fehlen hier; Tastenkombinationen sind nur möglich, wenn man sich direkt im Snipping Tool befindet.

Awesome Screenshot (Chrome)

Für Chrome gibt es eine Erweiterung um direkt auf der Webseite Screenshots zu erstellen: Awesome Screenshotvon diigo . Die englische Erweiterung gibt es in einer kostenfreien Variante mit den nötigsten. Auch ein Upgrade ist möglich, dies wurde allerdings von mir nicht getestet, da ich für mich persönlich keinen Mehrwert sehe. Folgende Möglichkeiten werden einem geboten (englisch):

  • Capture visible part of page: Erzeugt einen Screenshot von dem gerade angezeigten Bereich im Browser
    • Delayed capture: Verzögerter Screenshot um zum Beispiel Menüpunkte vorher auszuklappen (3 Sekunden; unter Options auf 5 Sekunden änderbar)
  • Capture selectet area:  Erzeugt einen Screenshot von einem ausgewähltem Bereich
  • Capture entire page: Erzeugt einen Screenshot von einer kompletten Seite (Anmerkung: Hier gibt es Probleme bei Webseiten, welche horizontal scrollen)
  • Select a local Image: Öffnet ein lokal gespeichertes Bild
  • Capture desktop: Erzeugt einen Screenshot vom Desktop; Zur Auswahl stehen einzelne Monitore und auch Anwendungsfenster
  • Record screen: Aufnahme über 30 Sekunden; Tab oder Desktop möglich (mit Upgrade mehr)
  • My recordings: Auflistung von erstellten Aufnahmen mit Teilenfuktion und Download
  • Options: Einstellungen der Erweiterung. Bildformat (*.png; *.jpg), Shortcodees, Delay capture (3 oder 5 Sekunden)

Nach dem erstellen des Screenshots hat man noch die Möglichkeit diesen zu Bearbeiten. Zur Auswahl stehen Zuschneiden, Malen, Formen (Rechteck/Oval Umrandung), Pfeile, Text (diverse Schriftarten), Verwischen, Hervorheben. Zusätzlich können alle Elemente nachträglich verschoben werden. Wenn man die Bearbeitung abgeschlossen kann diese lokal gespeichert, in die Zwischenablage kopiert oder ausgedruckt werden.

Diese Erweiterung ist optimal um Webseiten als Screenshot festzuhalten, in Verbindung mit den DevTools von Chrome, kann an auch für verschiedene Geräte/Auflösungen den Inhalt festhalten. Sehr zu empfehlen, wenn man seinen Internetauftritt anpassen möchte aber nicht gerade das passende Gerät zur Kontrolle vor sich hat. Nachteilig finde ich hier nur die „Fragwürdigkeit“ der Erweiterung. Auf der offiziellen Seite findet man keinen Hinweis zum Hersteller/Entwickler und auf der Seite vom Hersteller/Entwickler, keinen Hinweis zum Programm.

Screenshot über Browserfunktion

Was wenige wissen ist, dass man direkt über den Browser auch Screenshots von einer Seite machen kann. Es ist sogar möglich, einzelne Elemente damit aufzunehmen.

Chrome

Um einen Screenshot über die DevTools zu erstellen, machte man folgendes:

  1. DevTools öffnen: STRG+UMSCHALT+I / Rechtsklick auf das Element und im Menü „Untersuchen“ auswählen
  2. Das gewünschte HTML-Element auswählen
  3. Command Menu öffnen: STRG+UMSCHALT+P
  4. „Screenshot“ in die Kommando-Leiste eingeben (ohne Anführungszeichen).
  5. Screenshot-Art auswählen:
    1. Capture full size screenshot: Screenshot von der kompletten Seite
    2. Capture node screenshot: Screenshot vom HTML-Element (inklusive Kind-Elemente)
    3. Capture screenshot: Screenshot vom aktuellen Sichtbereich
  6. Dateiname und Speicherort auswählen
Umständlich aber funktioniert: Screenshot in den DevTools

Diese Methode ist zwar recht umständlich, jedoch kann hier auch gezielt ein Element für die Aufnahme ausgewählt werden. Auch erwähnen muss man, dass man hier keine Vorschau vom Screenshot erhält und diesen manuell öffnen muss. Gebrauchen kann man das recht gut um präzise bestimmte Elemente aufzunehmen, ich verwende es hin und wieder dafür, wenn ich von einem Kommentar/Tweet ein Bild benötige, somit habe ich die richtige Breite und mehrere Bilder hintereinander „springen“ nicht. Auch die Nachbearbeitung fällt hier meist weg.

Firefox

Um ein Bildschirmfoto der gesamten Seite in Firefox zu erstellen, muss man vorab eine kleine Einstellung tätigen.

  1. Entwicklerwerkzeuge öffnen: STRG+UMSCHALT+I / Rechtsklick auf das Element und im Menü „Element untersuchen (Q)“ auswählen
  2. Die Einstellungen öffnen: F1 / oeben rechts auf die 3 Punkte und dann auf Einstellungen klicken
  3. In der Sektion „Verfügbare Schaltflächen-Symbole“ einen Haken in „Bildschirmfoto der gesamten Seite aufnehmen“ machen; es sollte nun ein neues Icon in Form einer Kamera in Entwicklerwerkzeuge vorhanden sein.
Bildschirmfoto auf Knopfdruck: mit der Kamera lässt sich einfach die komplette Seite festhalten

nach der Einstellung genügt nur noch ein Klick auf das Kamera-Symbol und ein Bildschirmfoto wird von der gesamten Seite angefertigt und im Downloadpfad gespeichert.

Wie sieht es mit Bildschirmfotos von einzelnen Elementen aus:

  1. Entwicklerwerkzeuge öffnen: STRG+UMSCHALT+I / Rechtsklick auf das Element und im Menü „Element untersuchen (Q)“ auswählen
  2. Das gewünschte HTML-Element auswählen
  3. Rechtsklick auf das Element und „Bildschirmfoto von Knoten aufnehmen“ auswählen.
Umständlich aber funktioniert: in den Entwicklerwerkzeugen von Firefox

Das Bildschirmfoto wird dann vom Element angefertigt und im Downloadpfad gespeichert.

Diese Methode ist wesentlich einfacher als bei Chrome, doch es geht noch eine Spur besser. Aktuell gibt es bei Firefox eine Beta-Funktion die im Kontextmenü vorhanden ist. Passenderweise trägt diese den Namen „Bildschirmfoto aufnehmen“. Beim ersten Start erhält man ein paar Informationen diesbezüglich und dann kann es auch schon losgehen.

  1. Rechtsklick auf der Webseite
  2. „Bildschirmfoto aufnehmen“ auswhälen
  3. Den Beschreibungen auf dem Bildschirm folgen
Schnell und solide: Beta-Tool von Firefox weiss zu überzeugen!

Das Bildschirmfoto wird dann vom angefertigt und im Downloadpfad gespeichert.

Hier ist auch die Möglichkeit vorhanden, die gesamte Seite oder auch nur den sichtbaren Bereich auszuwählen. Auch ein Aufziehen für ein Bildschirmfoto ist möglich, oder durch klicken ein einzelnes Element. Die Bildschirmfotos werden dann mit einem Klick auf „Speichern“ in der „Online-Bibliothek“ gespeichert und können von dort aus bearbeitet, geteilt und gelöscht werden. Jedes Foto hat ein Ablaufdatum (14 Tage) und ist danach automatisch gelöscht, dieses kann man auch nachträglich anpassen.

Dies ist meiner Meinung nach die einfachste Variante und ich habe diese auch nur entdeckt, weil ich diesen Artikel geschrieben habe. Für Chrome scheint es diese Funktion (noch) nicht zu geben, aber vielleicht wird hier auch noch nachgerüstet

Fazit

Es gibt viele Möglichkeiten das Browserfenster oder nur Ausschnitte aufzunehmen. Einige sind komfortabler als andere und manche sind für spezielle Anwendungsfälle besser geeignet. Mein persönlicher Favorit bleibt hier Snipping Tool und im Chrome die Möglichkeit über die DevTools. Ein wenig neidisch bin ich bei den Recherchen auf den Firefox geworden. So eine Funktion ist optimal und bietet das wichtigste, was man benötigt. Ich hoffe, dass Chrome hier nachrückt.

Quellen/Links

Snipping Tools

Awesome Screenshots

Chrome

Firefox

 


Noch kein Kommentar zu “Screenshots im Browser erstellen”


Kommentar hinterlassen

Diese HTML-TAGS stehen dir zur Verfügung:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>