Graphiken und Bilder

Graphiken und Bilder
Eingabe – Verarbeitung - Ausgabe
Begriffsbestimmung
„ Bilder und Graphiken auf dem Computer - wie
werden sie erzeugt bzw. eingegeben,
bearbeitet und ausgegeben
„ Graphiken lassen sich auf geometrische
Grundformen reduzieren
„ Bilder sind vor allem photorealistische
Abbildungen
Bilder und Graphiken
„ Datenformate für Bilder und Graphiken
heißen Graphikformate
„ Unterscheidung zwischen Rastergraphik und
Vektorgraphik und entsprechenden Formaten
„ Computergraphik ist spezielles Teilgebiet der
Informatik, das sich mit der Erzeugung von
Bildern mit Hilfe von Computern beschäftigt
Vektorgraphik
„ Computerbild, das aus graphischen Primitiven
(z.B. Kreise, Linien, Polygone)
zusammengesetzt ist
„ graphische Primitive werden formal
beschrieben, Kreis z.B. durch Lage des
Kreismittelpunktes und den Kreisdurchmesser
„ zusätzlich eventuell noch Farbe, Strichstärke,
Füllmuster usw.
Vektorgraphik
„ ohne Qualitätsverlust stufenlos skalierbar
„ Eigenschaften einzelner Linien, Kurven,
Flächen bleiben erhalten
„ benutzt in vektorbasierten
Zeichenprogrammen wie Adobe Illustrator,
CorelDRAW, Macromedia Freehand
„ Formate DXF, AI, CDR, FHx, SVG, EPS ...
Vektorbild - 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
Rastergraphik
„ Beschreibung eines Bildes in Form einer
tabellenförmigen Anordnung von Bildpunkten,
denen jeweils eine Farbe zugeordnet ist
„ Hauptmerkmale sind Breite und Höhe in Pixel
(Auflösung) und Anzahl der Bits zur
Codierung der Farbe (Farbtiefe)
„ Farbwerte werden in Farbkanäle zerlegt (rot,
grün, blau), diese werden eigenständig
behandelt
Rastergraphik
• 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
Rastergraphik
„ zweiter Ansatz:
Erhöhung des
Speichers pro Pixel
„ jedes Pixel wird durch
ein Byte repräsentiert
→ 28=256 mögliche
Farbwerte
Rastergraphik
„ dritter Ansatz: True Color
„ Trennung in Rot, Grün, Blau →
„
„
„
„
„
„
Farbkanal
Verwendung von 1 Byte pro
Farbe
256 mögliche Farbabstufungen
256x256x256=16.777.216
Farbwerte
modere Scanner arbeiten mit
48Bit Farbtiefe = 2 Byte pro
Farbkanal
216=65536 Abstufungen je
Kanal
65536 x 65536 x 65536 =
281.474.976.710.656 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
Rastergraphik
„ Medien für Rastergraphik z.B. Bildschirm,
Drucker, Kamera
„ häufig benutzte Formate sind JPEG, BMP,
PNG, GIF und TIFF
Rastergraphik
„ 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
Vergleich
Rastergraphik/Vektorgraphik
Skalierung
Raster
Vektor
Vergleich
„ Vektorgraphiken benötigen weniger
Speicherplatz
„ sind verlustfrei skalierbar
„ http://de.wikipedia.org/wiki/Vektorgraphik
„ einige Medien benötigen Rastergraphik
Was man beachten sollte
„ eine Rastergraphik kann nicht wieder in die
originale Vektorgraphik umgewandelt werden
- Vektorgraphik immer auch im Vektorformat
speichern! (inzwischen automatische
Umwandlungen z.B. im Adobe Illustrator
möglich)
„ verlustbehaftete Komprimierung kann nie
wieder das Originalbild erzeugen
„ Rastergraphik enthält keine Informationen
über graphische Formen, Schriftarten und
deren Parameter
Rastergraphik - Kompression
„ hohe Qualität beim Speichern benötigt viel
Speicherplatz, z.B. TrueColor 3 Byte pro Pixel =
16.777.216 Farben, Bild einer Kamera mit 8 Mill.
Pixeln = 24 MByte pro Bild
„ deshalb Kompression der Daten bei einigen
Graphikformaten
„ Ziel: Reduzierung der Daten ohne bzw. ohne
spürbaren Verlust der Bildinformation
„ Methoden: Zusammenfassen von Flächen gleicher
oder ähnlicher Farbe (Entropiekodierung, Substitution),
Reduzierung der Farbtiefe
JPEG-Komprimierung
GIF
„ verlustfreie Kompression durch LZW-
Komprimierung
„ maximal 256 Farben
„ Besonderheit: Animation mit animated gifs
„ Nachteil: Umwandlung in GIF reduziert die
Farbtiefe
„ Transparenz: ein Farbeintrag in der Tabelle
kann als transparent gewählt werden
„ keine Alpha-Transparenz (halbtransparente
Bereiche)
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 4. Zeile wird aufgebaut
„ Phase 3: jede 2. Zeile wird aufgebaut
„ Phase 4: Rest
Eingabe von Graphiken und Bildern
„ Scannen von Vorlagen
„ Zeichnen mit Zeichenprogrammen (freies
Vektorzeichenprogramm z.B. inkscape
http://www.inkscape.org/) mit Maus oder
Graphiktablett als Eingabegeräte
„ digitale Kamera
Verarbeitung – Texte
„ eingegebene Texte und Bilder sollen nun
bearbeitet werden
„ Ausgangsmaterial: Pixelbilder
„ Texte in diesen Bildern auch nur
Ansammlung von Pixeln
„ beim Einfügen von Text in ein Pixelbild
werden Zeichen der Größe und Auflösung
entsprechend in Pixel umgesetzt
„ Aussehen der Zeichen in Schriftsätzen
(Fonts) gespeichert
Schriftsätze
„ Menge aller Zeichen einer Schrift
„ Schriftsätze auf jedem Rechner gespeichert
„ Form der Zeichen festgelegt, Erscheinung
kann verändert werden durch Attribute (z.B.
fett, kursiv, unterstrichen ...), wird vom
Rechner errechnet
„ Attribut „fett“ wird durch Verdopplung aller
Linien realisiert
Schriftschnitte
„ besser: spezielle Schriftsätze für kursive, fette
u.a. Darstellungsformen
„ alle Schriftsätze, die von einem normalen
Schriftsatz ausgehen, nennt man
Schriftschnitte
„ empfohlen wird die Verwendung eines
speziellen Schriftschnittes, da dieser manuell
erstellt und nicht über Heuristiken berechnet
wurde
Bitmap-Fonts
„ alle Zeichen sind als Sammlung von Pixeln
definiert
„ für alle gängigen Größen muss ein einzelner
Font definiert sein
„ für Bildschirm-Anwendungen (wenn
überhaupt) nur bitmap-fonts vorhandener
Größen verwenden
„ verwendet in Mobiltelefonen oder PDAs
TrueType Fonts
„ 1991 von Apple vorgestellt, von MS lizenziert,
in Windows und Mac OS integriert
„ definieren das Aussehen der Zeichen über
mathematische Beschreibung der Kurven, die
die Konturen bilden (quadratische B-Splines),
im Prinzip wie Vektorgraphik
„ beliebig skalierbar
„ werden erst für jedes Ausgabemedium und
dessen Auflösung in Pixel umgesetzt
PostScript Fonts
„ outline fonts, ebenfalls mathematische
Beschreibung der Kurven (Bezierkurven
dritter Ordnung), Qualität höher als TrueType
„ Drucker bekommt zur Ausgabe nicht Pixel
sondern Kurven, die er selbst in Pixel umsetzt
(Drucker muss dazu postsriptfähig sein bzw.
Spezielle Treiber sind erforderlich)
„ Skalierung der Schrift für Druckerausgabe
möglich, mit Adobe Type Manager auch auf
dem Bildschirm
OpenType Fonts
„ Weiterentwicklung von TrueType und
„
„
„
„
PostScript
plattformübergreifendes Format, nur eine
Font-Datei
spezielle Ausdrucksmöglichkeiten für eine
Schrift, z.B. sprachspezifische Ligaturen
digitale Signaturen in Fontdatei
volle Unicode-Unterstützung
Datenaustausch und Fonts
„ benutzbare Fonts bei Installation des Betriebs-
systems auf dem Rechner abgelegt (Systemordner)
„ nur installierte Fonts können von Applikationen
dieses Computers benutzt werden
„ Problem beim Austausch: sind die in einem
Dokument verwendeten Fonts nicht auf dem
Zielrechner installiert,kommt es zum Konflikt, der
meist durch Ersetzung gelöst wird
„ nach Font-Ersetzung meist keine Übereinstimmung
von Laufweite und Zeilenabstand!
Textbearbeitung
„ unterschiedliche Medien können gleiche
Schriften unterschiedlich wiedergeben
„ auch bei Textverarbeitung: erst logische
Textauszeichnung (in Word z.B. durch
Zuweisung eines Formates), dann
Beschreibung der Darstellung (durch
Parametrisierung des Formates)
„ Vorteil: Designbeschreibung ist übertragbar
Text in Photoshop
„ Punkttext, zum Einfügen einzelner Wörter
oder kurzer Texte
„ Absatztext zum Erstellen einzelner oder
mehrere Absätze
„ Pfadtext, Text, der an der Kante eines
offenen oder geschlossenen Pfades entlang
fließt
„ auch asiatische Textoptionen möglich
Exkurs: Text auf Pfaden
„ Richtung, in der dem Pfad Ankerpunkte
hinzugefügt wurden
„ horizontaler Text auf Pfaden - senkrecht zur
Grundlinie
„ vertikaler Text auf Pfaden - parallel zur
Grundlinie
„ bei Veränderung des Pfades passt sich die
Schrift an
Typographie - Links
„ Typographie-Vorlesung FH Berlin
http://www.tfhberlin.de/~iolson/vorlesung_typo1.pdf
„ einen Font identifizieren
http://www.identifont.com/identify.html
„ Type the Sky
http://www.slanted.de/node/1361
Bildbearbeitung
„ computerunterstützte Bearbeitung digitaler
Bilder (i.d.R. Rastergraphiken)
„ Bilder werden optimiert, verfremdet,
modifiziert, manipuliert
„ Schwerpunkt ist Behebung von Fehlern wie
falsche Belichtung, Kontrastschwäche,
Bildrauschen, Rote-Augen-Effekt etc.
Funktionen digitaler Bildbearbeitung
„ Abwedeln und Nachbelichten: partielle
Reduzierung oder Steigerung der Belichtung
„ Ausgleich zu hoher Negativkontraste
Funktionen digitaler Bildbearbeitung
„ Auswählen: Markieren von Bildbereichen, die
dadurch ausgewählt und getrennt bearbeitet
werden können
„ Auswahlwerkzeuge geometrisch bestimmt
(Rechteck, Ellipse), Lasso oder Zauberstab
„ in Photoshop Polygon-Lasso (Segmente verfügen
über gerade Kanten) und magnetisches Lasso
(Ausrichtung an definierten Bildbereichen)
„ Auswahl mit dem Zauberstab: einheitlich gefärbte
Bereiche können ausgewählt werden
Funktionen digitaler Bildbearbeitung
„ automatische Korrekturen, geeignet für
Neueinsteiger
„ qualitativ schlechter als eigenhändige
Korrekturen, z.B. Tonwertkorrektur, Kontrast,
Farbe
„ Optionen können festgelegt und als Standard
abgelegt werden
„ Problem: wie werden bildspezifische
Eigenschaften berücksichtigt?
Funktionen digitaler Bildbearbeitung
„ Colorkey-Technik: Hervorhebung eines Motivs
in einem monochromen Bild
„ dazu wird Farbbild in monochromes Bild umgewandelt, gewähltes
Motiv bleibt farbig
„ in Photoshop: Sättigung auf größten negativen
Wert und mit Protokollpinsel “anmalen”
„ oder mit Ebenen und Lasso, dabei weiche Auswahlkante möglich
Funktionen digitaler Bildbearbeitung
„ Ebenen: Anordnung der Bildelemente wie auf
Transparentfolien
„ einzelne Bearbeitung von Ebenen möglich
„ Ebenen können z.B. gesperrt, wieder
verbunden oder umsortiert werden
„ Farben: Änderung von Farbton,
Farbsättigung, Farbmodus, Farbtiefe
Funktionen digitaler Bildbearbeitung
„ große Auswahl an Graphik-Filtern: z.B.
Schärfe- und Unschärfefilter, künstlerische
Effekte wie Relief, Schatten, Weichzeichner
...
„ Unscharf-Maskieren: erhöht den Kontrast
entlang den Bildkanten und zeichnet so Bild
scharf
„ Störungsfilter: Hinzufügen oder Entfernen
zufällig verteilter Farbwerte
Funktionen digitaler Bildbearbeitung
„ Fotomontage, Fotocollage, Fotomosaik
„ z.B. Erstellung eines Mosaiks aus vielen
kleinen Fotos
„ Pixel im Bild wird durch ein Foto mit
entsprechendem durchschnittlichen Farbwert
ersetzt
„ Software: z.B. Mosaic Creator
„ kommerzielle Anbieter: z.B.
www.mosaikfabrik.de
Funktionen digitaler Bildbearbeitung
„ Gammakorrektur: passt die Helligkeitsverteilung
eines Bildes an das Helligkeitsempfinden des
menschlichen Auges an
„ Histogramm: zeigt Häufigkeitsverteilung von
Farbwerten, genutzt z.B. zur Belichtungskorrektur,
Egalisierung
„ Invertieren: Umkehrung der Farben, gegenteilige
Farbe des jeweiligen Farbraumes, RGB: Farbwert der
einzelnen Farbe wird von ihrem Maximalwert
abgezogen
Funktionen digitaler Bildbearbeitung
„ Kopierstempel: zur Korrektur von
Schönheitsfehlern, kopiert Teil des Bildes
zum Einfügen in dasselbe oder ein anderes
Bild, “Malen” mit dem kopierten Bereich
„ Maskieren: Auswahl von Bereichen zum
Schutz vor Bearbeitung, Ebene kann über ihr
liegende Ebenen maskieren
(beschneiden/enthüllen)
Funktionen digitaler Bildbearbeitung
„ Stitching: Erstellen einer großen Fotografie
aus verschiedenen kleinen, z.B. Panorama
„ Teilbilder müssen vom selben
Aufnahmestandpunkt aufgenommen sein
„ Photoshop: Datei – Automatisieren Photomerge
Funktionen digitaler Bildbearbeitung
„ Tutorials zum Anwenden von Photoshop im
Netz
www.psd-tutorials.de,
www.der-webdesigner.net,
www.photoshoptutorials.de
„ Einführung Begriffe, Techniken
http://www.ralphaltmann.de/bildbearbeitung/in
dex.html
„ und natürlich die Hilfe von Adobe Photoshop
(Lehrgänge)
Bildverarbeitung
„ Signalverarbeitung zur Aufbereitung visueller
Informationen, z.B. Bildverstehen,
Mustererkennung
„ Algorithmen werden bei Bildbearbeitung
eingesetzt
Bildmanipulation
„ Grenze zwischen Bildverbesserung und
Manipulation schmal
„ Ziele: u.a. politische, ethnische, religiöse
Manipulation, Skandalisierung, Agitation und
Propaganda, Werbung
„ z.B. bei Entfernung von Objekten aus dem
Bild, um intendierte Aussage klarer
hervorzuheben (Trotzky wurde z.B.
nachträglich aus historischen Fotos
wegretuschiert)
Bildmanipulation
„ Retusche üblich in der Filmbranche, Politik ...
(hochauflösendes Fernsehen durchaus
Problem)
„ Maßnahmen gegen Manipulation:
Selbstverpflichtung der Medien, z.B.
Pressekodex des Journalistenverbandes,
gesetzliche Regelungen, Wettbewerb und
Meinungsvielfalt
„ www.photoshop-weblog.de/?p=444
„ http://www.wargalla.de/bilder.htm
digitale Bildgestaltung, Beispiele
Ausgabegeräte
„ über Bildschirm, Drucker, Plotter, Beamer,
elektronisches Papier
„ Rastergraphik oder Vektorgraphik, je nach
Ausgabegerät
„ z.B. Webseiten meist Rastergraphik und
Vektorgraphik, Ausgabe auf Bildschirm
anders als Druckvorlagen
„ wichtiger Parameter ist die Auflösung
Auflösung
„ Auflösung ist Anzahl vorhandener Bildpunkte
(Pixel)
„ absolute Auflösung 1: Anzahl der insgesamt
vorhandenen Bildpunkte (z.B. Megapixel bei
Kamera), beschreibt Datenmenge, maximal
mögliche Darstellungsqualität
„ absolute Auflösung 2: Anzahl Bildpunkte pro
Spalte oder Zeile (z.B. Bildschirm), gibt
gleichzeitig das Seitenverhältnis an
„ kann zu Verzerrungen führen
Auflösung
„ Beispiel 1: ein Digitalphoto ist 8.2 Megapixel
groß. Ein Bildschirm hat ein Seitenverhältnis
von 4:3, ein Photo üblicherweise 3:2. Welche
horizontale und vertikale Anzahl Pixel hat das
Bild in beiden Seitenverhältnissen?
„ breite * höhe = 8 185 344
„ breite / höhe = Seitenverhältnis
„ 3:2 = 3504 x 2336 Pixel
„ 4:3 = 3262 x 2509 Pixel
Auflösung
„ physikalische (geräteabhängige) vs. logische
(im BS einstellbare) Auflösung
„ relative Auflösung ist Dichte der Bildpunkte
„ gibt Anzahl der Bildpunkte im Verhältnis zu
einer physikalischen Längeneinheit an (dpi,
ppi)
Auflösung
„ Beispiel 2: Ein Bild der Größe 3000 x 2000 Pixel wird
mit einer Auflösung von 72 dpi ausgegeben. Welche
Größe in cm hat es?
„ 3000 : 72 = 41,6 Zoll, 105,8 cm, 2000 : 72 = 27,7 Zoll, 70,5 cm
„ Wie viel Megapixel benötigt man, wenn man ein Bild
in der Größe A1 ausgeben möchte mit einer
Auflösung von mindestens 300 dpi?
„ A1 59,4 x 84,1 cm, 23,4 x 33,1 Zoll, 7020 x 9933 Pixel = 69,7
Megapixel
Bildschirm
„ Kathodenstrahlröhrenbildschirm: Lochmaske, 3
Strahlen, die abgelenkt werden, physikalische
Auflösung abhängig von Lochmaske
„ Flüssigkristallbildschirm: 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
Bildschirm
„ additives Farbmodell, alle Farben addieren
sich zu Weiß
„ Betriebssystem unterteilt Bildschirm in x,yKoordinaten (Kästchen, entsprechen Pixel)
„ Anzahl der Pixel unabhängig von
physikalischer Auflösung des Bildschirms
Auflösung
„ dpi zum Nachlesen:
http://praegnanz.de/essays/137/72dpi72dpi
„ Tutorials:
http://computergrafik.entertrain.de/