Screenshots aufnehmen und verbessern

This page is a translated version of the page Taking Screenshots – How To Enhance and the translation is 100% complete.

So kann man Screenshots anfertigen

Ein Screenshot kann in aktuellen Betriebssystemen sehr einfach mit den systemeigenen Werkzeugen erstellt werden. In den meisten Fällen genügt es, die „PrintScreen“-Taste auf der Tastatur zu drücken (falls vorhanden), um den gesamten Bildschirm zu speichern. Mit zusätzlichen Tasten wie Alt oder Strg können auch Teilbereiche definiert werden.

Um qualitativ gute Bilder zu erhalten, ist eine gezielte Nachbearbeitung erforderlich. Die Beispielbilder in diesem Tutorial wurden mit GIMP Version 2.10.24, einem Open-Source-Bildbearbeitungsprogramm, erstellt.

Fünf einfache Schritte, um qualitativ hochwertige Screenshots zu erstellen

Die Wahl, welches Hilfsmittel für die folgenden Schritte verwendet wird, bleibt vor allem dem JDoc-Autor überlassen. Es sollte darauf geachtet werden, dass die Anwendung über die unten beschriebenen Funktionen/Eigenschaften verfügt.

Wichtig ist dabei nur, dass die hier beschriebenen Verarbeitungsschritte in der beschriebenen Reihenfolge durchlaufen werden.

Bild aufnehmen/laden
Bild zuschneiden (falls erforderlich)
Bild skalieren (falls nötig)
Filter anwenden: Unscharf maskieren (unbedingt erforderlich)
Bild als PNG speichern (empfohlen)

Screenshot aufnehmen

Für Windows und MacOS gibt es zusätzlich zu den Systemtools eine Menge zusätzlicher Tools, die versprechen, das Erstellen von Screenshots bequemer zu machen, als es mit den Systemtools möglich ist. Die Qualität der Screenshot-Rohdaten ist mit diesen Tools jedoch nicht besser als mit denen der Systemtools. Die Bedienung der System-Tools wird auf den Seiten für Windows und MacOS erklärt. Für Linux gibt es zahlreiche kostenlose Tools, die Screenshots aufnehmen können. Passend zur Distribution findet man mit Hilfe einer Suchmaschine und den Begriffen „screen capture tool linux“, ein entsprechendes Tool.

Das ausgewählte Tool sollte in der Lage sein, einen beliebigen Teil des Bildschirms zu erfassen und über eine Bildschirmlupe für eine präzise Wahl des Ausschnitts verfügen. Eine Anwendung, die den Screenshot in die Zwischenablage übertragen oder im PNG-Format speichern kann, ist ebenfalls vorzuziehen. Das weit verbreitete Bildformat JPG oder JPEG ist dafür weniger geeignet, da dessen Datenkompression nicht verlustfrei ist.

In der Joomla!-Dokumentation (und den JHelp-Seiten) sind vier Bildbreiten üblich.

800px für das Übersichtsbild oben auf der Seite
600px für größere Ausschnitte (z. B. Inhalt von Registerkarten)
400px für allgemeine Teilbereiche
265px für kleinere Teilbereiche oder Details

Es ist jedoch keine gute Idee, den Screenshot nach dem Laden des Bildes exakt auf die benötigte Seitenbreite zu reduzieren. Die Erfahrung hat gezeigt, dass eine 25 % größere Bildbreite empfehlenswert ist (800px → 1000px). Kleinere Abweichungen in der Breite sind unwesentlich. Zu große Dateien bringen allerdings keine bessere Qualität, sie fressen nur Speicherplatz.

Es ist darauf zu achten, dass der erstellte Screenshot (nach dem Zuschneiden) mindestens eine der oben genannten gewünschten Bildbreiten (+25 %) aufweist.

Warnung: Es ist unbedingt zu vermeiden, einen zu kleinen Screenshot mit der Skalierungsfunktion zu vergrößern. Dies führt zu einem Qualitätsverlust, der nicht behoben werden kann. Die Dokumentation von Adobe Photoshop sagt dazu lapidar:

Durch Neuberechnen und Anwenden des Unscharf-maskieren-Filters erzielen Sie beim Erstellen eines kleineren Bildes optimale Ergebnisse. Zum Erstellen eines größeren Bildes scannen Sie das Bild mit höherer Auflösung neu ein.

Wenn der genaue Bildbereich bereits bei der Erstellung des Screenshots festgelegt wurde, kann der nächste Schritt übersprungen werden.

Das Bild zuschneiden

Wenn das aufgenommene Bild größer als nötig ist, sollte es in einem Bildbearbeitungsprogramm beschnitten werden.

Tipp: Wenn die erstellten Screenshots in der Zwischenablage temporär gespeichert werden und die weitere Bearbeitung mit Gimp erfolgen soll, hilft der folgende Shortcut "Umschalt+Strg+V" (bzw. "Cmd+V" bei macOS), um die Daten sofort in Gimp zu importieren.

Verwenden des Zuschneide-Werkzeugs

Wenn der Screenshot noch unnötige Randbereiche enthält, sollte das Bild zunächst mit der Zuschneide-Funktion auf den gewünschten Bildausschnitt beschnitten werden. Bei der Wahl des endgültigen Ausschnitts ist es ungünstig, wenn Randbereiche eine weiße Fläche sein sollten. Dann kann der Betrachter die Kanten des Bildes vor dem weißen Hintergrund der Seite nicht sehen. In der professionellen Bildbearbeitung vermeiden wir eine solche Situation gerne und legen entweder einen leichten Schatten unter das Bild oder geben dem Bildbereich einen minimalen Farbton.

Um das Zuschneiden-Tool zu öffnen, mit dem Mauszeiger auf das entsprechende Symbol klicken.

Den Mauszeiger auf eine Ecke oder auf eine Seitenlinie bewegen. Durch Drücken und Halten der linken Maustaste kann der Auswahlbereich verändert werden. Das Gimp-Online-Handbuch enthält eine ausführliche Beschreibung, wie diese Option benutzt wird.

Tipp: Wenn die Bildschirmansicht vergrößert wird (hier 800%), kann die Auswahl pixelgenau getroffen werden.

Das Bild skalieren

Dieser Schritt ist nur notwendig, wenn der Screenshot deutlich zu groß ist (d. h. mehr als 25-30 % über der nominell erforderlichen Breite).

Ein kleines Beispiel soll den Sinn verdeutlichen:
Angenommen wir benötigen für unsere Seite eine Abbildung, die 800px breit und 1000px hoch ist. Die unkomprimierte Farb-Datei (3 Kanäle RGB, je 8-bit) ist ca. 2,29 MB groß. Benutzen wir aus Qualitätsgründen die etwas größere Datei (1000px x 1250px) erhöht sich die Dateigröße schon auf 3,58 MB. Erstellen wir aber einen Screenshot in doppelter Breite und Höhe (1600px x 2000px), dann wächst die Dateigröße auf unglaubliche 9,16 MB. Selbst in höchster Kompressionsstufe wird diese Datei im Web merklich langsamer angezeigt werden, ohne dass wir eine bessere Qualität erkennen können.

Verwenden der Option: Bild skalieren

Um die Option „Bild skalieren“ zu öffnen, im Menü auf Bild → Bild skalieren... klicken. Nicht das Skalierungs-Symbol in der Toolbox benutzen.

Der Dialog "Bild skalieren" im rechten Bild ermöglicht die Größenänderung eines Bildes. Die neue Breite wird im Feld "Breite" eingestellt. Solange das Kettensymbol nicht deaktiviert ist, wird automatisch die passende Höhe berechnet. Die Einstellung für die Qualität sollte unverändert auf „kubisch“ beibehalten werden. Das Gimp-Online-Handbuch enthält eine ausführliche Beschreibung, wie die Option verwendet werden kann.

Anwenden des Filters: Unscharf maskieren

Dies ist der entscheidende Schritt. Er erfordert eine sorgfältige Anpassung, die je nach Motiv, Monitor, Betriebssystem und Browser leicht variieren kann. Mit Hilfe der Beispielbilder unten kann aber schnell die optimale Einstellung für das eigene System gefunden werden.

Wie darauf zugreifen

Auf Filter → Verbessern → Schärfen (Unscharf maskieren) klicken, um den Einstelldialog für den Filter zu öffnen.

Es werden drei Parameter eingestellt, von denen, nach der Grundkonfiguration, eigentlich nur einer variiert werden sollte. Es ist jedoch leicht möglich, die Filterwirkung zu übersteuern und dann die Qualität zu ruinieren. Der Schieberegler Schwellwert (Threshold) sollte nur in besonderen Fällen einen höheren Wert als „0“ haben. Der Regler Radius muss sehr feinfühlig bedient werden, und Menge (Amount) ist in einer Mittelstellung oft am richtigen Platz.

Das Bild oben zeigt die optimalen Einstellungen (mit Gimp 2.10.24) auf diesem System für diesen Screenshot. In einer anderen Umgebung und bei anderen Screenshots werden die optimalen Werte leicht abweichen. Das Gimp Online-Handbuch enthält eine ausführliche Beschreibung, wie der Filter eingerichtet wird.

Tipp: Ist der gelb markierte Bereich aufgefallen? Mit einem Klick auf die +-Schaltfläche (rechte Seite) kann die aktuelle Einstellung mit einem individuellen Namen gespeichert werden.

Tipp: Ein Bild lässt sich immer am besten in der 100 %-Ansicht analysieren (siehe Statusleiste in der oberen Abbildung am unteren Bildrand).

Hinweis: Andere Bildbearbeitungsprogramme verwenden teilweise sehr unterschiedliche Namen für die Schieberegler. Auch die Werte sind durchaus abweichend definiert. Welcher Schieberegler zu welchem Ergebnis führt – da hilft nur ein Blick in das entsprechende Handbuch.

Die folgenden Bildbeispiele sollen die Wirkung einer falschen Einstellung in Bezug auf die Bildwiedergabe demonstrieren. Anhand der farblich gekennzeichneten Teile der Bilder können die Wirkung der verschiedenen Filtereinstellungen erkannt werden. Die Beurteilung wird erleichtert, wenn die Bilder in ihrer Originalgröße betrachtet werden (durch Anklicken der Abbildung).

Links: Die unbearbeitete Bilddatei
Rechts: Die oben gezeigten Einstellungen wurden angewandt.

Links: Der Schieberegler „Schwellwert“ (Threshold) ist zu stark erhöht – führt dazu, dass helle Teile des Bildes (grüne Markierung) vom Filter nicht bearbeitet werden.
Mitte: Der Schieberegler „Menge“ (Amount) ist zu stark eingestellt – dadurch entsteht ein deutlich sichtbarer Umriss um die Schrift (rote und magentafarbene Markierung).
Rechts: Der Schieberegler „Radius“ ist zu hoch eingestellt - dadurch entsteht ein sogenannter Black Eye-Effekt (Magenta-Markierung).

Das Bild sichern

Es klingt selbstverständlich, wird aber oft ignoriert:

Eine bessere Bildqualität ist oft nur mit größeren Dateien möglich.
Große Dateien erfordern mehr Bandbreite zum schnellen Laden und verbrauchen wertvollen Speicherplatz.

Daher ist es wichtig, den bestmöglichen Kompromiss zwischen diesen beiden Anforderungen zu finden. Ein entscheidender Faktor, der die Größe der Datei beeinflusst, ist die Anzahl der Pixel, die ein Bild enthält und wurde bereits oben angesprochen. Die Rohfassung von Bilddateien kann schnell 10 MB überschreiten. Daher ist es notwendig, die Daten beim Speichern zu komprimieren. Das PNG-Format komprimiert verlustfrei. Es ist die erste Wahl für die hier benötigte Anwendung.

Tipp: Bei Gimp gibt es eine besondere Vorgehensweise, wenn Dateien nach der Bearbeitung gespeichert werden sollen. Der übliche Weg, eine Datei im PNG-Format mit "Speichern" oder "Speichern unter" zu speichern, erlaubt kein anderes Bildformat als XCF. Gimp hat jedoch einen sehr eleganten Weg über "Exportieren als" implementiert. Der große Vorteil bei diesem Weg ist, dass die Bearbeitungen nicht in der ursprünglichen Rohdatei gespeichert werden, sondern nur in der Exportdatei. Einzelheiten finden Sie im Gimp Online Handbuch.