1 Grundlagen der Bildbearbeitung

Das GIMP 2.8 Lernbuch
Bildbearbeitung leicht gemacht für Ein- und Umsteiger
von Bettina K. Lechner
Art.-Nr. 012013322
Version 2.0.0 vom 13.10.2014
Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm
© 2012 by Webmasters Press
www.webmasters-press.de
Nordostpark 7, 90411 Nürnberg, Germany
Das vorliegende Fachbuch ist urheberrechtlich geschützt. Alle Rechte
vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen
sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Fachbuch wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren
und Herausgeber übernehmen keine juristische Verantwortung oder
irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und
deren Folgen.
Informationen zu dieser
Buchreihe
Dieses Buch ist Teil unserer Buchreihe zum Zertifizierungsprogramm des Europäischen Webmasterverbandes, Webmasters Europe e.V. (WE).
Das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm ist modular aufgebaut
und bietet Abschlüsse und Zertifizierungen auf verschiedenen Ebenen an – von der ExpertenZertifizierung für einzelne Themen bis hin zu Diploma-Abschlüssen für Webdesigner, WebEntwickler, Webmaster und Online Marketing Manager. Nähere Informationen dazu finden Sie
unter http://de.webmasters-europe.org/bildungsprogramm
Unsere Buchreihe bietet Ihnen nicht nur eine fundierte und praxisnahe Einführung in das
jeweilige Thema, sondern ist von Webmasters Europe e.V. offiziell autorisiert zur Vorbereitung
auf die WE-Zertifikatsprüfungen. Damit haben Sie die Garantie, dass alle prüfungsrelevanten
Themen behandelt werden.
Inhaltsverzeichnis
Vorwort
13
1
Grundlagen der Bildbearbeitung
15
1.1
1.1.1
1.1.2
1.2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.3
1.3.1
1.3.2
1.3.3
1.3.4
1.3.5
1.4
15
2
3
Pixel- versus Vektorgrafiken
Vektorgrafiken
Pixelgrafiken
Die wichtigsten Dateiformate für digitale Bilder
JPEG
GIF
PNG
XCF
EPS
TIFF
PSD
Farbmodelle
Das RGB-Farbmodell
Das CMYK-Farbmodell
HSV
Sonderfarben
Graustufen
Testen Sie Ihr Wissen
15
19
22
22
23
24
25
26
26
27
27
27
30
32
33
34
34
Ein erster Blick auf GIMP
35
2.1
2.1.1
2.1.2
2.1.3
2.2
2.2.1
2.2.2
2.3
2.3.1
2.3.2
2.3.3
2.3.4
2.3.5
2.3.6
2.4
35
GIMP herunterladen und installieren
Installation unter Windows
Installation unter Mac
Installation unter Linux
Die Arbeitsoberfläche
Die Bereiche der GIMP-Oberfläche
Die Handhabung der Docks und Dialoge
Dateien in GIMP öffnen und speichern
Ansicht verkleinern bzw. vergrößern (zoomen)
Im herangezoomten Bild navigieren
Eine neue Datei anlegen
Datei in GIMP speichern bzw. exportieren
Rückgängig machen von Arbeitsschritten
Maßeinheiten und Hilfslinien
Testen Sie Ihr Wissen
36
36
36
36
36
39
41
43
43
44
45
49
51
53
Bildgröße und Auflösung
55
3.1
3.2
3.3
3.4
55
Die Druckgröße
Bild skalieren
Zuschneiden-Werkzeug
Testen Sie Ihr Wissen
57
59
60
4
5
6
Arbeiten mit Farben und Malwerkzeugen
62
4.1
4.2
4.2.1
4.2.2
4.2.3
4.3
4.3.1
4.3.2
4.3.3
4.4
4.4.1
4.4.2
4.5
4.5.1
4.5.2
4.5.3
4.6
4.6.1
4.6.2
4.7
4.7.1
4.7.2
4.8
62
Den Farbmodus feststellen
Grundlagen des Farbmanagements
Die wichtigsten Farbprofile
So hinterlegen Sie in GIMP die Farbprofile
Farbprofil auslesen und zuweisen
In einen anderen Farbraum konvertieren
Vorschau auf CMYK
In Graustufen konvertieren
Indiziert
Farben auswählen
Der Farbauswahldialog
Die Pipette
Die Malwerkzeuge
Der Stift
Der Pinsel
Der Radierer
Fläche füllen mit Farbe oder Muster
Drag & Drop – Schritt für Schritt:
Das Füllen-Werkzeug
Arbeit mit Farbverläufen
Verlaufsformen
Verläufe bearbeiten
Testen Sie Ihr Wissen
63
64
64
65
65
65
66
67
69
69
71
71
72
74
75
75
76
76
78
80
81
86
Bildkorrekturen
87
5.1
5.1.1
5.1.2
5.1.3
5.2
5.2.1
5.2.2
5.2.3
5.3
5.4
87
Farbkorrekturen
Werte
Kurven
Farbton & Sättigung
Filter
Effektfilter
Korrekturfilter
Render-Filter
Bildretusche
Testen Sie Ihr Wissen
87
90
94
97
98
103
106
107
112
Bildteile auswählen
113
6.1
6.1.1
6.1.2
6.1.3
6.1.4
6.1.5
6.1.6
6.2
6.3
6.3.1
6.3.2
6.4
6.5
113
Die Auswahlwerkzeuge
Einfache geometrische Formen auswählen
Das Werkzeug für freie Auswahl
Auswahl nach Farbe
Abgesoftete Auswahlkante
Auswahl bei homogenem Hintergrund
Wichtige Tastenkombinationen für Auswahlen
Auswahl erzeugen mit der Schnellmaske
Auswahlmasken
Auswahlen speichern
Auswahl laden
Das Pfadwerkzeug
Testen Sie Ihr Wissen
114
118
120
121
123
125
126
131
131
133
134
137
7
8
9
Arbeiten mit Ebenen
138
7.1
7.1.1
7.1.2
7.1.3
7.1.4
7.1.5
7.1.6
7.1.7
7.1.8
7.1.9
7.1.10
7.1.11
7.2
7.3
7.3.1
7.3.2
7.3.3
7.4
138
Erste Schritte mit Ebenen
Zweck von Ebenen
Ebenen verwalten
Ein Duplikat einer Ebene erstellen
Sehen oder nicht sehen: Ebenen aus- und einblenden
Freigestellte Bildteile bearbeiten
Bildteile freistellen
Ebenengröße verändern
Ebenenoptionen
Ebenen importieren
Ebenen transformieren
Ebene zuschneiden
Füllmethoden: Kolorieren eines Schwarzweißfotos
Ebenenmasken
Was sind Ebenenmasken?
Ebenenmasken im Überblick
Ebenenmasken in der Praxis
Testen Sie Ihr Wissen
138
139
139
141
141
143
145
150
153
154
160
161
164
164
165
165
178
Text erzeugen
180
8.1
8.2
8.3
180
Das Textwerkzeug
Texteffekte mit Vorlagen
Testen Sie Ihr Wissen
186
187
Webgrafiken erzeugen
188
9.1
9.1.1
9.1.2
9.2
9.2.1
9.2.2
9.2.3
9.3
188
Webgrafiken
Buttons selbst zeichnen
Webgrafiken auf »Knopfdruck«
Animationen
Zeitlicher Ablauf
Vorschau auf die Animation
Animation optimieren und speichern
Testen Sie Ihr Wissen
188
189
191
192
193
193
194
Lösungen
195
Index
201
Vorwort
GIMP ist eines der bekanntesten Open Source-Programme. »Was ist Open Source?«, werden
Sie sich vielleicht fragen. Übersetzt bedeutet der englische Begriff »quelloffen«. Damit ist
gemeint, dass der Quellcode des Programms offen vorliegt und für jedermann einsehbar ist.
Das ist keine Selbstverständlichkeit, denn kommerzielle Anbieter halten den Code stets streng
geheim. Der Vorteil des offenen Quellcodes liegt auf der Hand: Jeder, der dazu in der Lage ist,
kann das Programm weiterentwickeln und dadurch bereichern. Anders als man vielleicht denken mag, führt das nicht zu einem Chaos, sondern ganz im Gegenteil: »Die Weisheit der Vielen«1 zeigt sich – wie ich finde – in solchen Projekten immer ganz besonders deutlich.
Denn GIMP ist nicht nur ein hochentwickeltes Bildbearbeitungsprogramm, sondern besticht
durch eine Vielzahl an kreativen Funktionen, wie zum Beispiel die zahlreichen Filter, die quasi
per Mausklick künstliche Lichtquellen, Wolken, Flammen, Bewegungsunschärfe, van GoghImitationen, aber auch ausgefallene Effekte wie Kaffeeflecken erzeugen. Von diesen Filtern
gibt es über hundert! Und ja, einige der wichtigsten Funktionen und Filter werden wir uns in
diesem Lernbuch natürlich genauer ansehen.
Oft werde ich gefragt, ob GIMP den Programmen kommerzieller Anbieter das Wasser reichen
kann. In den allermeisten Bereichen lässt sich die Frage mit einem einfachen Ja beantworten.
So bietet GIMP alle Funktionen, die Sie für die Aufbereitung von Bildern für den Webbereich
benötigen. Es kann aber beispielsweise nicht in den CMYK-Farbraum umwandeln, was vor
allem bei der Aufbereitung von Bildern für den professionellen Druckbereich nachteilig ist.
Dennoch können Sie Bilder für z. B. ein Fotobuch aufbereiten, da hier stets RGB-Dateien verwendet werden. Und GIMP arbeitet (noch!) nur mit 8 Bit Farbtiefe pro Kanal.
Da sind wir schon beim Thema »was Sie erwartet« angelangt: In diesem Lernbuch möchte ich
Ihnen die Grundlagen der digitalen Bildbearbeitung mit GIMP nahebringen. Ein Schwerpunkt
liegt dabei auf der Veröffentlichung von Bildern im Web, wobei natürlich der eine oder andere
Blick über den Tellerrand hinaus auf andere Medienbereiche nicht ausbleibt. Mit zahlreichen
Übungen werden Sie Schritt für Schritt die verschiedenen Aufgabengebiete und Funktionen
des Programms kennenlernen.
Die einzelnen Lektionen dieses Buches sind in sich abgeschlossen, bauen jedoch aufeinander
auf. Arbeiten Sie die Lektionen also nacheinander durch. Im Laufe der Zeit werden Ihnen
immer öfter Dinge aus vorangegangenen Lektionen in anderen Zusammenhängen wiederbegegnen.
Nach dem Durcharbeiten dieses Lernbuchs sollten Sie in der Lage sein, Bilder in GIMP professionell zu bearbeiten, zu korrigieren und zu retuschieren, Montagen mit Ebenen und Masken
zu erstellen, Filter anzuwenden, Größenänderungen durchzuführen, Texte zu setzen, kleine
Animationen zu erstellen sowie Ihre Grafiken für das Web aufzubereiten.
Natürlich kann und will dieses Lernbuch nicht alle Funktionen von GIMP abdecken. Da die
Software mittlerweile einen großen Funktionsumfang für unterschiedliche Anwendungszwecke bietet, nehmen wir uns die Werkzeuge vor, die für die tägliche Praxis in Bildbearbeitung,
1. Titel von James Surowieckis Buch, Die Weisheit der Vielen. Warum Gruppen klüger sind als der Einzelne.
Grafik- und Webdesign relevant sind. Bei meinen Trainings ist es mir auch immer ein Anliegen,
dass die Teilnehmer in der Lage sind, sich selbst zu helfen. Daher werde ich Ihnen auch mit
Tipps und Tricks Hilfe zur Selbsthilfe mitgeben.
Doch nun ist es Zeit: Tauchen Sie ein in die kreative Welt der digitalen Bildbearbeitung und
lassen Sie sich begeistern von den unzähligen Möglichkeiten! Viel Spaß und Erfolg mit GIMP
wünscht Ihnen
Bettina K. Lechner
Neuhaus, im Mai 2014
1.1 Pixel- versus Vektorgrafiken
15
Grundlagen der Bildbearbeitung
In dieser Lektion lernen Sie:
➤ was der Unterschied zwischen Pixel- und Vektorgrafiken ist.
➤ welche Dateiformate für digitale Bilder die wichtigsten sind.
➤ worin sich Farbmodelle unterscheiden.
1.1 Pixel- versus Vektorgrafiken
Wir beginnen zunächst mit einem erläuternden Theorieteil, der aber hoffentlich alles andere
als grau für Sie sein wird. Für die spätere Bearbeitung von Bildern und Grafiken ist wichtig, dass
Sie den Unterschied zwischen den folgenden beiden Grafiktypen kennen: Pixelgrafiken und
Vektorgrafiken.
1.1.1 Vektorgrafiken
Vektorgrafiken sind aus geometrischen Formen aufgebaut (man spricht auch von Pfaden). Eine
vektorbasierte Form ergibt sich aus Punkten (sogenannten Ankern oder auch Knoten), die in
einem Koordinatensystem gesetzt werden und die durch Linien oder Kurven (sog. Bézierkurven) miteinander verbunden sind. Der Bereich zwischen zwei Ankern wird auch Pfadsegment
genannt.
Beispiel
Abb. 1.1 Um ein vektorbasiertes Quadrat aufzubauen, benötigt man vier Anker. Diese werden durch Geraden
miteinander verbunden.
1
16
1 Grundlagen der Bildbearbeitung
Abb. 1.2 Ein vektorbasierter Kreis beruht wie das Quadrat auf vier Ankern, die allerdings durch gebogene Linien
miteinander verbunden sind.
Die Stärke der Biegung wird über sogenannte Grifflinien eingestellt, die aus den Ankerpunkten
gezogen werden.
Abb. 1.3 Vektorform mit allen für Kurven benötigten Elementen: Anker, Griffpunkte, Segmente.
Mit all diesen Elementen lässt sich jede beliebige Form zeichnen. Für die Gestaltung einer vektorbasierten Form gibt es die folgenden Eigenschaften:
➤ die Sichtbarkeit, Deckkraft bzw. Farbe der Kontur (der Verbindungslinien)
➤ die Stärke (Dicke) der Kontur
➤ der Stil der Kontur (z. B. durchgezogen, gestrichelt oder gepunktet)
➤ die Sichtbarkeit, Deckkraft bzw. Füllfarbe der Fläche (z. B. einfarbig oder als Farbverlauf ).
1.1 Pixel- versus Vektorgrafiken
17
Abb. 1.4 Kreise mit unterschiedlichen Eigenschaften, v.l.n.r.: dicke Kontur, Fläche gefüllt mit Farbverlauf,
gestrichelte Kontur mit einer Füllfarbe
Durch geschickten Einsatz dieser Eigenschaften und Übereinanderlegen verschiedener Vektorformen lassen sich äußerst komplexe Formen und (mit viel Geduld) auch fotorealistische
Zeichnungen erzeugen:
Abb. 1.5 Versuchen Sie mal geistig diese Zeichnung in
Pfadsegmente zu unterteilen. Sie erkennen bestimmt die Flächen,
Kurven und Linien, aus denen Gesicht und Haar aufgebaut sind.
Quelle: openclipart.org/detail/170348/woman-bysudhakar_m_k-170348
18
1 Grundlagen der Bildbearbeitung
Abb. 1.6 Kaum zu glauben: Selbst diese fotorealistische
Zeichnung besteht nur aus Vektorformen.
Quelle: commons.wikimedia.org/wiki/
File:Rubik%27s_cube_v3.svg
Vor- und Nachteile von Vektorgrafiken
Verlustfrei skalierbar.
Eine Vektorgrafik kann prinzipiell ohne Qualitätsverlust beliebig verkleinert oder vergrößert werden. Dabei werden einfach die
Anker versetzt und das Segment bzw. die
Fläche neu befüllt. Das heißt, dass aus einer
Vektorgrafik ein mikroskopisch kleines Bild
für eine Briefmarke genauso gedruckt werden kann wie ein riesiges Bild für eine Plakatwand.
Nicht geeignet für Fotos.
Eine Darstellung detailreicher Fotografien
ist nicht möglich – denken Sie beispielsweise an die vielen Farbschattierungen
eines Himmels oder die zahlreichen Farben,
aus denen sich ein Gesicht zusammensetzt;
der Aufbau eines solchen Fotos mit Vektorformen wäre unmöglich.
Ressourcenschonend.
Vektorgrafiken benötigen nur sehr wenig
Speicherplatz, weil ja nicht jeder einzelne
Bildpunkt gespeichert wird, sondern nur die
Koordinaten und die Eigenschaften der
Form.
Spezielle Programme nötig.
Kein Nachteil im eigentlichen Sinn, aber für
die Bearbeitung bzw. Erstellung von Vektorgrafiken benötigen Sie spezielle Softwareprogramme, die die meisten Computer
standardmäßig nicht installiert haben. Und
auch für die Darstellung im Web gibt es
gewisse Einschränkungen.
Tabelle 1.1 Vor- und Nachteile von Vektorgrafiken
Einsatzbereiche für Vektorgrafiken
➤ Firmenlogos
➤ Zeichnungen, Comics
➤ Schriften
1.1 Pixel- versus Vektorgrafiken
19
➤ geometrische Formen.
Dateiformate für Vektorgrafiken
➤ EPS (= Encapsulated PostScript, ein Standard in der Druckvorstufe, speichert zudem auch
Pixelgrafiken)
➤ SVG (= Scalable Vector Graphics, XML-basierter, offener Standard, auch für Webgrafiken)
➤ AI (proprietäres Dateiformat von Adobe Illustrator)
➤ CDR (proprietäres Dateiformat von CorelDraw)
➤ WMF (= Windows Metafile).
Bekannte Programme zur Erstellung bzw. Bearbeitung von Vektorgrafiken
➤ Adobe Illustrator
➤ Macromedia FreeHand (wird nicht mehr weiterentwickelt)
➤ Corel Draw
➤ Xara Xtreme
➤ InkScape (Open-Source)
➤ iDraw (Mac).
Auch Desktop-Publishing-Programme wie Adobe InDesign oder das Open-Source-Programm
Scribus arbeiten vektorbasiert.
Und wie ist das in GIMP? GIMP ist grundsätzlich ein Bildbearbeitungsprogramm (so steht
IMP für image manipulation program), es ist also für die Erstellung und Bearbeitung von Vektorgrafiken nur bedingt geeignet. Mit Ausnahmen: So wird beispielsweise Text vektorbasiert
erzeugt, und GIMP bietet das Pfadwerkzeug, mit dem Sie Formen, Linien und Kurven erzeugen
können.
1.1.2 Pixelgrafiken
Eine Pixel- oder Rastergrafik, bzw. Bitmap-Grafik, besteht aus unzähligen Bildpunkten, die Pixel
genannt werden. In den Pixeln sind die Informationen über ihre Farbwerte gespeichert, die
Summe all dieser Pixel ergibt dann das Bild bzw. Foto – ähnlich wie bei einem Mosaik: Je kleiner die Mosaiksteinchen (Pixel), desto detailtreuer ist das Bild, je größer die Mosaiksteinchen,
desto gröber ist die Abbildung. Auf die Pixelgrafik angewendet heißt das: Die Qualität und
Detailtreue eines Bildes ist abhängig von der Anzahl und Größe der Pixel. Dieser Umstand wird
später bei der Erläuterung der Drucktauglichkeit eines Bilds relevant (mehr dazu s. Abschnitt
1.3.2).
20
1 Grundlagen der Bildbearbeitung
Abb. 1.7 2x das gleiche Bild, links das Bild im Original und rechts mit stark reduzierter Pixelanzahl; es weist also bei
gleicher Größe wesentlich weniger Pixel auf, wodurch die Qualität leidet – es wirkt unscharf.
Quelle: www.flickr.com/photos/fjseb/2645671122
Und weil eben eine Pixelgrafik mit einer riesigen Anzahl an Pixeln aufgebaut wird und jeder
Pixel eine andere Farbe aufweisen kann, ist es das perfekte und damit auch gängigste Format
für die Darstellung von sehr feinen Farbschattierungen, wie sie eben Fotos benötigen. Daher
sind Fotos aus digitalen Kameras, aus dem Web und eingescannte Bilder allesamt Pixel- bzw.
Rastergrafiken.
Relative versus absolute Auflösung
Die Anzahl der Pixel, aus denen ein Bild besteht, nennt man Auflösung. Man unterscheidet
hier zwischen der absoluten und der relativen Auflösung:
➤ Die absolute Auflösung bezeichnet die Gesamtzahl an Pixeln, aus denen ein Bild besteht,
also den Flächeninhalt (Länge × Breite). Diese Angabe wird z. B. von den Herstellern von
Digitalkameras verwendet: Eine Kamera mit 16 Megapixeln kann also Bilder erzeugen, die
insgesamt aus 16 Millionen Pixeln (Mega = Millionen) bestehen.
➤ Die relative Auflösung bezeichnet die Anzahl an Pixeln pro Längeneinheit. Die geläufige
Maßeinheit für diese Angabe ist ppi (pixels per inch, Pixel pro Zoll). Ein Bild mit einer Auflösung von 300 ppi hat also 300 Pixel pro Zoll. Über die Breite bzw. Höhe des Bildes können
hier keine Rückschlüsse gezogen werden. Ist jedoch bekannt, dass das Bild z. B. 5,08 cm
breit und ebenso hoch ist, so kann die Gesamtzahl nun errechnet werden. Zufälligerweise
;-) sind 5,08 cm exakt 2 Zoll (1 Zoll = 2,54 cm): 2 Zoll × 300 = 600 Pixel in der Breite und 2
Zoll × 300 = 600 Pixel in der Höhe. 600 × 600 ergibt 360.000. Das Bild hätte also eine absolute Auflösung von 360.000 Pixeln.
Daraus resultiert einer der gravierendsten Nachteile von Pixelgrafiken: Sie sind auflösungsabhängig, d. h. sie haben eine fest definierte Größe. Wird ein Pixelbild skaliert, kann dies zu
einem erheblichen Qualitätsverlust führen, der das Bild im Extremfall unbrauchbar macht.
Dabei bewirkt eine Vergrößerung des Bildes einen höheren Qualitätsverlust als eine Verkleinerung, da hier von der Software Pixel an Stellen »hinzuerfunden« werden müssen, an denen
zuvor keine waren. Das Bild wird zwangsläufig unscharf. Je nachdem, ob ein Bild verkleinert
oder vergrößert wird, müssen Pixel weg- bzw. hinzugerechnet werden. Diesen Vorgang der
Pixelneuanordnung nennt man Interpolation. Je nach Art der Skalierung gibt es Interpolationsmethoden, die besonders für das Verkleinern, und andere, die speziell für das Vergrößern
von Bildern geeignet sind.
1.1 Pixel- versus Vektorgrafiken
21
Abb. 1.8 Das linke Bild zeigt das Original. Rechts sehen Sie deutliche Qualitätsverluste, die eintreten, wenn ein
pixelbasiertes Bild vergrößert wird.
Trotz dieses Nachteils sind Pixelgrafiken bis heute die einzige Möglichkeit, Fotos und ähnliche
Bilder (wie etwa gerenderte 3D-Grafiken) wirklichkeitsgetreu im Druck und im Web wiederzugeben. Leistungsfähige Programme wie GIMP ermöglichen umfangreiche Manipulationen
auf Pixelebene, um Bilder auf vielfältige Weise zu bearbeiten, Farben zu korrigieren, Effektfilter
anzuwenden oder Montagen zu erstellen.
Vor- und Nachteile von Pixelgrafiken
Farbenvielfalt.
Aufgrund der hohen Farbanzahl sind realitätsgetreue Farbdarstellungen und -abstufungen problemlos möglich.
Qualitätsverluste bei Skalierung.
Die fehlenden Pixel können beim Skalieren
nur schwer bis gar nicht ersetzt werden.
Programmunabhängigkeit.
Jeder Computer hat eine Software installiert, die Pixelbilder öffnet.
Höherer Speicherbedarf.
Pixelgrafiken haben im Vergleich zu Vektorgrafiken eine höhere Dateigröße und benötigen daher mehr Speicher.
Tabelle 1.2 Vor- und Nachteile von Pixelgrafiken
Einsatzbereiche für Pixelgrafiken
➤ Fotos
➤ eingescanntes Bildmaterial
➤ 3D-Grafiken.
Dateiformate für Pixelgrafiken
➤ JPEG
➤ PNG
➤ GIF
➤ TIFF
➤ XCF (GIMP)
➤ PSD (Photoshop).
22
1 Grundlagen der Bildbearbeitung
Bekannte Programme zur Erstellung bzw. Bearbeitung von Pixelgrafiken
➤ GIMP
➤ Adobe Photoshop
➤ Adobe Fireworks
➤ Microsoft Windows Photo Viewer
➤ PaintShop Pro
➤ Pixelmator (Mac).
Abschließend sehen Sie hier eine direkte Gegenüberstellung der beiden Grafiktypen: Links
sehen Sie, was passiert, wenn Sie eine Pixel- bzw. Rastergrafik vergrößern, rechts die Vergrößerung einer Vektorgrafik.
Abb. 1.9 Diese Grafik veranschaulicht deutlich den Nachteil von Pixel- gegenüber Vektorgrafiken.
Quelle: commons.wikimedia.org/wiki/File:Bitmap_VS_SVG_Fr.svg?uselang=fr
1.2 Die wichtigsten Dateiformate für digitale Bilder
Im vorangegangenen Teil habe ich bereits einige Dateiformate angesprochen wie zum Beispiel JPEG, PNG, GIF, XCF, TIFF, PSD etc. In diesem Abschnitt sehen wir uns die Einsatzbereiche
und die jeweiligen Vor- und Nachteile der wichtigsten Formate an.
1.2.1 JPEG
JPEG (sprich: tsch'eipäg), Dateiendung .jpg, Abkürzung von Joint Photographic Experts Group,
ist das gängigste und bekannteste Dateiformat für Bilder.
1.2 Die wichtigsten Dateiformate für digitale Bilder
23
JPEG Vor- und Nachteile
➤ Gängiges Format, so gut wie jeder Computer hat eine Software installiert, die
JPEG-Dateien öffnen kann
➤ Beherrscht den vollen RGB-Farbraum
(bis 16,7 Millionen Farben = »True
Color«) daher perfekt für farbenreiche
Bilder
➤ Beherrscht neben RGB auch den CMYKFarbraum (mehr dazu siehe Abschnitt
1.3.2) und natürlich Graustufen (mehr
dazu siehe Abschnitt 4.6.6)
➤ Die Komprimierung ist verlustbehaftet,
es kommt zu Qualitätseinbußen. Bei zu
hoher Komprimierung entstehen die
typischen JPEG-Artefakte (»Klötzchenbildung«)
➤ Bei jedem Öffnen und Speichern kommt
es zu einer weiteren verlustbehafteten
Kompression
➤ Für den Profibereich häufig unzulänglich, weil nur 8 Bit pro Farbkanal möglich
➤ Keine Transparenz möglich.
➤ Hohe Komprimierung möglich
➤ Webtauglich
➤ Speichert EXIF-Daten (Metainformationen wie z. B. Aufnahmedatum, Brennweite etc.).
Tabelle 1.3 JPEG Vor- und Nachteile
Einsatzbereiche von JPEG
Brilliante Fotos, farbenreiche Grafiken, ideal zum Austausch, Versenden per E-Mail und zum
Publizieren auf Webseiten.
JPEG lässt sich kurz so beschreiben: »Gutes Preis-Leistungsverhältnis«.
Mehr zum Speichern-Vorgang in GIMP lesen Sie hier: Abschnitt 2.3.4
1.2.2 GIF
GIF (sprich: giff ), Abkürzung für Graphical Interchange Format, ist ein sehr kompaktes Format
für Grafiken.
Die größte Besonderheit liegt in der Kompressionsmethode: Das GIF-Format komprimiert Bilder durch Entfernen von Farben. Ein Bild im GIF-Format kann noch maximal 256 Farben enthalten (und ist demnach natürlich »websicher«), gegenüber 16,7 Millionen im RGB-Farbmodus.
Diese 256 Farben entstammen jedoch alle dem RGB-Farbraum, es handelt sich also um eine
Untergruppe des RGB-Farbraums. Welche Farben das genau sind, können Sie selbst bestimmen: Sie müssen hier also eine Farbtabelle definieren, einen Index aller im Bild enthaltenen
Farben. Deshalb spricht man hier auch von Indizierten Farben. Da es sich dabei nicht mehr um
den vollen RGB-Farbumfang handelt, werden die indizierten Farben in GIMP auch wie ein eigener Farbmodus behandelt (siehe Menü Bild → Modus bzw. mehr dazu Abschnitt 4.3.3). GIFBilder bestehen – ähnlich wie Graustufenbilder – lediglich aus einem einzigen Farbkanal. Dieser Kanal kann maximal 256 Farben (8 Bit) speichern, es können jedoch auch noch weniger
24
1 Grundlagen der Bildbearbeitung
Farben enthalten sein: 128 (7 Bit), 64 (6 Bit), 32 (5 Bit), 16 (4 Bit), 8 (3 Bit), 4 (2 Bit) oder nur 2
Farben (1 Bit).
GIF Vor- und Nachteile
➤ Grundsätzlich verlustfreie Komprimierung möglich
➤ Unterstützt einfache Transparenz (1-BitTransparenz)
➤ Animierbar (animated gif): Mehrere Einzelbilder werden in einer Datei gespeichert und vom Browser nacheinander
abgespielt (»Daumenkino«)
➤ Kennt nur max. 256 Farben, daher Qualitätsverlust bei Bildern, die ursprünglich
aus mehr Farben bestanden
➤ Kennt nur volle oder keine Transparenz
(keine weichen Transparenzabstufungen
wie bei PNG möglich), daher wirken die
Ränder von transparenten GIF-Grafiken
häufig unschön.
➤ Webtauglich.
Tabelle 1.4 GIF Vor- und Nachteile
Einsatzbereiche von GIF
Animationen, kleine, einfache Grafiken wie Icons, bedingt auch Logos, Schriftzüge, Buttons
und Fotos mit wenigen Farben.
GIF lässt sich kurz so beschreiben: »Klein aber fein!«
Mehr zum Speichern-Vorgang in GIMP lesen Sie hier: Abschnitt 2.3.4
1.2.3 PNG
PNG (sprich: pi:en'dschi oder ping), Abkürzung von Portable Network Graphics, ist ein verbreitetes Format vor allem im Web.
Es existiert in zwei Varianten: PNG-8 und PNG-24. Die Zahlen stehen für die Farbtiefe (8 Bit bzw.
24 Bit):
➤ PNG-8 hat dieselben Eigenschaften wie das GIF-Format (mit Ausnahme der Animationen):
Solche Dateien liegen im Farbmodus Indizierte Farben mit max. 256 Farben vor und unterstützen einfache Transparenzen (1 Bit). Deshalb findet es in der Praxis kaum Verwendung,
es wird stattdessen das GIF-Format verwendet.
➤ PNG-24 hingegen unterstützt den vollen RGB-Farbumfang (16,7 Mio. Farben, jedoch nicht
den CMYK-Farbmodus) bei verlustfreier Kompression. Diese ist allerdings bei weitem nicht
so effektiv wie die JPEG-Kompression – PNG-Dateien sind also größer. Der größte Vorteil
ist jedoch die Unterstützung von Alphatransparenzen (8-Bit-Transparenzen). Damit ist das
PNG-Format das einzige Web-Format, mit dem sich weiche Übergänge von deckend nach
transparent sowie halbtransparente Bereiche darstellen lassen.
1.2 Die wichtigsten Dateiformate für digitale Bilder
25
PNG Vor- und Nachteile
➤ Komprimierung ohne Verlust möglich
➤ Unterstützt 8 bzw. 16 Bit pro Farbkanal
➤ Unterstützt RGB, Graustufen und indizierte Farben
➤ Beherrscht Transparenz und sogar
Transparenz-Abstufungen (sog. Alphatransparenz, z. B. für einen Milchglaseffekt)
➤ Keine Unterstützung des CMYK-Farbraums (mehr dazu siehe Abschnitt 1.3.2)
➤ Keine so hohe Kompression wie bei der
verlustbehafteten JPG-Datei möglich,
daher größere Dateien
➤ Steinzeitliche Browser wie der Internet
Explorer 6 stellen die Transparenz nicht
dar.
➤ Webtauglich
➤ Speichert EXIF-Daten (Metainformationen wie z. B. Aufnahmedatum, Brennweite etc.).
Tabelle 1.5 PNG Vor- und Nachteile
Einsatzbereiche von PNG
Typische Anwendungsbereiche sind Fotos und Grafiken für das Web wie Logos, Buttons und
Banner, die dank der Transparenzabstufungen die Hintergrundfarbe durchscheinen lassen,
was besonders bei Farbverläufen oder Schatten für tolle Effekte sorgt.
PNG lässt sich kurz so beschreiben: »Vereint die Vorteile von JPG (Farbanzahl) und GIF (Transparenz)«.
Mehr zum Speichern-Vorgang in GIMP lesen Sie hier: Abschnitt 2.3.4
1.2.4 XCF
XCF, Abkürzung von eXperimental Computing Facility, ist das GIMP-eigene Dateiformat.
XCF Vor- und Nachteile
➤ Speichert alle GIMP-Funktionen wie Ebenen, Pfade usw.
➤ Kein webtaugliches Format
➤ Keine Verluste beim Speichern
➤ Sehr große Dateien
➤ Simple Komprimierung mittels DateiEndung bzip2 und gz.
➤ (Noch) keine CMYK-Unterstützung.
Tabelle 1.6 XCF Vor- und Nachteile
➤ Kann nur mit GIMP geöffnet werden
26
1 Grundlagen der Bildbearbeitung
Einsatzbereiche von XCF
XCF dient zur Speicherung der für die Bearbeitung nötigen Ebenen, Pfade etc. in GIMP.
XCF lässt sich kurz so beschreiben: »Die Arbeitsdatei«.
Mehr zum Speichern-Vorgang in GIMP lesen Sie hier: Abschnitt 2.3.4
1.2.5 EPS
EPS-Dateien (Encapsulated PostScript) sind eine Variante der Seitenbeschreibungssprache
PostScript, die ausschließlich in der Druckvorstufe verwendet wird. EPS-Grafiken können
sowohl Vektor- als auch Pixeldaten enthalten, und sogar Schriften können eingebettet werden.
Zudem kann eine EPS-Datei optional ein Vorschaubild in niedriger Auflösung (Thumbnail) enthalten, das in Layoutprogrammen als Platzhalter dienen kann.
Das Format ist allerdings in der Praxis kaum mehr anzutreffen, da es von JPG abgelöst
wurde.
1.2.6 TIFF
Abkürzung von Tagged Image File Format.
Das TIFF-Format ist ein qualitativ hochwertiges Format, das die Dateigröße Ihrer Bilder mit
Hilfe der LZW-Kompression (Lempel-Ziv-Welch-Algorithmus) verlustfrei reduzieren kann. Es
speichert Alphakanäle und Ebenen. Das TIFF-Format unterstützt sowohl den RGB- als auch
den CMYK-Farbmodus. Dieses Format wurde häufig für hochaufgelöste Bilder im Druckbereich verwendet, ist aber aufgrund der hohen Datenmenge, die das Format erzeugt, großteils
von JPG abgelöst worden. Desweiteren kommt es noch beim Scannen zum Einsatz, weil die
Pixel, genauso wie beim Scan-Abtastraster, in dem Format zeilenweise angeordnet werden.
TIFF Vor- und Nachteile
➤ Verlustbehaftetes und verlustfreies Komprimieren
➤ Ebenen
➤ 16-Bit-Alphakanal, CMYK
➤ Hohe Auflösung
➤ Ausgezeichnete Bildqualität
➤ Unterstützt RGB und CMYK.
Tabelle 1.7 TIFF Vor- und Nachteile
➤ Kein webtaugliches Format
➤ Sehr große Dateien.
1.3 Farbmodelle
27
Einsatzbereiche von TIFF
Für den Datenaustausch, beim Scannen, manchmal noch in der Druckvorstufe, zum Archivieren, für große Kartenbilder, Luftbilder (GeoTIFF).
1.2.7 PSD
Der Vollständigkeit halber sei auch das Adobe Photoshop-Dateiformat erwähnt, das natürlich
– genauso wie XCF für GIMP – alle in Photoshop erstellten Elemente speichert, wie Ebenen,
Pfade, Transparenzen, und alle vorhandenen Farbräume unterstützt.
Sie können PSD-Dateien in GIMP öffnen! Nicht jedoch XCF in Photoshop.
1.3 Farbmodelle
Zu guter Letzt streifen wir in dieser Lektion noch das Thema Farbtheorie. Denn die Darstellung
von Farben hängt direkt vom gewählten Ausgabemedium ab. Farben auf einem Computermonitor (wie etwa auf einer Webseite) werden auf andere Weise erzeugt als Farben, die auf Papier
gedruckt werden.
Abhängig vom jeweiligen Ausgabemedium werden also unterschiedliche Methoden zur Farbdarstellung benutzt. Diese Methoden werden als Farbmodelle oder Farbmodi bezeichnet.
1.3.1 Das RGB-Farbmodell
In diesem Farbmodell werden alle Farben aus den drei Grundfarben Rot, Grün und Blau
gemischt. Man spricht deshalb vom RGB-Farbmodell. Dieses Farbmodell ist das gängigste,
denn es wird nicht nur von Monitoren verwendet, sondern auch von Projektoren oder Fernsehschirmen. Die drei Grundfarben Rot, Grün und Blau werden direkt durch Lichtquellen
erzeugt, es handelt sich also um Lichtfarben.
Durch Mischung dieser drei Grundfarben zu unterschiedlichen Anteilen können mehr Farben
dargestellt werden, als das menschliche Auge wahrnehmen kann, umgekehrt jedoch umfasst
es nicht alle wahrnehmbaren Farben.
Wenn alle Grundfarben bei voller Leuchtkraft übereinanderstrahlen, addieren sie sich zu Weiß.
Der RGB-Farbraum wird deshalb als additives Farbmodell bezeichnet. Das völlige Fehlen aller
drei Grundfarben (= alle Lichtquellen sind ausgeschaltet) ergibt demnach Schwarz. In der Bildbearbeitung wird jede dieser drei Grundfarben auch als Farbkanal bezeichnet. Jedem dieser
Farbkanäle stehen standardmäßig 8 Bit zur Verfügung. Jede Grundfarbe kann zu 256 unterschiedlichen Anteilen abgemischt werden, von 0 (= keine Farbe) bis 255 (= höchstmöglicher
Farbanteil). 2 Insgesamt stehen im RGB-Farbraum mit seinen 3 Farbkanälen Rot, Grün und Blau
also 256 × 256 × 256 Farben zur Verfügung, das sind fast 16,8 Millionen unterschiedliche Farbnuancen.
2. Warum 256 Farben? 1 Bit kann zwei unterschiedliche Zustände annehmen, aus und an. Bei 8 Bit pro Farbkanal
rechnet man also: 2 hoch 8 = 256.
28
1 Grundlagen der Bildbearbeitung
Abb. 1.10 An der Grafik erkennen Sie schön, welche Farben bei Überschneidungen der drei Kanäle entstehen. Das
Weiß in der Mitte zeigt deutlich, was passiert, wenn alle drei Farbkanäle übereinander liegen. Quelle:
commons.wikimedia.org/wiki/File:RGB.jpg Autor: Ntozis at Greek Wikipedia
Beispiele für RGB-Farben
Farbe
RGB-Wert
reines Rot
R = 255, G = 0, B = 0
reines Grün
R = 0, G = 255, B = 0
reines Blau
R = 0, G = 0, B = 255
reines Weiß
R = 255, G = 255, B = 255
reines Schwarz
R = 0, G = 0, B = 0
Orange
R = 255, G = 110, B = 0
Tabelle 1.8 Beispiele für RGB-Farben
Vergeben Sie für alle drei Farbkanäle gleiche Werte, ist das Ergebnis immer ein Grauton.
Ausgenommen natürlich die höchsten bzw. niedrigsten Werte, die Weiß bzw. Schwarz
erzeugen.
Hexadezimale Werte
Im Webbereich werden RGB-Werte häufig nicht mit dezimalen Farbwerten, sondern in hexadezimaler Form wiedergegeben. Hierbei handelt es sich lediglich um eine alternative Schreibweise zu den RGB-Zahlenwerten. Das Hexadezimalsystem verwendet die Zahlenbasis 16, die
Werte werden mit Hilfe von Ziffern und Buchstaben definiert. So steht z. B. das Buchstabenpaar FF für die Zahl 255.
Die Definition von Farben nach dem Hexadezimalsystem erfolgt nach dem Schema #RRGGBB:
Nach der Raute # zur Kennzeichnung des Hexadezimalsystems folgt der sechsstellige HexWert der Farbe, wobei für jede der drei Grundfarben Rot, Grün und Blau zwei Stellen zur Verfügung stehen.
1.3 Farbmodelle
29
Beispiele für Hex-Werte
Farbe
hexadezimaler Wert
RGB-Wert
reines Rot
#FF0000
R = 255, G = 0, B = 0
reines Grün
#00FF00
R = 0, G = 255, B = 0
reines Blau
#0000FF
R = 0, G = 0, B = 255
reines Weiß
#FFFFFF
R = 255, G = 255, B = 255
reines Schwarz
#000000
R = 0, G = 0, B = 0
Orange
#FF6E00
R = 255, G = 110, B = 0
Tabelle 1.9 Beispiele für Hex-Werte
Ein paar Tipps und Hinweise zu den Hexadezimalwerten
➤ Es macht keinen Unterschied, ob Sie die Buchstaben in den hexadezimalen Angaben
groß- oder kleinschreiben. Also: #FF0033 = #ff0033.
➤ Häufig sieht man auch nur dreistellige Hex-Werte: Das ist dann möglich, wenn die
sechs Stellen pro Paar jeweils die gleichen Werte haben. Zum Beispiel kann #FF0033
auch als #F03 geschrieben werden. Dies kann auch so im GIMP-Farbauswahldialog
eingegeben werden (dazu später dann mehr). Beim folgenden Wert für Orange ist
demnach keine Abkürzung möglich: #FF3000.
➤ Bei Angaben in CSS zur Gestaltung von Webseiten leiten Sie den Hex-Wert immer mit
# ein. Die Raute benötigen Sie allerdings nicht im GIMP-Farbauswahldialog.
Websichere Farben
Im Zusammenhang mit Webdesign wird auch immer noch gelegentlich der Begriff »websichere Farben« genannt. Dabei handelt es sich keineswegs etwa um ein weiteres Farbmodell,
sondern man versteht darunter lediglich eine bestimmte Untermenge des RGB-Farbraums.
Noch vor gar nicht allzu langer Zeit konnten Computermonitore lediglich 256 Farben darstellen. Welche Farben das genau waren, war jedoch durch das Betriebssystem vorgegeben und
von System zu System unterschiedlich. Eine Überschneidung zwischen diesen unterschiedlichen Systemfarben gab es de facto nur für 216 Farben.
Was passierte aber, wenn Sie auf Ihren Webseiten eine Farbe benutzten, die auf einem solchen
System nicht dargestellt werden konnte? Das System hat diese Farbe gerastert, d. h. es hat versucht, die Farbe zu simulieren, indem es aus den vorhandenen, darstellbaren Farben einzelne
Punkte dicht nebeneinander setzte. Diesen Vorgang des Rasterns nennt man auch Dithering.
Zur Vermeidung dieses unschönen Effekts ging man dazu über, auf Webseiten nur die 216 Farben zu verwenden, die auf allen Systemen ohne Dithering dargestellt werden konnten. Diese
Farben bezeichnet man deshalb bis heute als »websichere Farben«, Web Safe Colours, Browser
30
1 Grundlagen der Bildbearbeitung
Safe Palette oder Web-Farbpalette. In Photoshop und den meisten anderen Grafikprogrammen steht diese Farbpalette gesondert zur Verfügung.
Es gibt eine einfache Regel, mit der man websichere Farben erkennen und definieren kann: Es
sind alle Farben, die sich aus einer Kombination der Hexadezimalwerte 00, 33, 66, 99, CC und
FF ergeben.
Da moderne Computersysteme jedoch alle 16,8 Millionen Farben darstellen können, spielen die websicheren Farben im modernen Webdesign keine Rolle mehr, und Sie können sie
in der Praxis getrost ignorieren.
1.3.2 Das CMYK-Farbmodell
Im Offset- bzw. im professionellen Digitaldruck sieht die Sache etwas anders aus. Zwar werden
auch hier drei Grundfarben zu unterschiedlichen Anteilen abgemischt. Die drei Grundfarben
bei diesem Farbmodell sind Cyan, Magenta und Gelb (im engl. Yellow, daher das Y; woher das
K kommt, verrate ich im nächsten Absatz.). Doch handelt es sich hier nicht um Lichtfarben,
sondern um Farbpigmente, die auf Papier aufgebracht werden. Die sichtbaren Farben sind
dabei – wie überall in der Natur – diejenigen, die vom Untergrund (dem Papier) nicht absorbiert werden, die also »übrig bleiben«. Man spricht deshalb von einem subtraktiven Farbmodell. Das völlige Fehlen aller Grundfarben ergibt hier (Papier-)Weiß, alle Grundfarben übereinandergedruckt ergeben (theoretisch) Schwarz. Vereinfacht kann dieses Farbmodell als komplementär zum RGB-Farbmodell gesehen werden.
Da die drei Farben Cyan, Magenta und Gelb zusammen jedoch nur theoretisch Schwarz ergeben, in der Praxis jedoch – abhängig von der Beschaffenheit des Papiers, der Qualität der Pigmente usw. – höchstens ein schmutziges Braun, wird als vierte Farbe noch echtes Schwarz beigemischt. Dieses Schwarz wird als Key (engl. Schlüsselfarbe) bezeichnet, daher also das K am
Ende von CMYK. CMYK-Farben werden häufig auch als Prozessfarben bezeichnet. Im CMYKFarbmodell werden die Farbwerte mittels Prozentwerten angegeben, wobei 100% vollen Farbauftrag bedeutet, 0% keine Farbe.
Abb. 1.11 Die CMYK-Farben
Quelle: www.flickr.com/photos/lkbanker/5576466844/sizes/s/in/photostream/
1.3 Farbmodelle
31
Beispiele für CMYK-Farben
Farbe
CMYK-Wert
reines Cyan
C = 100, M = 0, Y = 0, K = 0
reines Magenta
C = 0, M = 100, Y = 0, K = 0
reines Gelb
C = 0, M = 0, Y = 100, K = 0
reines Weiß
C = 0, M = 0, Y = 0, K = 0
reines Schwarz
C = 0, M = 0, Y = 0, K = 100
Orange
C = 0, M = 60, Y = 77, K = 0
Tabelle 1.10 Beispiele für CMYK-Farben
Um also ein Foto für den Offset- oder auch hochwertigen Digitaldruck korrekt aufzubereiten,
muss es nach der Bearbeitung in den CMYK-Farbraum konvertiert werden.3
Wenn nun später Ihr Bild im Fotobuch-Labor in CMYK von anderen umgewandelt wird, sollten
Sie zumindest wissen, was passiert: Die Umwandlung wird als Separation bezeichnet. Der
CMYK-Farbraum ist jedoch kleiner als der RGB-Farbraum, d. h. es können weniger Farben
gedruckt als am Bildschirm dargestellt werden. Und hier sind es gerade die brilliantesten Farben, die bei der Konvertierung leiden. Daher gibt es in GIMP einen eigenen Ansichtsfilter
Abschnitt 4.3.1, mit dem CMYK simuliert wird und Sie prüfen können, ob das Bild noch Ihren
Qualitätskriterien entspricht.
Abb. 1.12 So merkt man sich das Wort besonders leicht!
:-)
Quelle: www.flickr.com/photos/conbon/2764224301/
sizes/q/in/photostream/
3. Dies gilt nicht für den Ausdruck auf Tintenstrahldruckern. Diese Drucker sind für die Belange von Heimanwendern ausgelegt, die aus Office-Programmen u. ä. drucken. Solche Programme unterstützen den CMYK-Farbraum nicht einmal. Zwar nutzen auch Tintenstrahldrucker meist CMYK-Tinten, die Konvertierung findet jedoch
erst in der Druckersoftware statt.
Auch bei der Aufbereitung von Fotos für Fotobücher und dgl. brauchen Sie keine Umwandlung in CMYK vorzunehmen, sondern können in RGB bleiben. Die Fotobuch-Anbieter raten sogar davon ab, weil der gesamte Produktionsprozess auf RGB-Bilder optimiert ist – und sie die Umwandlung selbst vornehmen. Um ganz sicher zu
gehen, lesen Sie die Hilfe-Seiten des Anbieters oder fragen Sie nach.