Digitale Medien 6. FARBE, FARBMODELLE,ARTEN VON GRAPHIKEN

Transkript

1 Digitale Medien 6. FARBE, FARBMODELLE,ARTEN VON GRAPHIKEN

2 Es ist ein Grundproblem der Menschen: Wir glauben, was wir sehen Frank Keil (Yale University)

3 Wenn Leute zum Beispiel einen Fernsehbericht betrachten, bei dem die Aussagen von Bild und Text einander widersprechen, denken sie, die Bilder seien wahr und die Texte falsch. Thomas Knieper (Uni München) Der Grund dafür lautet: Das Auge ist der wichtigste Sinn des Menschen. Ihm vertraut er mehr als sämtlichen anderen Wahrnehmungen

4 Wir sind Augentiere Ernst Pöppel, (Universität München) Diese Vormacht des Sehsinns drückt sich bis heute darin aus, dass die Hälfte des menschlichen Hirns für die Verarbeitung visueller Reize zuständig ist.

5 Bildretusche

6 Bildretusche

7 html Bildretusche

8 Wer die Bilder beherrscht, beherrscht die Köpfe der Menschen. Bill Gates

9 Bildretusche

10 Bildretusche

11 Bildmanipulation

12 Die Macht der Bilder

13 Wie Bilder unsere Wahrnehmung verzerren Konstruktion von Realität

14 Überblick heutige Vorlesung Raster & Vektorgraphiken 2. Farbe 3. Farbmodelle 4. Ausgabegeräte 5. Farbwahrnehmung 6. Dateiformate für Graphiken

15 Farbe Definition 15 Farbe ist diejenige Gesichtsempfindung eines dem Auge des Menschen strukturlos erscheinenden Teiles des Gesichtsfeldes, durch die sich dieser Teil bei einäugiger Beobachtung mit unbewegtem Auge von einem gleichzeitig gesehenen, ebenfalls strukturlosen angrenzenden Bezirk allein unterscheiden kann. (Definition nach DIN 5033) Farbe ist eine subjektive visuelle Wahrnehmung, die durch sichtbares Licht von bestimmten Wellenlängen im menschlichen Auge hervorgerufen wird. Die Farbe wird durch das individuelle Empfinden des menschlichen Auges bestimmt ist und subjektiv von der Augenempfindlichkeit abhängig. color.html

16 Licht und Farbe Wahrgenommene Farbe eines Objektes ist abhängig von: Lichteinfall, Reflexions und Transmissionseigenschaften Farbe umgebender Objekte, Visueller Wahrnehmung (Unterschiedlich bei jungen und alten Menschen, Wahrnehmungsstörungen) Grundlagen: Physik (Optik, Lichtausbreitung), Physiologie und Psychologie 16

17 Licht und Farbe 17 Was ist Licht? o sichtbarer Teil des elektromagnetischen Spektrums o Wellenlängenbereich von 380 bis 780 nm (bei Tieren unterschiedlich) o Frequenz des sichtbaren Lichtes entsprechend: ~1015 Hz o Licht breitet sich sehr schnell in alle Richtungen aus. wird an Oberflächen reflektiert, teilweise gebrochen von strahlenden Oberflächen emittiert. Zusammenhang Farbe und Licht: o Farbe: Wahrnehmung der spektralen Zusammensetzung des Lichtes (welcher Anteil des einfallenden Lichtes hat welche Wellenlänge)

18 Achromatisches Licht o keine Farben o Lichtmenge (Intensität / Leuchtkraft / Helligkeit) Licht und Farbe 18 Chromatisches Licht o Farbe o Farbton, Sättigung, Helligkeit

19 Licht und Farbe 19 Farbe eines Objektes wird durch zwei Spektren bestimmt: o die Reflexionscharakteristik der Oberfläche des Objektes o das einfallende Licht Objekte sehen bei unterschiedlicher Beleuchtung unterschiedlich aus Quelle: Stone A Field Guide to Digital Color

20 Farbwahrnehmung des Menschen Das menschliche Auge besitzt lichtsensitive Zellen in der Retina: Stäbchen und Zapfen: o Stäbchen als Sensoren für Helligkeit, o Zapfen als Sensoren für Farbe. Höchste Dichte in der Fovea centralis (Durchmesser: 4 μm) 20

21 Farbwahrnehmung des Menschen Tristimulus-Theorie Bild wird auf Netzhaut projiziert Photorezeptorzellen wandeln Lichtimpulse in elektrische Impulse um Stäbchenzellen: o Hell Dunkel o 498 nm Zapfenzellen o Farbe o 3 Empfindlichkeiten 21

22 Farbwahrnehmung des Menschen Tristimulus-Theorie Zapfen haben unterschideliche Sensitivitäten für Rot, Grün und Blau. Alle anderen sichtbaren Farben können aus diesen drei Grundfarben gemischt werden 22 Quelle:

23 Farbkanäle Veranschaulichung Aufsplittung eines Bildes in R, G und B Original Rot Grün Blau

24 blau: grün : rot Farbwahrnehmung des Menschen Tristimulus-Theorie 24

27 Farbverarbeitung im Gehirn Aus drei Einzelsignalen für Rot(R), Grün(G) und Blau(B) wird Summensignal wir folgt gebildet: Summensignal aus Rot und Grün (R+G) Für Helligkeitswahrnehmung wichtig Differenzsignal aus Rot und Grün (R G) Für Farbtonunterscheidung wichtig Und einem Differenzsignal aus Gelb und Blau ((R+G) B) Für Farbtonunterscheidung wichtig

28 Anzahl wahrnehmbarer Farben Menschen können: 128 verschiedene Farbtöne 130 verschiedene Farbsättigungen 16 verschiedene Helligkeitswerte im blauen Bereich 26 verschiedene Helligkeitswerte im gelben Bereich unterscheiden Insgesamt: verschiedene Farben vergleich: Monitor: 16.7 Millionen

29 Rastergraphik 29 Beschreibung eines Bildes in Form einer matrix/rasterförmigen Anordnung von Bildpunkten (Pixel), denen jeweils eine Farbe zugeordnet ist Merkmale: Breite, Höhe [Pixel] 29 Farbtiefe [Bit, Byte, Anzahl Farben]

30 Was ist ein Pixel? pictureelement unteilbare Einheit eines Rasterbildes Gitterförmig angeordnet in Zeilen und Spalten Alle Pixel sind gleich große quadratische Bereiche. Pixel bedecken ein Bild vollständig (keine Lücken) und überlappen nicht. 30

31 Pixel und Farbe Farbtiefe (Anzahl der Farben) wird durch Graphikspeicher bestimmt erster Ansatz: jedes Pixel wird durch ein Bit repräsentiert Pixel ist entweder da oder nicht zweifarbige Darstellung z.b. schwarz/weiß Raster

32 Pixel und Farbe zweiter Ansatz: Erhöhung des Speichers pro Pixel jedes Pixel wird durch 1 Byte repräsentiert 2 8 =256 mögliche Farbwerte 32

33 Pixel und Farbe dritter Ansatz: True Color Trennung in Rot, Grün, Blau Farbkanal Verwendung von 1 Byte pro Farbe 256 mögliche Farbabstufungen 256x256x256= Farbwerte modere Scanner arbeiten mit 48Bit Farbtiefe = 2 Byte pro Farbkanal 2 16 =65536 Abstufungen je Kanal x x = Farben 33

34 Vorteile: Pixelgraphiken: Vor- und Nachteile 34 Einfache Speicherung (einfache Anordnung der Elemente) Viele Verarbeitungsmöglichkeiten (Bildverarbeitung) Nachteile: Diskretisierung einer geometrischen Beschreibung erforderlich Probleme beim Vergrößern, Rotieren, allgemein Transformieren (Aliasing) Hoher Speicherplatzbedarf

35 Speicherung von Rasterbildern 35 Problem Speicherbedarf: geg.: heute übliche Bildschirmgröße 1280x1024 Pixel pro Pixel 3 Byte für Farbinformation 1280x1024x3 Byte = Byte geg. Digitalkamera: 12.8 MegaPixel: Canon 5D x3 Byte= 36 MByte Vergleich: CD max. 800MB 22 Bilder geg. Scanner mit 4800x9600 Punkten pro Zoll (dpi), 2Byte pro Farbkanal: 4800x9600x6= pro Quadratzoll (2.54cm x 2.54cm) 35

36 Farbmodell Definition: Farbmodelle legen eine Farbe über ein Tripel von drei Werten fest und definieren somit zugeordnete dreidimensionale Farbräume. Jeder Farbton kann als Vektor in diesem dreidimensionalen Farbraum formal eindeutig definiert werden. Verschiedene Farbmodelle: Allgemein: CIE, CIE L*a*b Hardwareorientiert: RGB, CMY(K), YUV, YIQ Perzeptionsorientiert: HLS, HSV rostock.de/einzel.asp?id=

37 CIE-Farbspezifikation 1931: Commission Internationale de l'eclairage Stellt die gesamten sichtbaren Farben eines Normbetrachters dar Experimentelle Bestimmung der Empfindlichkeit der Helligkeits und Farbsensoren Vergleich normierter monochromer Farben mit additiver Farbmischung dreier Emitter (x,y,z), Versuchspersonen justieren Stärke der Emitter Hufeisenförmig Wellenlänge außen Geschlossen durch Purpurlinie Alle Farben, die aus den Spektralfarben additiv gemischt werden können, liegen innerhalb dieser Fläche Menge aller Farben, die ein Gerät wiedergeben kann Gamut 37

38 Farbmodelle Hardwareorientierte Farbmodelle Motiviert durch die Charakteristika von Ausgabegeräten. Beispiele: (additiv) RGB und (subtraktiv) CMY Modell RGB: Additives Farbmodell, bei dem Farben als Linearkombination ihres Rot, Grün, Blau Anteils beschrieben werden. Genutzt für Ansteuerung von Monitoren. CMY: Subtraktives Farbmodell, bei dem Farben als Linearkombination ihres Cyan, Magenta, Yellow Anteils beschrieben werden. Genutzt für Ansteuerung von Druckern. Beim Druck: Hinzunahme von reinem Schwarz: CMYK 38

39 Farbmodelle Perzeptionsorientierte Farbmodelle: o Gleiche Abstände im Farbraum korrespondieren zu (etwa) gleichen Abständen in der Farbwahrnehmung. o Nutzung von physiologischen Größen: Farbton, sättigung, helligkeit Beispiele: HLS und HSV Modell Hardwareorientierte Modelle sind unerlässlich; perzeptionsorientierte für die Farbeingabe wünschenswert. 39

40 Farbmodelle RGB Benutzt für selbstleuchtende Objekte Beschreibt die Mischung verschiedener Wellenlängen des Lichts, um Farberscheinungen hervorzurufen Drei Grundfarben: o Rot R, Grün G und Blau B Additive Mischung : alle Grundfarben addieren sich zu Weiß Mischen (RGB ) um andere Farben zu erzeugen 40

41 RGB - standardisiert srgb Kooperation von HP und Microsoft o durch W3C, EXIF, Intel, Pantone, Corel und GIMP bestätigt o Für CRT Monitore entwickelt o Relativ eng gefasst, einige Farben, die auf Ausgabegeräten darstellbar sind werden von srgb nicht erfasst AdobeRGB: von Adobe entwickelt Ziel, die meisten CMYK Farben eines Farbdruckers unter der Verwendung eines RGB Arbeitsraumes auf einem Ausgabemedium, wie einem Bildschirm, darzustellen Eckpunkte des RGB Farbartdreicks können nicht willkürlich gewählt werden, sind durch die Verfügbarkeit von Leuchtstoff Kristallen definiert o 41 untrennbarer Zusammenhang zu den drei (Grund )Lichtfarben, die diese Leuchtstoffe erzeugen können.

42 Vergleich srgb und AdobeRGB

43 Farbmodelle CMY Gegenteil der additiven Farbmischung Erklärt die Farbmischung mit Tinten bzw Malfarben, die verschiedene Wellenlängen absorbieren und andere reflektieren Drei Grundfarben: Cyan C, Magenta M, and Yellow Y 43 Mischen CMY um andere Farben zu erzeugen

44 Farbmodelle CMY 44 Subtraktive Farben: Farben werden dadurch spezifiziert, wieviel von weiß subtrahiert wird, nicht dadurch, wieviel zu schwarz hinzugefügt wird G -R -R -B -B -R -G -B -G

45 Hue Farbton Saturation Sättigung Value Helligkeit perzeptionsorientiert Farbmodelle HSV intuitive Herangehensweise: o Auswahl einer Farbe o Bestimmung der Sättigung o Änderung der Helligkeit durch Hinzunahme von Weiß 45

46 Farbtemperatur Licht kann durch Wärme erzeugt werden sogenannte black body radiators emittieren Licht, dessen spektrale Zusammensetzung eine Funktion der Temperatur ist Beschreibung der Farbe durch die Temperatur 1200 K: Kerzenlicht 2800 K: Tungsten Lampe (Glühlampe), Sonnenauf / untergang 3000 K: Studio und Photolampen 5000 K: Blitzlicht, Tageslich. Standard für Photographie 6000 K: helle Mittagssonne 7000 K: leicht bedeckter Himmel 8000 K: dunstig K: wolkenverhangener Himmel 46

47 Andere Farbmodelle basierend auf direktem visuellen Vergleich einer Farbe mit Referenzfarben häufig eingesetzt in der Drucktechnik (Farbmusterbücher, tabellen) verschiedene Systeme o PANTONE o Munsell o DuPont 47

48 Dithering Bei Bildern mit geringer Farbtiefe den Eindruck hoher Farbtiefe erzeugen Vermeidung harter Übergänge durch geeignete Pixelanordnungen

49 Transparenz: Alphakanal Erzweiterung des Farbmodells um einen weiteren Kanal Alphakanal, gibt den Grad der Transparenz einer Farbe an Wichtig für Überlagerungen, bspw. Logos auf Webseiten

50 Vektorgraphiken 50 aus graphischen Primitiven zusammengesetzt Beispiel: Linie, Rechteck, Kreis, Punkt, Ellipse, Kurve lassen sich beliebig ohne Qualitätsverlust transformieren Eigenschaften von graphischen Primitiven bleiben bei Transformation erhalten Erfordern meist weniger Speicherplatz Parameter: je nach graphischem Primitiv: Position: x, y Größe: Breite, Höhe, Radius, Start & Endposition Farbe: RBG, Farbangabe im Klartext Ausgabegeräte rasterorientiert erfordert Rasterisierung von Vektorgraphiken 50

51 Vektorgraphik Beispiel mögliche Beschreibung rect(0, 0, 400, 600); circle(100, 100, 50); rect(100, 100, 100, 200); line(20, 20, 200, 60); nicht berücksichtigt: Füllfarbe und Linienfarbe, Linienbreite

52 Schriftzeichen 52 Windows: True Type Fonts Schriftzeichen sind Vektorgraphiken Outline Schriften: Form wird durch Kurven beschrieben Werden je nach Schriftgröße verlustfrei skaliert Text nicht als Bitmap (Rasterbild) erzeugen Text aus Scannerbild ist nicht veränderbar 52

53 Erzeugung von Vektorgraphiken 53 Software: Corel Draw (kommerziell) Adobe Illustrator (kommerziell) Macromedia Freehand (kommerziell) Xara Xtreme (Windows: kommerziell/linux:frei) Inkscape (frei) OpenOffice Draw (frei) Hardware: Gaphiktablett 3D Scanner 53

54 Vergleich Vektor/Raster Skalierung Raster Vektor

55 Dateiformate für Graphiken 55 Raster: BMP BitMaP GIF Graphics Interchange Format JPEG Joint Expert Group PNG Portable Network Graphics RAW Kamera Rohdaten JPEG2000 Nachfolger von JPEG Vektor: Postscript Seitenbeschreibungssprache FH Freehand PDF Portable Document Format SWF Macromedia Flash SVG Scalable Vector Graphics 55

56 GIF 56 wurde 1987 von Compuserve (US Onlinedienst) eingeführt benutzt Kompression zur Reduzierung der Datenmenge verlustfrei Lempel Ziv Welch (LZW) Komprimierung Farbinformationen sind in Farbtabelle abgelegt max. 256 Farben (1Byte pro Pixel) frei wählbar aus erweiterte Version: Speicherung mehrerer Bilder in einer Datei animiertes Gif Transparenz Interlacing Transparenz: ein Farbeintrag in der Tabelle kann als transparent gewählt werden keine Alpha Transparenz (halbtransparente Bereiche) 56 Nachteil: Umwandlung in GIF reduziert Farben Anwendung: Web, Icons

57 Interlaced GIF 57 Betrifft den Bildaufbau bei non interlaced: Bildaufbau zeilenweise interlaced: Trennung des Bildaufbaus in 4 Phasen 57 Phase 1: jede 8. Zeile wird aufgebaut Phase 2: jede 4. Zeile wird aufgebaut Phase 3: jede 2. Zeile wird aufgebaut Phase 4: Rest

58 PNG 58 entwickelt, um GIF abzulösen keine Animationen aber Graustufenbilder mit 1, 2, 4, 8, 16 Bit Farbbilder mit 8 oder 16Bit pro Farbkanal Komprimierung erfolgt verlustfrei Transparenz: Alpha Wert: 8 oder 16Bit Interlacing: 7 Pass weniger Bildverzerrungen als GIF 58

59 JPEG verlustbehaftet oder verlustfrei 24 Bit Farbtiefe Verlustbehaftete Komprimierung Algorithmus entfernt Daten aus Bild Prinzip der Kompression: Entfernen nicht sichtbarer Teile Kompressionsrate ist einstellbar entscheidet über Qualität Hohe Kompressionsrate = wenig Speicherplatz = schlechte Qualität Nachteil: Originalbild lässt sich nicht wieder herstellen.

60 progressive JPEG 60 Bild wird in mehreren Durchgängen kodiert und dekodiert Bild wird von Durchgang zu Durchgang schärfer ähnlich GIF gut zur langsamen Datenübertragung geeignet wenn ausreichende Schärfe erreicht, kann Übertragung abgebrochen werden 60

61 RAW Kamera Rohdaten 61 modellabhängiges Dateiformat bei Digitalkameras Vor Speicherung als Jpeg Bildverarbeitungsschritte: Farb Rekonstruktion Interpolation für Digitalzoom Rauschfilterung Entfernen bekannter Fehler des Bildaufnahmesystems Kompression Entfallen bei RAW Vorteil: alle Schritte können manuell durchgeführt werden 61

62 SVG 62 Standard zur Beschreibung von 2D Vektorgraphiken XML basiert Bild wird aus graphischen Primitiven zusammengesetzt Scripting und Animationen sind möglich Anwendung: Web 62

63 SVG Beispiele 63 grundlegender Aufbau eines SVG Dokumentes: 63 <?xml version="1.0" encoding="utf-8"?> <svg xmlns=" width="800" height="600"> <! Beschreibung der Graphik --> </svg>

64 SVG Beispiele 64 Einfügen verschiedener geometrischer Primitive: <?xml version="1.0" encoding="utf-8"?> <svg xmlns=" width="400" height="600"> <circle cx="100" cy="100" r="50" /> <rect x="100" y="100" width="100" height="200" /> <line x1="10" y1="10" x2="200" y2="60" stroke="red" stroke-width="4px"/> </svg> 64

65 Was man beachten sollte 65 eine Rastergraphik kann nicht mehr in Vektorgraphik umgewandelt werden Vektorgraphik auch im Vektorformat speichern Verlustbehaftete Komprimierung kann nie das Originalbild erzeugen Scanner und Digitalkameras erzeugen Rasterbilder Rasterbild enthält keine Informationen über graphische Formen Schriftarten und deren Parameter Wahrnehmungsaspekte berücksichtigen 65