itung für Druck und Internet Bildbearbeitung Definitionen und Begriffe Farbsysteme Dateiformate Anwendungssoftware

Transkript

1 Bildbearbeitung itung für Druck und Internet dk-computerschule Dillmann u. Kriebs GbR Bahnhofstr Gießen Tel.: 0641 / Fax: 0641 / mail@dk-services.de Internet: Definitionen und Begriffe Farbsysteme Dateiformate Anwendungssoftware

2 Ausgabe-Medien... und Farbe Im Druck Papier Folien andere bedruckbare Materialien Tinte Im Internet Bildschirm Beamer allgemein: Lichtquelle

3 Das ist Farbe! Im Druck Reflektiertes Licht es herrscht Absorption Die Grundfarben Cyan Magenta Gelb ergeben zu gleichen Anteilen gemischt: Schwarz Im Internet Ausgestrahltes Licht es herrscht Mischung Die Grundfarben: Rot Grün Blau ergeben zu gleichen Anteilen gemischt: Weiß

4 Das ist Farbe! Im Druck: Subtraktive Mischung Im Internet: Additive Mischung Cyan + Magenta + Gelb (+ Schwarz) Rot + Grün + Blau

5 Farben in der Bildbearbeitung Der Scanner liefert RGB-Bilder Der Bildschirm arbeitet im RGB-Modell Der RGB-Farbraum ist größer als der CMYK-Farbraum In der Bildbearbeitung sind feinere Abstufungen möglich Nicht jede RGB-Farbe kann gedruckt werden Arbeiten Sie solange wie möglich im RGB-Modus Tip: Konvertieren Sie erst dann von RGB zu CMYK, wenn Sie bereit sind zu drucken... und gar nicht, wenn Ihre Bilder für das Internet bestimmt sind... und auch nicht mehrfach in die umgekehrte Richtung... gute Bildbearbeitungssoftware besitzt eine spezielle CMYK- Vorschau, um Ihnen ohne Konvertierung einen Eindruck zu geben.

6 Weitere Farbmodelle HSB-Modell Hue (Farbton) Saturation (Sättigung) Brightness (Helligkeit) Das HSB-Modell orientiert sich an der menschlichen Wahrnehmung LAB-Modell Luminanz (~ Helligkeit) a-komponente Rot bis Grün b-komponente Blau bis Gelb Das LAB-Modell ist weniger anschaulich, aber geräteunabhängig. Internes Modell z.b. von Photoshop für Berechnungen

7 Informationsverarbeitung Bits und Bytes Das Bit ist eine Maßeinheit für Informationsmengen, wie Meter für eine Strecke. Ein Bit hat den Informationsgehalt der Antwort auf eine Frage, die nur mit Ja oder Nein beantwortet werden kann Als Antwort: Ja oder Nein Im binären Zahlensystem: 1 oder 0 Im elektronischen Schaltkreis: Strom an oder Strom aus 8 Bit werden zu 1 Byte gebündelt. 1 Byte beschreibt 256 verschiedene: Möglichkeiten, Zustände und in der Bildbearbeitung: 256 Farbabstufungen oder Helligkeiten

8 8 Bit = 1 Byte = 256 Zustände 1 Bit = 2 Zustände Bit = 4 Zustände Bit = 8 Zustände Bit = 256 Zustände, z.b

9 Farben im PC zerlegt: 3 RGB Kanäle mit je 8 Bit Information =

10 Farben im Druck: CMYK - Vierfarbseparation Ganz ähnlich arbeitet der Farbdruck: Die Bilder werden in die Farben Cyan, Magenta und Gelb zerlegt. Schwarz bildet die vierte Farbe. In der Druckerei wird jeder Farbkanal auf einen Schwarzweißfilm belichet. Dieser wird dann auf die Druckplatten kontaktkopiert und diese entspechend eingefärbt. Die CMYK-Kanäle der Bildbearbeitung speichern je 8 Bit, also 256 Grauwerte. Diese geben je Grundfarbe 256 Farbabstufungen

11 CMYK - Farbauszüge

12 Vielfalt der Farben Wenn der PC 8 Bit, also 256 Farbstufen, pro Kanal speichert: Wieviele Farben können reproduziert werden? Die Antwort: 24 Bit = 256 x 256 x 256 Dies sind Farben, also ca. 16,7 Mio. Dies nennt man True-Color : dies sind mehr Farben, als das menschliche Auge unterscheiden kann Prinzipiell kann also jede Farbe dargestellt werden

13 Auflösung im Druck Unter Auflösung versteht man die Informationsdichte pro Längeneinheit Im Druck dpi = dots per inch = Anzahl der Druckpunkte auf 2,54 cm lpi = lines per inch = Anzahl der Rasterzeilen auf 2,54 cm da ein Drucker kein Grau drucken kann, werden die Bilder gerastert. aus einem Bildpunkt wird ein Rasterpunkt, dieser setzt sich aus einer Anzahl von Druckpunkten zusammen

14 Raster im Druck: Grau / Farbe Durch ungeeignete Rasterwinkel entstehen Moiré-Muster

15 Auflösung im Internet Am Bildschirm dpi = dots per Inch = Bildschirmpunkte pro 2,54 cm Typisch sind Auflösungen von dpi keine Rasterung, da der Monitor Farbabstufungen darstellen kann

16 Auflösung und ihre Auswirkung Im Druck bestimmt die Auflösung die Anzahl der Druckpunkte durch das Zusammenspiel mit der Rasterweite wird die resultierende Bildgröße in Layoutprogrammen bestimmt. da ein gescannter Pixel in einen Rasterpunkt umgerechnet wird, ist die nötige Scanauflösung in der Regel nur ein Bruchteil der erreichbaren Druckerauflösung Im Internet hat der Monitor eine feste Darstellungsauflösung von 72 dpi oder 96 dpi, je nach Modell bestimmt daher alleine die Pixelanzahl die Bildgröße wird das Bild mit höherer Auflösung gescannt, so wird es größer, da mehr Pixel erfasst werden.

17 Auflösung und Dateigrößen Die Scan-Auflösung bestimmt die Anzahl der gescannten Pixel... und damit direkt auch die Dateigröße Insbesondere die Web- Designer müssen auf die Dateigrößen achten: mehr als 100 kbyte für eine ganze Bildschirmseite gilt oft als inakzeptabel!!! Hier benötigen Sie effektive Kompressionsmechanismen Rechenexempel: ein Foto im Format 9 x 13 cm wird gescannt dies sind ca. 3,5 x 5 bei 96 dpi sind dies 336 x 480 Pixel à 3 x 8 Bit = Pixel à 3 Byte = 472,5 kbyte bei 300 dpi hätte das Bild eine Größe von ~ 4,6 Mbyte 96 dpi sind für den Druck sicher zu wenig, für das Web dagegen genau richtig!

18 Dateiformate Auswahlkriterien Vektor oder Pixelgrafik? Vektoren eignen sich anders als Pixelformate nicht für Fotos, dagegen sehr gut für Illustrationen und Strichzeichnungen Speicherplatz / Dateigröße Das Medium ist wichtig: Ladezeiten im Internet! Ladezeiten der Grafik in der Software Verwendbarkeit und Datenaustausch Mit DTP-Programmen Mit Web-Browsern Andere Betriebssysteme / Dienstleister Zusatzmerkmale des Dateiformates? Ebenen; Alphakanäle; Pfade Transparenz

19 Dateiformate Speichern für Druck und Web Im Druck üblich: TIFF: optionale Kompression, verlustfrei, unterstützt viele zusätzliche Informationen z.b für Fotomontage Pfade, Alpha-Kanäle), für Datenaustausch geeignet EPS / DCS: für Desktop-Publishing und Druckvorstufe PDF: gutes Dateiformat für den Dokumentenaustausch und Druckvorstufe PSD: das Photoshop-Format, für die Bildbearbeitung, alle Optionen JPEG: komprimiertes 24-Bit Format, mit Verlust, RGB, CMYK, 8 Bit Graustufen, keine Alphakanäle Im Internet möglich: JPEG: 24 Bit, komprimiert immer und sehr effektiv, mit einstellbarer Verlustrate. RGB, CMYK, 8 Bit Graustufe. Keine Alphakanäle, daher keine Transparenz. Keine Animation. GIF: maximal 8 Bit Farbtiefe, verlustfreie Kompression, Animation möglich. Transparenz wird unterstützt. PNG: sehr variabel in Farbtiefen, 8 Bit, 24 Bit und mehr. Alpha-Kanal- Transparenz. Nicht von alten Browserversionen unterstützt. Animation ist für die Zukunft vorgesehen. Flash, Shockwave, PDF, andere...: nur mit Hilfe spezieller Browser- Plug-Ins, sehr aussichtsreiche Vektorformate!

20 JPEG, GIF oder PNG? Demonstration zur Auswahl Es geht um die Beurteilung dieser beiden typischen Grafiken / Bilder: Welches Dateiformat würden Sie als Web- Designer wählen?

21 JPEG, GIF oder PNG? Demo 2 Bit Transparenz.gif Fazit: Da die Grafik maximal 3 Farben 257 Bytes, Transparenz, volle Qualität zeigt, ist GIF im Vorteil, da es auf 2 Bit Farbtiefe optimiert werden kann. Die verlustfreie GIF-Kompression ist Demo 2 Bit.gif zudem bei farbigen Flächen sehr 243 Bytes, keine Transparenz, volle Qualität effektiv PNG kann auf 8 Bit reduziert werden, zeigt Transparenz, Demo.png verlustfreie Kompression 558 Bytes, Transparenz, volle Qualität Der meist hocheffektive JPEG- Mechanismus der Kompression versagt bei einfarbigen Flächen, und produziert sichtbare Demo max.jpg Qualitätsverluste. Nur 24 Bit Bytes, maximaler Qualitätsfaktor (aber geringe Verluste), Farbtiefe sehr schlechte Kompression, keine Transparenz Für Grafiken mit wenigen, aber Demo min.jpg flächigen Farben ist GIF optimal, JPEG vollkommen ungeeignet 906 Bytes, geringer Qualitätsfaktor, maximale Kompression

22 JPEG, GIF oder PNG? Fotos.jpg: hoch / mittel / niedrig, 67 kb / 33 kb / 17 kb 8 Bit Gif, selekt. Palette, 137 kb 8 Bit Gif, Web-Palette, 71 kb 24 Bit PNG, 356 kb

23 JPEG, GIF oder PNG? Fotos Fazit Der Qualitäts-Verlust bei JPEG Format wird erst bei niedriger Qualtitätseinstellung (= hoher oder wiederholter) Kompression sichtbar. Die Kompression ist sehr effektiv. das GIF-Bild wird gerastert (256 Farben maximal). Wenn die Palette nicht optimiert wird, werden die Farbverluste deutlich sichtbar. Mittlere Kompression. PNG arbeitet als einziges Format verlustfrei, liefert aber die schlechteste Kompression.

24 Bildqualität Das Histogramm Histogramme sind ein Werkzeug zum Ausmessen der Helligkeitsverteilung im Bild Das Bild ist zu dunkel Helligkeitsregler diese Korrektur löst das Problem nicht wirklich das Histogramm wird einfach verschoben das Bild wird grau

25 Bildqualität Tonwertkorrektur Selektives Regeln die Tonwertkorrektur regelt separat schwarze Bereiche weiße Bereiche die Mitteltöne... und dies auch in den einzelnen Kanälen Gradationskurven sind noch selektiver verfügen über 256 Regler je Farbkanal

26 Tonwertkorrektur weitere Beispiele Vorher Nachher

29 Farbkorrekturen Farbton, Sättigung, Helligkeit Färbt Objekte um

30 Farbkorrekturen Farbalance Korrigiert Farbstiche Reduzieren von Farbe durch Zugabe von Komplementärfarbe

31 Farbkorrekturen Farbalance Vorher Nachher

32 Malen mit Photoshop Photoshop bietet: viele verschiedene Werkzeuge verschiedene Malmodi, wie Deckkraft usw. in der rechten Grafik wurde ausschließlich reines Blau, mit verschiedenen Pinseln, und verschiedenen Malmodi aufgetragen!

33 Ausbessern Der Pinsel? Kopieren Sie doch! Der Kopierstempel reproduziert Bildmaterial

34 Montage Alphakanäle Alphakanäle erzeugen Transparenz + + =

35 Montage Ebenenmasken decken Bildteile innerhalb einer Ebene ab, sind Alphakanälen sehr ähnlich

36 Einstellungsebenen Ebenen, die Korrektureinstellungen speichern wenden verschiedene Korrekturen nur auf maskierte Bereiche an

37 3D Ebenen - Effekte Variationen

38 3D Ebenen - Effekte Variationen Quadrat + Kreis + Zahl + Effekt =

39 Spezielles: Internet-Effekte Spezialisierte Programme sind: Adobe ImageReady Macromedia Fireworks Das besondere Können: Segmentieren, Slicen Animieren Rollover-Effekte Generieren von HTML und JavaScript

40 Eine Navigationsleiste Animation Segmentierung / Slices: die verschiedenen Bildbereiche Wichtig: die Effekte sind nur in einem Webbrowser zu sehen! Rollover-Effekte

41 Slices / Segmente Zerschneiden eines Bildes manche Teilen sind optimal als GIF, andere als JPEG Slices speichern jeden Teil spezifisch ab und verlinken auch Internet-Adressen JPEG GIF

42 Rollover-Effekte Generieren von Schaltern reagieren auf die Maus Javascript-Code tauscht blitzschnell das Bild aus eigene JavaScript-Effekte / Ereignisse können definiert werden

43 Animation ist Daumenkino GIF-Grafiken Grafiken können animiert werden, indem viele Bilder hintereinander liegen diese werden beim Abspielen durchgeblättert

44 Internet-Effekte Wie geht s? Photoshop nutzt die Montage über verschiedene Bildebenen Je nach gewünschtem Zustand werden verschiedene Ebenen ein- oder ausgeblendet

45 Zum Abschluß: Die geeignete Software Für den Druck Adobe Photoshop andere Programme: auf Vierfarbseparation (CMYK) achten! Adobe Illustrator Vektorgrafik Corel Draw Zum Satz Vektorgrafik QuarkXPress Adobe PageMaker Adobe InDesign Für das Internet Adobe Photoshop für komplexe Arbeiten Adobe ImageReady bei Photoshop inklusive dabei für Animation, Slicen, Rollover- Schaltflächen Macromedia Fireworks kann nur RGB kann Pixel- und Vektorgrafik Adobe Illustrator Vektorgrafikprogramm mit guter Schnittstelle zu Photoshop und Fireworks zum vorbereitenden Arbeiten von Strichgrafiken und Flächen, nicht für Fotos

46 Vielen Dank für Ihre Aufmerksamkeit Für Diskussionen und Fragen steht Ihnen unser Team natürlich jetzt und auch zu einem späteren Zeitpunkt gerne zur Verfügung!