Das digitale Bild 2b – Farbmodi, Farbmodelle, Pixel- und Vektorgrafiken

Farbmodi

Photoshop kennt mehrere Farbmodi (Bild / Modus). Die gängigsten sind:

Farbmodus Merkmale
RGB Rot: 8 Bit – 256 Abstufungen
Grün: 8 Bit – 256 Abst.
Blau: 8 Bit – 256 Abst.
Summe: 24 Bit – über 16 Millionen Farben
Indizierte Farbe Farbe
Graustufen 256 Graustufen
Bitmap Schwarz und Weiß

Farbmodelle

RGB-Farbmodell

Die Darstellung von Farben am Bildschirm erfolgt über das RGB-Farbmodell. Digitalkameras und Scanner arbeiten ebenso nach dem RGB-Farbmodell. Die Grundfarben dieses Modells sind Rot, Grün und Blau.

RGB-Farbmodell

Jede Farbe wird aus verschieden hohen Anteilen der drei Grundfarben Rot, Grün und Blau zusammengesetzt. Die Anteile der Grundfarben an der Mischfarbe werden durch einen Wert zwischen 0 und 255 oder eine Prozentangabe festgelegt.

Rot, Grün und Blau werden als additive Primärfarben bezeichnet, da sie nicht durch Mischen anderer Farbtöne erzeugt werden können. Mischt man zwei additative Primärfarben, so wird jeweils eine Sekundärfarbe (Cyan, Magenta oder Yellow) erzeugt.

Rot + Grün: Gelb
Grün + Blau: Cyan
Rot + Blau: Magenta

CMYK-Farbmodell

CMYK-Farben

Das CMYK-Farbsystem besteht aus den Farben Cyan (einem hellen, grünlichen Blau), Magenta (ein violettes Rot), Gelb (helles, bis mittleres Gelb) und Schwarz (K: das K leitet sich von Keyplate, Schlüsselplatte ab, das ist die schwarz druckende Platte, an der die drei farbigen Platten ausgerichtet werden). Das schwarz soll die Druckqualität des Farbmodells erhöhen. Theoretisch ergibt zwar die Mischung von CMY eine schwarze Farbe, die ist jedoch in der Praxis kein reines Schwarz, da die drei Grundfarben meist nicht ganz rein sind.

Dieses Modell wird beim Druck verwendet. Cyan, Magenta und Yellow sind subtraktive Primärfarben.  Der Druck nach diesem Modell wird als Vierfarbdruck bezeichnet.

Aus den Grundfarben Cyan, Magenta und Yellow werden alle Farben gemischt:

CMYK-Farbmodell

Cyan + Magenta: Blau
Magenta + Yellow: Rot
Cyan + Yellow: Grün
Cyan + Magenta + Yellow: Schwarz

Farbräume

[Farbmodelle unterschieden sich auch im Umfang der darstellbaren Farben (Farbraum). Der Farbraum des CMYK-Modells ist kleiner als der des RGB-Modells. Besonders im grünen und blauen/violetten Farbbereich sind sind im RGB-Modell mehr Farbabstufungen möglich. Das CMYK-Farbmodell tut sich in diesen Bereichen schwer, die Farben korrekt darzustellen, bzw. kann dies nicht. Daher können Farben am Bildschirm brilliant aussehen, am Ausdruck fehlt diese Brillianz. ]

Farbräume

Übung:

  • Lege ein leeres Bild mit der Größe von 800 x 600 px im RGB-Modus an.
  • Wähle im Farbwähler reines Blau aus (R: 0, G: 0, B: 255)
  • Wähle das Füllwerkzeug aus und klicke ins Bild, sodass es blau eingefärbt wird.
  • Stelle den Bild-Modus auf CMYK (Bild / Modus / CMYK-Farbe) und achte auf die Änderungen!

Vektorgrafiken und Pixelgrafiken

[Innerhalb der Computergrafik wird zwischen zwei Gruppen von Grafikformaten unterschieden: Vektorgrafiken und Pixelgrafiken.

Vektorgrafiken

Bei Vektorgrafiken werden mit Hilfe von Punkten in einem Koordinatensystem Linien, Kurven (so genannte Bezierkurven), Objekte und Schrift durch mathematische Funktionen definiert.

Vektorgrafiken sind verlustfrei skalierbar; man kann sie vergrößeren bzw. verkleinern, ohne dass die Qualität leidet. Bei Größenänderungen berechnet das Programm die Objekte neu.

Vgl. http://www.on-design.de/tutor/ebv/wissen.html

Pixelgrafiken

Ein Pixel (picture element, Bildpunkt) ist die kleinste Einheit eines als Bitmap gespeicherten Bildes. Pixelbilder bestehen aus einer festen Anzahl von quadratischen Bildpunkten, die rasterförmig angeordnet sind.
Digitaler Kamera und Scanner liefern Pixelbilder. ]




Das digitale Bild 2a – Farbe, Farbtiefe und Dateiformate

Für Pixelbilder gibt es eine Reihe von Dateiformaten (Speicherformaten), die sich in der Farbtiefe, der möglichen Verwendung u. a. unterscheiden. Häufige Dateiformate sind die folgenden:

Format Farben/Farbtiefe Weitere Eigenschaften und Verwendung
GIF 256/8 bit vektorbasierende Vorlagen, große gleichfarbige Flächen (Texte, Cartoons, Logos, Vektorformen), Animationen, Transparenz, Anzeige im Webbrowser
JPEG 16,7 Mio/24 bit fotorealistische Bilder, Fotos, Farbverläufe, Komprimierung mit kalkulierbarem Detailverlust, Anzeige im Webbrowser, keine Transparenz
PNG 4,3 Mia/32 bit Alternative zu GIF und JPEG, MM Fireworks-eigenes Format, Webbrowser, Transparenz
TIF 4,3 Mia/32 bit Druck, Ebenen, verlustfreie Komprimierung, Transparenz
PSD 4,3 Mia/32 bit Druck, Ebenen, Montagen, immer ohne Verlust, Adobe photoshopeigenes Format, Transparenz

Speichere das gleiche Foto im TIFF-Format und im JPG-Format in höchster Qualität. Vergleiche die Dateigrößen!

Übungen

  1. Speichere ein Foto mit der Funktion Für Web speichern. Verändere im Dialogfenster die Qualität und achte, wie sich die Vorschau des Bildes und die Dateigröße ändert!
  2. Transparenz: Mache einen Bereich eines Bildes transparent (durchsichtig):
    1. Öffne das Bild tor.jpg
    2. Klicke in der Ebenen-Palette (rechts) zweimal auf Hintergrund.
    3. Im aufgehenden Dialogfenster gib als Name für die Ebene “tor” ein.
    4. Wähle in der Werkzeugleiste die Auswahlellipse.
    5. Ziehe mit gehaltener Umschalt-Taste an einer beliebigen Stelle einen Kreis auf (beliebige Größe).
    6. Schneide mit der Entfernen-Taste den markierten Bereich aus. Das entstandene “Loch” im Bild ist jetzt transparent (durchsichtig). Zeichen dafür ist das Karo.
      Wenn Du das Bild im TIFF-Format speicherst, bleibt die Transparenz, wenn Du es im JPG-Format speicherst, geht die Transparenz verloren (das Loch ist weiß und nicht mehr durchsichtig).
    7. Öffne das Bild tor.jpg
      Es ist 1080 x 1620 px groß. Die Auflösung ist auf 300 ppi eingestellt.
    8. Öffne das Bild ertl.jpg
      Es ist 2640 x 1980 px groß. Die Auflösung beträgt 72 ppi.
      Damit der Kopf durch das Loch schauen kann, muß die Auflösung auf 300 ppi eingestellt werden, das Bild beschnitten werden und dann noch verkleinert werden.
    9. Öffne das Bildgröße-Dialogfenster.
      Entferne den Haken bei Neu berechnen. Bestätige mit OK.
    10. Öffne wieder das Bildgröße-Dialogfenster.
      Wähle in der Werkzeugleiste das Auswahl-Rechteck und ziehe bei gehaltener Umschalt-Taste mit der Maus einen Rahmen auf, sodass der Kopf und etwas von der Umgebung in der Auswahl ist.
      Beschneide das Bild: Bild / Bild freistellen
    11. Öffne nochmals das Bildgröße-Dialogfenster.
      Setze den Haken bei Neu berechnen wieder.
      Gib bei Breite 400 px ein.
      Speichere das Bild unter dem Namen ertl_klein.jpg
    12. Wechsle zum Bild tor.jpg
      Platziere das Bild ertl_klein.jpg: Datei / Platzieren (navigiere zum Bild ertl_klein.jpg, wähle es aus und platziere es)
    13. Schiebe das kleine Bild an die transparente Stelle.
    14. Ziehe die Ebene tor in der Ebenen-Palette an erste Stelle (das Bild tor.jpg ist jetzt vorne, das Bild ertl_klein.jpg ist dahinter, schaut jedoch durch das transparente Loch.
    15. Speichere die Arbeit unter dem Namen torblick.tif (TIFF-Format).
  3. Speichere ein Foto im GIF-Format. Verändert sich die Qualität?
    Speichere ein Foto im GIF-Format und reduziere die Anzahl der verwendeten Farben auf 16.

Die Farbtiefe wird in bit angegeben und gibt die Anzahl der maximal darstellbaren Farben an:

Farbtiefe (in bit) Berechnung Maximal darstellbare Farben
1 bit 2 (schwarz und weiß)
8 bit 2⁸ 256 Farben
16 bit 2¹⁶ 65.536 Farben
24 bit 2²⁴ über 16 Millionen Farben
32 bit 2³² knapp 4,3 Milliarden Farben

Komprimierung mit kontrolliertem Detailverlust

Die Formate GIF, JPEG und PNG können in Webbrowsern dargestellt werden (sind webtauglich) und ermöglichen eine Komprimierung mit kontrolliertem Detailverlust. Bilder für das Internet sollen eine möglichst geringe Dateigröße aufweisen. Durch die Komprimierung mit kontrollierten Detailverlust kann ein Kompromiss zwischen Dateigröße und Detailgenauigkeit erreicht werden.

„Speichern für Web“ im Programm Photoshop (Elements) ermöglicht die Einstellung der Qualität. Geringere Qualität ergibt kleinere Dateigrößen. Die Qualität kann mit Hilfe des Vorschaubildes kontrolliert werden.

Die Farben

Die einfallende Belichtung erzeugt auf dem CCD-Chip einer digitalen Kamera oder eines Scanners elektrische Spannungen. Die Spannung ist abhängig von der Lichtmenge. Je mehr Licht einfällt, um so größer ist
die elektrische Spannung. Über den nachgeschalteten A/D-Wandler wird die Spannung in digital erfassbare Werte umgewandelt. Daraus ergeben sich 256 Abstufungen je Farbe von reinem Rot bzw. Grün bzw. Blau zu Schwarz (Schwarz = am Bildschirm keine Farbe). Die 256 Abstufungen sind für das Auge nicht erkennbar. Wir sehen einen harmonischen Farbverlauf.

RGB Farbabstufungen

Rot: 8 bit = 256 Stufen
Blau: 8 bit = 256 Stufen
Grün: 8 bit = 256 Stufen

Gesamt: 24 bit = 16,777 Mio Farben

Insgesamt ergeben sich 24 Bit Farbtiefe für eine beliebige Farbe. 1 Bit ist die kleinste Recheneinheit des Computers und kann nur „Schwarz oder Weiß“ darstellen. Mit den 8 Bits pro Farbe können 256 verschieden Abstufungen dargestellt werden. Bei drei Farben macht das 24 Bit oder auch 224, vereinfacht ausgedrückt: 16,777 Millionen Farben.

Eine Bilddarstellung mit 24 Bit Farbtiefe wird vom menschlichen Auge als harmonisch wahrgenommen, obwohl die Wahrnehmung des menschlichen Auges in der natürlichen Umgebung noch viel feiner ist.