teach.rothe.io

Appearance

Grafikformate ​

Raster- und Vektorgrafik ​

Bei der Speicherung von Grafiken und Bildern im Computer wird zwischen zwei grundlegenden Darstellungsarten unterschieden: der Raster- und der Vektorgrafik.

Smiley als Rastergrafik
Smiley als Vektorgrafik

Rastergrafik ​

Bei einer Rastergrafik wird das Bild in viele kleine Quadrate unterteilt. Jedes Quadrat wird mit genau einer Farbe eingefärbt. Diese Quadrate werden Pixel genannt.

Die Anzahl Pixel, welche für eine Rastergrafik verwendet werden, wie als Auflösung des Bildes bezeichnet. Sie berechnet sich aus der Breite bb und Höhe hh der Grafik in Pixel.

Eine Rastergrafik mit hoher Auflösung hat eine bessere Qualität, benötigt allerdings auch mehr Speicherplatz. Den theoretische Speicherbedarf einer Rastergrafik hängt von der Anzahl Pixel und dem verwendeten Farbmodell ab.

Rastergrafiken werden in erster Linie zur Speicherung von Fotos verwendet.

Vektorgrafik ​

Bei einer Vektorgrafik wird das darzustellende Bild aus geometrischen Objekten wie Linien, Kreise oder Rechtecken zusammengesetzt. Die einzelnen Objekte können einfarbig sein oder einen Farbverlauf haben, sowie teilweise transparent sein.

Vektorgrafiken haben zwei grosse Vorteile gegenüber Rastergrafiken. Erstens benötigen sie normalerweise deutlich weniger Speicherplatz als eine entsprechende Pixelgrafik, da mit einem Objekt die Farbe von vielen Pixeln festgelegt wird.

Zweitens können Vektorgrafiken ohne Qualitätseinbusse beliebig vergrössert und verkleinert werden.

Vektorgrafiken werden deshalb insbesondere für folgende Anwendungen eingesetzt:

  • Logos
  • Illustrationen
  • Symbole, Icons
  • Schriftarten
  • Strassen- und Landkarten

Farbdarstellung ​

Colour Matcher

Farbkanäle ​

Für die digitale Verarbeitung müssen Farben in Zahlen umgewandelt werden. Das geschieht, indem die Farben in verschiedene Komponenten, sogenannte Farbkanäle aufgeteilt werden. Pro Pixel kann so die Intensität je Farbkanal als Zahl bestimmt werden.

Die zwei wichtigsten Ansätze, wie diese Aufteilung in verschiedene Kanäle erfolgt, werden unten vorgestellt.

RGB-Farbmodell ​

Das RGB-Farbmodell basiert auf der Funktionsweise des menschlichen Auges. Dieses nimmt Farben mit Hilfe von drei Arten von sogenannten Zäpfchen wahr, die für Licht unterschiedlicher Wellenlängen empfindlich sind. So werden vom Menschen die Grundfarben Rot, Grün und Blau wahrgenommen.

Farbwahrnehmung des menschlichen Auges [1]

Diese Eigenschaft des Auges wird bei der additiven Farbdarstellung ausgenutzt, indem sich überlagernde Lichtquellen in den drei Grundfarben Rot, Grün und Blau verwendet werden. Durch die Regulierung der Helligkeit der einzelnen Lichtquellen können sämtliche Farben erzeugt werden.

Dieses Farbmodell kommt überall dort zum Einsatz, wo Licht verwendet wird, um ein Bild zu erzeugen, insbesondere bei Bildschirmen und Videoprojektoren («Beamer»). Die Farben auf einem Bildschirm werden erzeugt, indem drei nahe beieinanderliegende Leuchtdioden in den Farben Rot, Grün und Blau in unterschiedlicher Helligkeit leuchten. Ein solches Trio von Leuchtdioden wird Pixel genannt.

additives Farbmodell [2]
Pixel auf einem Bildschirm [3]

Umgekehrt kann man bei einem Bild die Rot-, Grün- und Blauanteile jedes Bildpunkts bestimmen. Man sagt, dass man das Bild in Rot-, Grün- und Blaukanal aufteilt:

Aufteilung in Rot-, Grün- und Blaukanal

Im entsprechenden RGB-Farbsystem wird eine Farbe definiert, indem die Helligkeit der Rot-, Grün- und Blauanteils durch eine Zahl zwischen 0 und 255, also ein Byte ausgedrückt wird.

Um eine Farbe binär darzustellen, werden die Werte für Rot, Grün und Blau nacheinander aufgeschrieben. Häufig wird dazu die hexadezimale Schreibweise verwendet. So hat beispielsweise die Farbe mit den RGB-Werten 255, 220, 150 und die Darstellung #FFDC96.

Schreibweisen:
html: #FFFFFF, rgb(255, 255, 255)
python: (255, 255, 255)

RGBA-Farbmodell ​

Für das RGBA-Farbmodell wird das RGB-Farbmodell um einen Kanal erweitert. Dieser heisst Alphakanal und drückt aus, wie stark die Deckkraft der Farbe ist. Ein Wert von 0 bedeutet gar keine Deckkraft und somit volle Transparenz ein maximaler Wert bedeutet maximale Deckkraft und somit keine Transparenz.

Schreibweisen:
html: rgb(255, 255, 255, 1)

CMYK-Farbmodell ​

Das CMYK-Farbmodell basiert auf der Weise, wie Gegenstände farbig erscheinen. Ein Gegenstand wird üblicherweise mit weissem Licht, also Licht verschiedener Wellenlängen (Rot, Grün und Blau) angestrahlt. Beispielsweise erscheint ein gelber Gegenstand deshalb in dieser Farbe, weil er blaues Licht absorbiert und rotes und grünes Licht reflektiert.

subtraktives Farbmodell [4]
Tintenpatronen für Farbdrucker [5]

Bei der subtraktiven Farbdarstellung werden auf weissem Material die drei Grundfarben Cyan, Magenta (Fuchsia) und Yellow (Gelb) verwendet, welche rotes, grünes bzw. blaues Licht absorbieren. Zusätzlich wird schwarze Farbe (Key-Kanal) verwendet, welche alles Licht absorbiert.

Aufteilung in Cyan-, Magenta-, Yellow- und Key-Kanal

Dieses Farbmodell kommt beim Drucken zum Einsatz.

  1. Bild: Sgbeer, Quelle: Wikimedia Commons ↩︎

  2. Bild: 10binary, Quelle: Openclipart ↩︎

  3. Bild: Kallerna, Quelle:Wikimedia Commons ↩︎

  4. Quelle: Wikimedia Commons ↩︎

  5. Bild: Raimond Spekking, Quelle: Wikimedia Commons ↩︎