Heute. 1. Rastergraphiken 2. Vektorgraphiken 3. Arten von Graphikdateien 4. Graphik Ein und Ausgabe

Transkript

1 2 Einführung in die Informationstechnik VII Informationsdarstellung Bilder Heute 1. Rastergraphiken 2. Vektorgraphiken 3. Arten von Graphikdateien 4. Graphik Ein und Ausgabe 1. Digitalkamera 2. Scanner 3. Drucker 4. Bildschirm 3 5 Einführung Worum geht es heute? Arten von Bildern: Was bedeutet Rastergraphik? Was ist eine Vektorgraphik? Auflösung: Digitalkamera: 8MP, 12MP? Was bedeuted Megapixel? Drucker, Scanner: 600dpi, 1200ppi? Was bedeutet dpi, ppi? Welcher Zusammenhang besteht zwischen Bildgröße und Druckgröße? Seitenverhältnis: Was bedeutet 2:3, 4:3? Einführung Worum geht es heute? Speicherung von Bildern Was bedeutet Kompression? Was ist Jpeg, PNG, Gif? Ein und Ausgabegeräte Wie arbeitet ein Monitor Scanner, Drucker 6 7 Begriff Graphik Graphik: Die Schreib und Zeichenkunst Computergraphik: spezielles Teilgebiet der Informatik, das sich mit der Erzeugung (, Ver und Bearbeitung) von Bildern mit Hilfe von Computern beschäftigt Computergraphik unterscheidet zwischen: Rastergraphik Vektorgraphik Rastergraphik Beschreibung eines Bildes in Form einer matrix/rasterförmigen Anordnung von Bildpunkten, denen jeweils eine Farbe zugeordnet ist Merkmale: Breite, Höhe [Pixel] Farbtiefe [Bit, Byte, Anzahl Farben] 1

2 8 9 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. 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 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 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 Farbmodelle RGB Mischung der Farbe aus Grundfarben Rot, Grün und Blau additiv alle Grundfarben addieren sich zu Weiß CMY(K) Grundfarben Cyan, Magenta, Yellow, Black subtraktives Farbmodell, keine Farbe Weiß, alle Farben Schwarz HSV Mischung aus Hue (Farbton), Saturation (Sättigung), Value (Helligkeit) perzeptionsorientiert Erzeugung von Rasterbildern Bildbearbeitungssoftware: Adobe Photoshop Adobe Photoshop Elements Paint itshop Pro GIMP (frei) Irfanview (frei, Viewer) Digitalkamera Scanner 2

3 14 15 Digitalkamera Bildsensor (CCD) besitzt flächig im Raster angeordnete, lichtempfindliche Zellen. drei Farben R,G,B werden gleichzeitig aufgenommen Wesentliche Bild Parameter: Bild Seitenverhältnis 2:3 oder 4:3 Anzahl der Pixel Bild Seitenverhältnis Übliches Seitenverhältnis für Photopapier: 2:3 Seitenverhältnis für Monitor, Fernsehen: 4:3 Digitalkameras benutzen meist 4:3 historisch gewachsen Probleme entstehen beim Ausbelichten auf festen Formaten Mögliche Probleme bei Ausbelichtung: Zusammenhang Anzahl Pixel Bildgröße Mit Verzerrung Ohne Verzerrung Gewünschtes Klassik-Format (2:3) Gute Auflösung Optimale Auflösung ca. 9x x 800 Pixel 1050 x 1600 Pixel ca. 10x x 900 Pixel 1200 x 1800 Pixel ca. 13x x 1125 Pixel 1500 x 2250Pixel ca. 20x x 1800 Pixel 2400 x 3600 Pixel konstante Höhe Bild gezerrt weiße Ränder ca. 30x45 * 1200 x 1800 Pixel* 2400 x 3600 Pixel* ca. 40x60 * 1600 x 2400 Pixel* 3200 x 4800 Pixel* ca. 50x75 * 2000 x 3000 Pixel* 4000 x 6000 Pixel* konstante Breite Bild gestaucht Originalbild Verschnitt Auflösung? Zusammenhang zwischen Seitenverhältnis und Anzahl Pixel: geg.: Kamera mit 10MP, Je nach Seitenverhältnis (gerundet): 4:3 > 3600x2700 2:3 > 3900x Auflösung Scanner Flachbett absolute Auflösung: Angabe der Anzahl vorhandener Bildpunkte horizontal, vertikal bei Bildern, Monitoren Gesamtanzahl bei Digitalkameras relative Auflösung: Dichte der Bildpunkte dpi dots per inch Drucker, Scanner ppi pixel per inch lpi lines per inch Scanner 1 Zoll = 2.54cm 26dpi horizontal 3

4 20 21 Scanner wichtige Parameter Bauform: Flachbett, Trommel, Hand, Stift einlesbare Bildgröße Farbtiefe: 36Bit, 48Bit Auflösung: dpi, lpi Auflösung bestimmt Bildgröße Beispiel: Scannen eines 10x10cm Bereichs mit 1200dpi 10cm/2.54=3,94 Zoll 3,94*1200=4728 Punkte Verwendungszweck ist entscheidend: Ausgabe auf dem Monitor Ausgabe auf Drucker Ausbelichten auf Fotopapier Wichtig: Scanner erzeugt Rasterbild!! Pixelgraphiken: Vor und Nachteile Vorteile: 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 Speicherung von Rasterbildern 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): 4800x9600x6= pro Quadratzoll (2.54cm x 2.54cm) Vektorgraphiken 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 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 Schriftzeichen 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 4

5 26 27 Erzeugung von Vektorgraphiken Vergleich Vektor/Raster Software: Corel Draw (kommerziell) Adobe Illustrator (kommerziell) Macromedia Freehand (kommerziell) Xara Xtreme (frei) Inkscape (frei) OpenOffice Draw (frei) Hardware: Gaphiktablett 3D Scanner Skalierung Raster Vektor Dateiformate für Graphiken 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 GIF 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) Nachteil: Umwandlung in GIF reduziert Farben Anwendung: Web, Icons Interlaced GIF Betrifft den Bildaufbau bei non interlaced: Bildaufbau zeilenweise interlaced: Trennung des Bildaufbaus in 4 Phasen Phase 1: jede 8. Zeile wird aufgebaut Phase 2: jede jd 4. Zeile Zil wird idaufgebaut Phase 3: jede 2. Zeile wird aufgebaut Phase 4: Rest PNG 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 5

6 32 33 JPEG verlustbehaftet oder verlustfrei 24 Bit Farbtiefe Verlustbehaftete Komprimierung Algorithmus entfernt Daten aus Bild Prinzip der Kompression: Entfernen nicht sichtbarer Teile Kompressionsrate ist iteinstellbar entscheidet tüber Qualität Hohe Kompressionsrate = wenig Speicherplatz = schlechte Qualität Nachteil: Originalbild lässt sich nicht wieder herstellen. progressive JPEG 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 RAW Kamera Rohdaten 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 SVG Standard zur Beschreibung von 2D Vektorgraphiken XML basiert Bild wird aus graphischen Primitiven zusammengesetzt Scripting und Animationen sind möglich Anwendung: Web SVG Beispiele grundlegender Aufbau eines SVG Dokumentes: <?xml version="1.0" encoding="utf-8"?> <svg xmlns=" width="800" height="600"> <! Beschreibung der Graphik --> </svg> SVG Beispiele 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="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="4px"/> </svg> 6

7 38 39 Metadaten EXIF Exchangeable Image File Format Speicherung von Zusatzinformationen über Hardware und deren Parameter Blende, Belichtungszeit, Brennweite, Blitz, Datum, Uhrzeit, Vorschaubild, etc. IPTC oder IPTC NAA: International Press Telecommunications Council Standard zur Speicherung von Textinformationen über Fotos und Graphiken Nutzung hauptsächlich für Bilddatenbanken definiert Felder wie: Headline, Caption, Keywords, Copyright, Country, Province, Sublocation, City, etc. auch Datum der Erstellung und Datum der Veränderung Was man beachten sollte eine Rastergraphik kann nicht mehr in Vektorgraphik umgewandelt werden Vektorgraphik auch im Vektorformat speichern Verlustbehaftete Komprimierung kann nie das Originalbild erzeugen Scanner Auflösung beachten! erzeugt Rasterbild Rasterbild enthält keine Informationen über graphische Formen Schriftarten und deren Parameter Wahrnehmungsaspekte Bildausgabegeräte Bildschirme Kathodenstrahlröhrenbildschirm: Lochmaske, 3 Strahlen, die abgelenkt werden, physikalische Auflösung abhängig von Lochmaske Flüssigkristallbildschirm (LCD): Flüssigkristalle, die die Polarisation des Lichtes beeinflussen, Moleküle der Kristalle werden durch elektrische Spannung beeinflusst, physikalische Auflösung abhängig von Anordnung der Kristalle Bildschirme additives Farbmodell, alle Farben addieren sich zu Weiß Betriebssystem unterteilt Bildschirm in x, y Koordinaten ein Kästchen: Pixel Anzahl der Pixel ist unabhängig von der physikalischen Auflösung des Ausgabegerätes Bildausgabegeräte Drucker Ausgabe von Text und Bild Daten auf Papier verschiedene Drucktechnologien unterschiedliche Qualität der Ausgabe, unterschiedliche Anwendungsbereiche Subtraktives Farbmodell: alle Farben schwarz heute gebräuchlich: Nadeldrucker Tintenstrahldrucker Laserdrucker Bildausgabegeräte Tintenstrahldrucker Tinte wird durch feine Düsen aufs Papier gespritzt. Funktionsprinzipien: continuous i flow: Tinte fließt ununterbrochen, wenn kein Bildpunkt erzeugt werden soll, wird der Tintenstrahl in eine Ablenkschale geleitet Drop on demand: Tinte fließt nur, wenn ein Bildpunkt zu erzeugen ist Bubble Jet piezoelektrisch 7

8 44 45 Bildausgabegeräte Laserdrucker Zusammenfassung rotierende Trommel negativ geladen Laserstrahl baut beim Auftreffen die negative Ladung ab Toner (negativ geladen) kann nur an den entladenen Stellen haften Papier positiv geladen, Übertragung des Toners von der Trommel auf das Papier Toner durch Hitze (180 ) und Druck auf dem Papier fixiert D. Jackèl, Uni Rostock Zwei Arten von Graphiken Raster: aus Pixeln zusammengesetzt Speicherintensiv, oft verlustbehaftet komprimiert Nicht verlustfrei skalierbar Vektor: aus geom. Primitiven zusammengesetzt Speicherschonend Verlustfrei transformierbar Metadaten möglich Erzeugung: Rastergraphik: Scanner, DigiCam Vektorgraphik: Tablett, Maus Ausgabegeräte rasterorientiert: Drucker Bildschirm 8