Bildbearbeitung fürs Web
Grafikers Werkzeugkiste
Aufgabe: Schön scharf!
Bildbearbeitung fürs Web
Was ist Schärfe? Prinzipiell zuerst einmal eine Frage der optischen Wahrnehmung des menschlichen Auges. Als scharf werden klare Grenzen an Linien und Kanten wahrgenommen. Absolute Schärfe wäre dagegen dadurch definiert, dass ein Punkt mit 1µm Durchmesser auch tatsächlich durch einen Punkt von ebenfalls 1µm Durchmesser wiedergegeben würde (ausführlicher nachzulesen unter de.wikipedia.org/wiki/Sch%C3%A4rfe_%28Optik%29).
Die Schärfetoleranz des Auges ist es, die es schwierig macht, den Bedarf für Schärfung zu erkennen. Oftmals werden auch verschwommene Fotos vom Auge als halbwegs scharf wahrgenommen erst wenn man zwei Bilder vergleicht, wird klar, welchem es an Schärfe mangelt. Ähnlich deutlich lässt sich die subjektive Auffassung von Schärfe erkennen, wenn man einen Brillen- oder Kontaktlinsenträger die Schärfe mit und ohne Sehhilfe vergleichen lässt. Hier regelt die Menge an Details, die der Mensch überhaupt wahrnehmen kann, die Schärfewahrnehmung.
Scharfe Fotos
Bildbearbeitung fürs Web
Wenn Sie Fotos in Ihren Designs verwenden, hängt die sichtbare Menge an Details von zwei Dingen ab: der Auflösung und der Schärfe, die Sie mit Kameraeinstellungen und Objektivqualität erreichen konnten. Da die Auflösung im Web sich nach der Monitorauflösung richtet und dementsprechend fix ist, haben Sie hier keine Flexibilität, sondern müssen beim Herunterrechnen Ihrer Fotos eher mit einem Schärfeverlust rechnen.
Die letzte Komponente, die den Eindruck von Schärfe bestimmt, ist der Kontrast. Ein gutes Beispiel hierfür ist Schrift. Auch wenn zwei Texte gleich scharf oder unscharf sind, ist derjenige besser zu lesen, der sich stärker vom Hintergrund abhebt.
Lösungen
Bildbearbeitung fürs Web
Die beste Methode, Schärfeprobleme zu vermeiden, ist natürlich, bei der Bildaufnahme schon sehr genau darauf zu achten. Bewegung, zu lange Verschlusszeiten und Ähnliches können die Schärfe beeinträchtigen. Wenn dieser Fall allerdings eingetreten ist, gibt es natürlich digitale Gegenmaßnahmen.
Die üblichen Scharfzeichnungsfilter der Bildbearbeitungsprogramme sind sicherlich die erste Anlaufstelle. Meist die bessere Alternative ist hier das Unscharf maskieren, dessen Name daher kommt, dass in der klassischen Fotografie ein unscharfes Negativ über das Original gelegt wurde, um schließlich die Kanten zu betonen. Die wichtigste Besonderheit ist hier, dass der Designer über den Schwellenwert kontrollieren kann, wie stark Farbflächen geschärft werden. Durch übertriebene Schärfung solcher Flächen kommt es nämlich leicht zum Pixelrauschen. Die Überschärfung kann sich allerdings auch in Gestalt weißer Farbsäume an den Kanten äußern hier gilt es, sehr vorsichtig mit den Reglern umzugehen.
Bessere Lösungen
Bildbearbeitung fürs Web
Um die Ergebnisse besser zu kontrollieren, sollten Sie etwas aufwendigere Maßnahmen einsetzen. Sie können beispielsweise die Bildebene duplizieren und dann die übergeordnete Ebene schärfen. Nun haben Sie die Möglichkeit, mit der Deckkraft den Schärfeeffekt zu steuern. Photoshop verwendet diese Methode intern automatisch für den Menübefehl Bearbeiten, Verblassen.
Wenn Sie nur einen Teilbereich des Bildes schärfen möchten, wählen Sie diesen am besten über eine Farbauswahl oder mit anderen Auswahlwerkzeugen und weicher Kante aus. Wichtig ist die weiche Kante, denn sie sorgt dafür, dass keine Schärfegrenze zu erkennen ist.
Schärfen mit Gimp und Photoshop
Bildbearbeitung fürs Web
Wie bereits erwähnt ist heute jedes gängige Bildbearbeitungsprogramm mit mehreren Schärfefiltern, darunter Unscharf maskieren ausgestattet. Einige Programme besitzen auch Automatismen, die das Bild zuerst analysieren. Dazu gehört zum Beispiel die Schärfekorrektur von Paint Shop Pro. Je nach Programm hat sich auch eine rege Menge an Tutorials und Empfehlungen zum richtigen Schärfen herausgebildet (zum Beispiel für Gimp unter www.gimps.de/gimp/bilder-fotos/schaerfen).
Auch für den Marktführer Photoshop gibt es entsprechende Schärfungstipps, die oft für ein besseres Ergebnis empfohlen werden. Zwei sollen hier kurz herausgegriffen werden. Sie können den Hochpassfilter zum Schärfen einsetzen. Dazu duplizieren Sie die Ebene mit dem Bild beziehungsweise die zu schärfenden Bereiche. Ändern Sie den Ebenenmodus in Weiches Licht. Wählen Sie anschließend den Hochpass-Filter (Menü Filter, Sonstige Filter, Hochpass). Welche Radius-Einstellung die Richtige ist, hängt von der Größe des Bildes ab.
Kanten schärfen
Bildbearbeitung fürs Web
Die zweite Methode ist das partielle Schärfen von Kanten, ohne die Flächen mitzuschärfen. Hierfür duplizieren Sie wieder die Bildebene und wählen dann den besten beziehungsweise schärfsten Kanal und duplizieren ihn. Meist ist das der Rot-Kanal, das hängt aber immer von der Art des Bildes ab. Wenden Sie dann auf das Duplikat den Filter Konturen finden an (Menü Filter, Stilisierungsfilter) und blenden eventuell die anderen Kanäle aus. Anschließend arbeiten Sie mit der Tonwertkorrektur die Kanten heraus. Machen Sie zum Schluss aus dem Kanal eine Auswahl, indem Sie mit gedrückter [Strg]-Taste darauf klicken, und schärfen Sie dann die ursprüngliche Bildebene mit Unscharf maskieren nur innerhalb dieser Auswahl.
Beide Methoden haben den Vorteil, dass Sie hohe Kontrolle über das Ergebnis haben. Sie finden beide Beispiele in der Datei schaerfen.psd auf der Heft-CD (Bereich Listings) im Vergleich mit Unscharf maskieren.
Aufgabe: Size matters!
Bildbearbeitung fürs Web
Größenänderungen gehören zum Alltag in der modernen Bildbearbeitung. Man sollte sich allerdings bewusst machen, dass Skalieren auch immer einen Qualitätsverlust bedeutet. Vor allem die Vergrößerung eines Bildes bedeutet stets, dass die zugehörige Berechnungsmethode neue Pixel an die Stellen einrechnen muss, an denen bisher keine vorhanden sind. Dieser Vorgang ist auch als Interpolation bekannt.
Beim Verkleinern von Bildern werden Pixel herausgerechnet. Ein Thumbnail, also ein stark verkleinertes Bild, ist im Prinzip nichts anderes als ein grobes Raster, wie es zum Beispiel für Bilder einer Plakatwand angewendet wird. Aus der Ferne wirkt es scharf, wenn man näher zoomt, löst es sich in Druckpunkte beziehungsweise am Monitor in pixelige Farbflächen auf.
Lösung
Bildbearbeitung fürs Web
Einen optimalen Trick zur Größenänderung von Bildern gibt es nicht. Die Frage ist nur, welchen Algorithmus man zur Interpolation wählt, denn dieser bestimmt, wie neue Pixel hinzugerechnet oder überschüssige entfernt werden. Nach der Interpolation sollten Sie dann unter Umständen noch das Ergebnis nachschärfen.
Für Thumbnails bringt es möglicherweise auch Vorteile, das Bild vor dem Herunterskalieren das erste Mal zu schärfen. So hält sich der Schärfeverlust in Grenzen und Sie können anschließend mit erneutem Schärfen ein besseres Ergebnis erzielen.
Bei der Wahl der Interpolationsmethode gibt es prinzipiell einige Entscheidungsgrundlagen: Sie können sich mit den Algorithmen selbst beschäftigen, was allerdings ein Faible für Mathematik und Formeln voraussetzt. Oder aber Sie werfen einen Blick auf die Ausgabe. Abhängig sind Sie dabei natürlich von dem, was Ihnen das Tool Ihrer Wahl bietet.
Schriftschärfe &
Antialiasing
Bildbearbeitung fürs Web
In der Diskussion rund um Schärfe und Bildskalierung spielen Schriften und Text eine Sonderrolle. Dies liegt vor allem daran, dass Text sehr leicht zu unscharf wird. Prinzipiell ist bei Text immer zu überlegen, ob Antialiasing, also die Glättung von Kanten, eingesetzt wird. Denn nicht immer wird das Ergebnis dadurch besser.
Gerade die geringe Auflösung eines Bildschirms sorgt dafür, dass kleinere Schrift mit Antialiasing verschwommen wirkt. Dabei gibt es allerdings je nach Schriftart weitere Unterschiede: Serifenschriften und dünne, ziselierte Schriften sind grundsätzlich anfälliger für diesen Effekt als serifenlose Schriften.
In Grafikprogrammen wie Photoshop oder Paint Shop Pro wird Text mittlerweile in Vektorform vorgehalten, so dass die nachträgliche Skalierung kein Problem ist. Sie können außerdem jederzeit wählen, ob und welche Art von Antialiasing zum Einsatz kommt.
Unangenehm wird es allerdings, wenn Schrift selbst skaliert werden soll. Relativ problemlos funktioniert dies eigentlich nur bei Pixelschriften, die mit Pixelwiederholung skaliert werden können. Andere Schriften leiden extrem. Dem ist auch kaum mit Scharfzeichnen beizukommen. Deswegen sollten Sie von Fall zu Fall überlegen, den Text jeweils neu anzulegen.
Aufgabe: Print-Farben ins Web
Bildbearbeitung fürs Web
Wie wichtig einheitliches Corporate-Design ist, wird spätestens dann klar, wenn man sich Firmen ansieht, die das Konzept perfekt umsetzen. Dazu gehören die Großen wie Automobilkonzerne und Telekommunikationsunternehmen, aber auch viele mittlere und kleinere Unternehmen. Ein Webdesigner, der den Corporate-Design-Gedanken ernst nimmt, sollte sich auch Gedanken machen, wie er die im Print-Bereich verwendeten Farben des Unternehmens in webkompatible Pendants umwandelt.
Rein technisch ist das Problem, dass der Print-Farbraum CMYK und der Webfarbraum RGB nicht vollständig aus den gleichen Farben bestehen. Dies sehen Sie auch im Grafikprogramm, wenn Sie ein wenig an den Farbeinstellungen spielen. Photoshop zeigt zum Beispiel ein Ausrufezeichen im Farbwähler, wenn eine RGB-Farbe kein CMYK-Pendant hat. Dies ist vor allem bei stark leuchtenden und kräftigen Farben der Fall.
Die CMYK-in-RGB-Umwandlung ist allerdings selten ein sehr großes Problem, da der RGB-Farbraum oft eine gute Farbentsprechung besitzt. Besondere Vorsicht sollten Sie aufwenden, wenn es in die umgekehrte Richtung geht. Die erwähnten kräftigen Farben kommen eventuell im Druck nicht so schön heraus wie auf dem Bildschirm.
Sonderfarben
Bildbearbeitung fürs Web
Eine weitere Problematik stellen die Sonderfarben dar. Oftmals entspringt die Hauptfarbe einer Firma der Pantone- oder der HKS-Farbpalette. Diese Sonderfarben dienen dazu, im Druck immer das gleiche und unverwechselbare Farbergebnis zu erreichen und bei Flächen die CMYK-Rasterung zu vermeiden. Dementsprechend gibt es zu vielen dieser Farben allerdings auch keine direkte CMYK- oder RGB-Entsprechung, sondern nur Näherungswerte.
Farbumrechnung
Bildbearbeitung fürs Web
Die CMYK-RGB-Umrechnung erledigt im Allgemeinen die Bildbearbeitung. Allerdings sollte der Designer hier kritisch überprüfen, ob er nicht doch eine leicht andere Farbe als die empfohlene verwendet. Am Bildschirm ist eine leicht strahlendere Farbausprägung oft empfehlenswert. Wichtig ist nur, dass sich der Designer und schließlich das Unternehmen festlegt. Das heißt, am Schluss sollte in der Farbkarte beziehungsweise Corporate-Identity-Vereinbarung des Unternehmens jede medienübergreifende Farbe sowohl mit dem Druck- als auch mit dem RGB-Wert verzeichnet sein.
Farbkarten
Bildbearbeitung fürs Web
Für die Umrechnung von Pantone-Farben stehen mehrere Wege zur Verfügung: der Adobe-Algorithmus ist zum Beispiel in Photoshop integriert, eine Alternative ist der Ghostscript-Mechanismus (www.aperion.de/aperion/tools.htm). Unterschiede zwischen beiden ergeben sich nur bei Werten mit Schwarzanteil (K von CMYK). Allerdings ist dieser Unterschied dann doch durchaus beachtenswert.
Pantone selbst bietet ebenfalls eine Umrechnungsfarbkarte (www.pantone.de/ProductDetails02.asp), die allerdings mit 140 Euro recht teuer ausfällt. Kostenlos gibt es eine Farbtabelle, die sich in Photoshop integrieren lässt.
Für das HKS-Farbsystem (benannt nach den den Druckfarbenherstellern Hostmann-Steinberg, Kast+Ehinger und H. Schmincke & Co.) oder auch die RAL-Farben (www.ral.de/farben) finden sich ähnliche Hilfsmittel wie für Pantone. Eine Anlaufstelle ist der spezialisierte Versender Grafipress (www.grafipress.de).
In der Praxis reichen allerdings oftmals die einfachen Umrechnungsalgorithmen aus, wenn dann eine RGB-Farbe fixiert wird, da auf den Bildschirmen der Nutzer sowieso keine Farbtreue und kein Farbraum vorausgesetzt werden kann. Am unangenehmsten ist allerdings, wenn ein Unternehmen im Web leicht unterschiedliche Varianten einer Farbe einsetzt, weil verschiedene Umrechnungsverfahren zum Einsatz kommen.
Aufgabe: Web-Farbpalette
Bildbearbeitung fürs Web
216 Farben bilden die Standard-Webfarben. Diese Farben wurden ursprünglich von Netscape eingeführt, um ein Farbset zu haben, das am Mac und unter Windows in gleicher Qualität dargestellt wird. Im hexadezimalen Farbsystem erkennen Sie die websicheren Farben an den Werten. Möglich sind nur die RGB-Werte 00, 33, 66, 99, CC, FF (beziehungsweise 0, 51, 102, 153, 204, 255) in beliebigen Kombinationen.
Der Vorteil an den 216 websicheren Farben kommt zum Tragen, wenn ein Monitor nur 256 Farben unterstützt. Dann müssen andere Farben nämlich vom Browser näherungsweise bestimmt werden. Dies kann zu extremen Farbverschiebungen führen. Die websicheren Farben werden dagegen immer gleich dargestellt. Allerdings stellt sich die Frage, ob man sich heute noch auf diese Farben stützen und sich damit beschränken sollte.
Lösung
Bildbearbeitung fürs Web
Das Konzept der websicheren Farben muss heute nicht mehr unbedingt angewendet werden. Dafür gibt es mehrere Gründe: Einer ist, dass viele websichere Farben bei 16 Bit Farbtiefe doch neu berechnet werden müssen. Letzteres fällt allerdings nicht allzu stark ins Gewicht, da die Farbverschiebung nicht besonders groß ist. Problematischer ist, dass man sich eine optische Restriktion auferlegt, die bei 99 Prozent der heutigen Computer-Monitore keine positive Wirkung mehr hat. Es ist also eindeutig wichtiger, dass eine Firma ihre eigenen Farben verwendet, als dass sie websichere Krücken einsetzt. Selbst mobile Endgeräte werden nämlich mittlerweile mit mehr als 256 Farben realisiert, so dass das ursprüngliche Argument der extremen Farbverschiebung heute nicht mehr zählt.
Fazit
Bildbearbeitung fürs Web
Die vier hier gezeigten Probleme sind natürlich bei weitem nicht alle, die dem leidgeplagten Designer auf seinem Weg begegnen können, aber sie zählen zu den wichtigsten. Für den Hausgebrauch ist die Funktionalität der handelsüblichen Bildbearbeitungsprogramme ausreichend. Für gehobene Ansprüche lohnt jeweils ein Blick auf Spezialwerkzeuge wie Nik Sharpener Pro oder Photozoom.