PhotoShop in Internet-Anwendungen

Transkript

1 Photoshop in Internet-Anwendungen 1 PhotoShop in Internet-Anwendungen Wer im Internet Bilder, Hintergründe usw. braucht, muß mit Rastergrafiken umgehen können. Dieser Text zeigt einige Anwendungen anhand von Adobe Photoshop. Die Abbildungen stammen von Photoshop 5.5. Nicht alle Werkzeuge und Optionen sind in älteren Versionen vorhanden. Inhalt: Voreinstellungen im PhotoShop Datentyp des Bildes Bildgröße Qualität (Tonwert-Korrektur) Bilder in bestimmter Größe herstellen Farben Text Vorkenntnisse Rastergrafik, Pixel, Kennzahlen, Auflösung. Sie sollten wissen, was Rasterbilder sind, was Pixel, Größe im Druck und Auflösung sind und wie diese zusammenhängen. Datentypen digitaler Bilder, Kanäle. Sie sollten wissen, wie die Eigenschaften der Pixel codiert werden, was Bitebenen, Farbtiefe und Kanäle, RGB-Bilder und indizierte Farben sind. Datei-Formate. Sie sollten wissen, was ein Datei-Format ist, was GIF, TIFF, JPEG und Targa ist, welche Datentypen damit möglich sind. Welche Dateiformate können zusätzliche Kanäle transportieren? Wenn Sie damit Schwierigkeiten haben, sollten Sie z.b. in der RIO Multimedia-Dokumentation, dem Skript von Herrn Ruhstorfer (private Homepage Wolfgang Ruhstorfer RZ) oder anderen Quellen nachlesen. Das Rechenzentrum bietet auch einwöchige Grundlagen-Kurse ( Grundlagen der Computergrafik ), sowie semesterbegleitende Themenkurse an, die in zweistündigen Sitzungen abgeschlossene Einzelthemen vermitteln (Di,Mi,Do, ca ). Diese Kurse finden Sie im RKS. Grundsätzliches Farben: Man sollte immer bedenken, daß das Bild an einem völlig unbekannten Rechner angesehen wird. Am eigenen Arbeitsplatz hat man unter Umständen die neueste und beste Grafikkarte aller Zeiten, während ein anderer Betrachter nicht selten nur 256 Farben an seinem Bildschirm zu sehen bekommt. Sie sollten Ihr Werk gelegentlich auch so betrachten. Stellen Sie die Eigenschaften der Anzeige (rechter Mausklick auf dem Desktop) auf 256 Farben. Auflösung und Bildgröße: Browser geben einen Bildpunkt im Bild auf einen Bildpunkt am Bildschirm aus. Nur die Zahl der Pixel entscheidet somit über die Größe des Bildes am Bildschirm. Die Auflösungsangabe wäre nur relevant, wenn man das Bild drucken würde. Üblicherweise setzt man Auflösungen zwischen 75 und 100dpi. Dann würde das Bild etwa in Monitorgröße gedruckt. Vermeiden Sie unbedingt Skalierungen, v.a. Verkleinerungen, durch den Browser!! Dateigröße: Je nach Zahl der Pixel, Datentyp und Dateiformat entstehen Bilddateien zwischen wenigen KiloByte und vielen MegaByte. Denken Sie immer daran: An der Universität haben Sie ein schnelles Datennetz (bis zu 1 MegaByte pro Sekunde), währen ein Modembesitzer maximal 7 KiloByte pro Sekunde bekommt. Große Dateien verursachen Wartezeiten und Kosten. Bildschirmauflösung: Viele Laptops und Multimedia-Projektoren haben auch heute noch nur 800x600 Pixel. Überprüfen Sie Ihr Werk auch mit dieser Auflösung. Im Internet ist das oberste Ziel: Angemessene Qualität und Bildgröße bei kleinstmöglicher Dateigröße.

2 Photoshop in Internet-Anwendungen 2 Voreinstellungen Photoshop ist ein kalibrierbares Programm. Es versucht z.b., Druckausgaben möglichst realistisch am Bildschirm zu zeigen. Das ist im Fall von Internet-Anwendungen natürlich unerwünscht. Folgende Voreinstellungen sind zu beachten: Bildschirm-Darstellung: Photoshop versucht, etwas bestimmtes am Bildschirm zu zeigen. Es ist für Internet-Anwendungen sinnlos, die Ausgabe auf einem Drucker zu simulieren. Wir versuchen, die Ausgabe auf einem Bildschirm zu simulieren. Lineale und Maßeinheiten: Internet-Anwendungen arbeiten ausschließlich auf der Basis der Pixel. Die Größe im Druck und die Auflösung sind irrelevant. Es macht also keinen Sinn, Größen etwa in cm anzeigen zu lassen. Wir setzen die Maßeinheit auf Pixel. Datei: Farbeinstellungen: RGB einrichten (PS5.5): Ein Zielgamma von 2.2 entspricht den üblichen Bildschirmen. Bessere Monitore haben einen einstellbaren Weißpunkt. D65 entspricht Tageslicht. Die Primärfarben sind bei billigeren Monitoren meist nicht bekannt. Datei: Voreinstellungen: Maßeinheiten&Lineale Für Internet-Anwendungen ist ausschließlich die Zahl der Pixel maßgeblich. Man setzt daher die Maßeinheit der Lineale auf Pixel. Dann werden auch alle Informationen in Pixeln angegeben.

3 Photoshop in Internet-Anwendungen 3 Beispiel: Ein Bild aus der Werbung Ein Bild aus der Milch-Werbung: Saftige Wiesen, ein See, in dem sich Himmel und Natur spiegeln,... Datentyp Im Internet besteht das höchste Ziel darin, möglichst kleine Dateien zu erzeugen. Der Beitrag des Datentyps hierzu ist zunächst klar: Bilder mit indizierten Farben brauchen, bis auf den Platz für die Palette, (zunächst) 1/3 des Plattes von RGB-Bildern. Sie haben zwar nur max. 256 verschiedene Farben, dafür keine Kompressionsartefakte. Geschickt gewählte Farben (Paletten) können dazu führen, daß das Bild auch auf leistungsschwachen Rechnern gut aussieht. Farbbilder im RGB-Modus können 16 Millionen Farben darstellen, brauchen zunächst aber sehr viel Platz. Daher werden sie gerne komprimiert (JPEG), was zu Artefakten führen kann. Für manche ist daher die Sache klar: Internet=Indizierte Farben. Das ist schlichtweg falsch! Bei der Speicherung werden Kompressionsverfahren verwendet, deren Auswirkung erst nach dem Speichern beurteilt werden kann: GIFs werden manchmal unerwartet groß, JPEGs enthalten nicht selten Artefakte. Datentyp und Dateiformat beim Speichern müssen also zusammen betrachtet werden. Man kann ein paar Regeln aufstellen: Indizierte Farben verwendet man, wenn wenige Farben vorliegen und scharfe Kanten wichtig sind. Beispiel: Hardcopies von Bildschirmdialogen. Fotos sollte man immer auf beide Weisen versuchen: Wenn indizierte Farben ohne Dithern nicht möglich sind oder das Bild mit wenigen Farben nicht gut aussieht, ist häufig RGB und JPEG angesagt.

4 Photoshop in Internet-Anwendungen 4 Bild: Modus Im Modus-Menue stellt man den Datentyp des Bildes ein. Für das Internet kommen RGB oder Indizierte Farben in Frage. CMYK ist für Drucker. Übergang zu indizierten Farben Je mehr Farben ein Bild enthält, umso problematischer wird die Umwandlung. Vorher könnte man daher die Zahl der Farben im Bild reduzieren (Bild:Einstellen:Tontrennung). Je weniger, desto besser für s Internet: Die Palette wird kleiner, im Bild gibt es größere Bereiche in der selben Farbe, was die Komprimierung verbessert. Unter Bild:Modus:Indizierte Farben erscheint nebenstehender Dialog. Exakt steht für die Palette nur dann zur Verfügung, wenn das Bild weniger als 256 Farben enthält. Experimentieren Sie! Wenn das Bild zu große Artefakte bekommt (Farbflächen, wo keine sind, Punktwolken,..) sollten Sie es dann doch aufgeben und das RGB-Bild als JPEG abspeichern.

5 Photoshop in Internet-Anwendungen 5 Unser Bild im GIF-Format: Links mit der WEB-Palette ohne Dithern, rechts mit der WEB-Palette mit Diffusion Dithern. Überraschenderweise sieht unser Bild, wenn es richtig, in den Modus Indizierte Farben überführt wurde, kaum anders aus, als im RGB-Modus. Die Entscheidung fällt beim Speichern: Datei-Format Das Speichern hat für Internet-Anwendungen überragende Bedeutung. Ein und dasselbe Bild kann extrem unterschiedlich viel Platz beanspruchen. Dieser bedeutet bares Geld für den Anbieter und Benutzer. Derzeit sind 3 Dateiformate üblich: GIF, JPEG und PNG. GIF Datentyp: indizierte Farben Maximal 256 Farben in einer Palette Kompression mit run length encoding: Je größer die Bereiche mit der selben Farbe, je kleiner die Datei. Es wird empfohlen, vor der Speicherung eine Reduktion der Farben durchzuführen (Tontrennung). Keine Kompressionsartefakte. Interlaced GIF: Das Bild wird zeilenweise aufgebaut. Animated GIF: Eine Datei enthält mehrere Bilder, die vom Browser automatisch nacheinander abgespielt werden. So entsteht eine Art Endlosfilm. JPEG Datentyp: RGB-Echtfarben Nicht verlustfreie Kompression. Faktoren bis 1:100 möglich. Gefahr der Bildung von Artefakten: Bereiche mit sehr ähnlichen Farben werden zu Rechtecken gleicher Farbe. Diese können sehr groß und unübersehbar werden. Progressive Scan: Das Bild wird streifenweise aufgebaut. PNG Neues Dateiformat mit den Eigenschaften von GIF und JPEG ohne deren Nachteile. Wird leider nicht von allen Browsern unterstützt. Datentyp: Indizierte Farben oder RGB. Es kann vorkommen, daß ein und dasselbe Foto als GIF-Datei 300KB beansprucht, als ebenso gut aussehende JPEG-Datei dagegen nur 30kB! Fazit: Man muß es probieren. Keinesfalls ergeben Indizierte Farben und GIF pauschal das optimale Verfahren. Es hängt vom Inhalt ab. GIF-Export in PhotoShop 5.5 Das GIF-Format wird in Photoshop 5.5 nicht durch Speichern bzw. Kopie speichern erstellt, sondern durch einen Export-Filter. Datei:Exportieren:GIF89a exportieren.

6 Photoshop in Internet-Anwendungen 6 Links sehen Sie den Dialog für RGB-Bilder, rechts den Dialog für den Modus Indizierte Farben. Transparenz in GIF Man kann Transparenz entweder durch eine gespeicherte Auswahl oder durch Anklicken der gewünschten Bereiche erreichen. Hat man transparente Bereiche definiert, so werden diese in der Transparenz Austauschfarbe angezeigt. Diese kann man durch Klicken in dem Farbfeld ändern. Transparenz wird in GIF mit 1 Farbe, die vollständig transparent ist, erzeugt. Es gibt keine Übergänge! Alpha-Kanäle gibt es nur bei PNG. Wenn z.b. ein Bildausschnitt mit vielen Farben transparent sein soll, wird dieser auf 1 Farbe gebracht und diese als transparent erklärt. Analoges geschieht, wenn Sie mehr als 1 Transparenz-Farbe mit der Pipette wählen. In beiden Fällen wird der Bildinhalt verändert!! Trick: Wenn Sie weiche Übergänge brauchen, geht das nur zu einer homogenen Hintergrundfarbe. Wählen Sie in HTML und für den Bildhintergrund die selbe Farbe. Erzeugen Sie in Photoshop eine weiche Kante zum Hintergrund und definieren Sie die Hintergrundfarbe als transparent. JPEG in PhotoShop 5.5 JPEG wird durch die Kommandos Speichern bzw. Kopie speichern unter erzeugt. Man sollte unbedingt die Vorschau beachten bzw. nicht vergessen, das gespeicherte Bild zu öffnen und anzusehen. Je stärker man komprimiert ( kleine Datei ) und je mehr Bereiche mit sehr ähnlichen Farben das Bild hat, umso höher wird die Wahrscheinlichkeit unansehnlicher Artefakte.

7 Photoshop in Internet-Anwendungen 7 Zunächst gilt: Je kleiner die Datei, umso besser für die Ladezeit (Feld Größe). Leider wächst die Gefahr der Bildung von Artefakten (Vorschau). Mehrere Durchgänge (progressive scan) verbessert das Anzeigeverhalten des Bildes im Browser: Es wird zeilenweise aufgebaut und ist früher zu sehen. Bildgröße Raster-Bilder haben neben der Pixelmatrix auch 2 Kennzahlen: Die Auflösung (dpi) und die Größe im Druck. Für Textverarbeitungssysteme bestimmt die Größe im Druck die Größe des Bildes. Die Auflösung ist als Qualitätsmaß für die Frage zuständig, ob ausreichend viele Pixel vorhanden sind. In Internet-Anwendungen ist die Lage anders: Nur die Zahl der Pixel bestimmt die Größe des Bildes am Bildschirm. Für Internet-Anwendungen gibt es keine vordefinierte Größen. Man orientiert sich an den gängigen Auflösungen der Bildschirme: 640x480 Pixel 800x600 Pixel 1024x768 Pixel 1152x864 Pixel 1280x1024 Pixel Erschwerend kommt hinzu, daß diese Bildpunkte auf Monitore unterschiedlicher Größe ausgegeben werden. So kann man kaum vorhersagen, wie groß ein Bild tatsächlich zu sehen ist. Man kann es nur relativ zur Arbeitsfläche des Browsers definieren. Üblicherweise definiert man sich einen Standard-Bildschirm, derzeit meist 800x600 oder 1024x768 Pixel, und ein Layout seiner Seiten. In diesem ermittelt man experimentell passende Bildgrößen. Übliche Zahlen sind 800x x x240 Natürlich sind auch beliebige andere Größen möglich. Oft zeigt man zunächst ein kleines Bild (100x100) an, das als Link zu einem größeren führt. So sehen die Benutzer nur im Detail, was sie wirklich wollen. Man sollte sich zusätzlich überlegen, auf welchen Geräten das Werk halbwegs gut aussehen soll. Aktuelle Laptops und Multimedia-Projektoren in bezahlbaren Regionen haben meist 800x600 Pixel, während die allermeisten Bildschirme wohl auf 1024x768 Pixel stehen.

8 Photoshop in Internet-Anwendungen 8 Bild: Bildgröße: Nur, wenn unten Bild neu berechnen angewählt ist, kann oben die Zahl der Pixel verändert werden. Die Angaben des Blocks Ausgabegröße sind für Internet- Anwendungen ohne Bedeutung. Beachten Sie, daß Sie eine Skalierung durchführen und die Bildqualität verändern, wenn Sie die Pixelzahlen verändern! Wenn man die Proportionen nicht erhält, verzerrt man zusätzlich das Bild. Bilder in bestimmter Größe herstellen Bilder für Internet-Anwendungen sollten in der richtigen Größe (siehe Bildgröße) bereitgestellt werden, um Qualitätsverluste durch (unbeabsichtigte) Skalierungen und Beschneidungen zu vermeiden. Es gibt mehrere Wege, bei einer bestimmten Größe zu enden. Man sollte im Auge behalten, ob eine Skalierung (und damit ein Qualitätsverlust) erfolgt, ob etwas abgeschnitten wird usw. 1. Bildgröße Mit dem selben Dialog, mit dem man die Größe eines Bildes abfragen kann (s.o.), kann man auch eine neue Größe erzeugen, wenn Bild neuberechnen angewählt ist. Dieser Weg impliziert eine Skalierung und Interpolation der Pixel. Wenn man die Proportionen nicht erhält, verzerrt man das Bild. So landet man nur dann bei der exakten Bildgröße, wenn das Ausgangsbild das richtige Seitenverhältnis hatte. 2. Arbeitsfläche Eine Veränderung der Bildgröße ohne Skalierung (bzw. Verzerrung) bietet das Kommando Arbeitsfläche im Bild-Menue. Ist die neue Größe größer als die alte, wird in der Hintergrund- Farbe aufgefüllt, ist die neue Größe geringer, wird von dem ursprünglichen Bild abgeschnitten. Man schaltet die Einheiten auf Pixel und wählt unter Position, wo angestückelt bzw. abgeschnitten wird.

9 Photoshop in Internet-Anwendungen 9 Ist die neue Arbeitsfläche größer als die alte, wird in der Hintergrundfarbe, hier Schwarz, aufgefüllt. 3. Auswahl fester Größe Ist das aktuelle Bild etwas zu groß und/oder hat das falsche Seitenverhältnis, hilft eine Auswahl fester Größe und anschließendes Freistellen (Bild-Menue). Es wird nicht skaliert. 4. Cropping Tool mit fester Größe Will man aus einem beliebig großen Ausschnitt in der richtigen Größe enden, wählt man das Cropping Tool. Achtung: Es erfolgt praktisch immer eine Skalierung! Qualität (Tonwert-Korrektur) Der Datentyp ermöglicht zwar gute Bildqualität, bringt diese aber nicht zwangsläufig mit sich. Gute Bilder haben eine gute Helligkeit und guten Kontrast. Dies kann sehr einfach mit dem Tonwerthistogramm ermittelt werden, wenn man sich über den Bildtyp klar geworden ist (High Key, Low Key, Average Key). Average Key-Bilder haben z.b. ein gleichmäßiges Tonwerthistogramm über das gesamte Intervall. Das ideale Werkzeug für Fragen von Helligkeit und Kontrast, dem Verhältnis der Lichter, Mitteltöne und Tiefen zueinander (Gamma), ist die Tonwert-Korrektur: Man schiebt die schwarzen und weißen Dreiecke an das Histogramm heran bzw. ca. 5% hinein. Dieses Werkzeug kann auch umgekehrt betrieben werden, um Kontraste zu verringern und Bilder aufzuhellen oder abzudunkeln. So kann man sehr schön Bilder für Hintergründe basteln.

10 Photoshop in Internet-Anwendungen 10 Bild: Einstellen: Tonwertkorrektur: Dieses Werkzeug ist zur Verbesserung der Bildqualität und zur Erzeugung dezenter und unaufdringlicher Hintergründe gleichermaßen geeignet. Farben Farben sind im Internet sehr problematisch: Allgemeine Farben (Tertiärfarben) können nicht auf allen Bildschirmen angezeigt werden. In diesen Fällen werden sie mehr oder weniger gut approximiert, was praktisch immer zu Artefakten führt: Punktwolken, Mustern, Linien und Kanten, wo keine sind etc. Datentypen mit vielen Farben (RGB) erzeugen sehr große Datenmengen, die durch Kompression sekundär verringert werden. Hierdurch entstehen wiederum leicht Artefakte. Es gibt. sog. WEB-sichere, ditherfreie, Farben. Diese können auch auf Bildschirmen mit wenigen Farben (mindestens 256) ohne Approximation dargestellt werden. Pro Primärfarbe gibt es 6 Zustände (0, 51, 102, 153, 204, 255). Damit kann man 216 verschiedene Farben darstellen. Es verbleiben auch ausreichend viele Farben (40) für die Fenster, Menues usw. des Betriebssystems. Wenn man vorhat, das GIF-Format zu verwenden, sollte man die Zahl der Farben im Bild möglichst gering halten. Photoshop kann das mit dem Kommando Bild:Einstellung:Tontrennung. Der Farbwähler liefert viele schöne Farben und deren hexadezimale Notation (im Beispiel #D72121) für HTML. Auf Bildschirmen mit 256 Farben führen diese im allgemeinen Fall zu unvorhersagbaren Ergebnissen, da sie approximiert werden müssen.

11 Photoshop in Internet-Anwendungen 11 Weniger kann mehr sein: Die WEB-Farben können auch auf Bildschirmen mit nur 256 Farben sauber, d.h. ditherfrei, angezeigt werden. Vor allem für Hintergrundfarben ist es wesentlich, keine unerwünschten Muster durch Farbapproximation zu erhalten. Wie bekommt man nun Bilder mit WEB-tauglichen Farben: Abspeichern eines Bildes mit beliebigem Datentyp im GIF-Format. Man wird nach einer Palette gefragt und wählt eine WEB-taugliche. Die Qualität hängt vom Exportfilter ab. Die Zahl der Farben ist die große Frage. Man muß experimentieren. Man speichert die ganze Palette, auch ungenutzte Farben. Umwandeln eines Bildes im Modus RGB in den Modus indizierte Farben. Man bekommt mehrere Modi und Paletten angeboten und wählt eine WEB-taugliche. Man sollte versuchen, Dithern zu vermeiden. Wenn es zu schlechten Bildern führt, sollte man es lassen und im JPEG-Format speichern. Eine Kombination aus den beiden ersten: Man beginnt mit RGB, wandelt in indizierte Farben mit WEB-Palette, wandelt zurück nach RGB (hat also nur noch WEB-Farben im Bild), speichert im GIF- Format mit exakter Palette. So erhält man die kleinste Farbpalette: Es sind max. 216 Farben im Bild, in der Datei stehen nur die tatsächlich genutzten. Speichern im JPEG-Format hat nicht den gewünschten Effekt, da die Farben durch die Kompression verändert werden. Text Texte braucht man für Titel, Untertitel, Kommentare usw. Man muß einiges im Auge behalten: Lesbarer Text braucht einen Kontrast zum Hintergrund. Dies kann durch geeignete Farbwahl geschehen, Schlagschatten (siehe Effekte), vorbereitete Hintergründe mit wenig Kontrast (siehe Qualität (Tonwert-Korrektur)), Schildchen als Hintergrund (siehe Effekte).

12 Photoshop in Internet-Anwendungen 12 Das Text-Werkzeug von Photoshop erzeugt edierbare und verschiebbare flache ( zweidimensionale) Textobjekte. Antialiasing (Glätten) verbessert den Übergang zum Hintergrund. Effekte, wie Schlagschatten, räumliche Ausdehung (3D-Effekt) müssen anderweitig realisiert werden, wie etwa über Ebenen (s.u.). Text-Objekte kann man mit der rechten Maustaste anklicken und mit Effekten versehen (s.u.). Der Text Milch hat eine abgeflachte Kante mit Relief als Effekt bekommen. Der Text bleibt edierbar und verschiebbar. Der Effekt kann ebenso jederzeit geändert werden.

13 Photoshop in Internet-Anwendungen 13 Transparenz Es gibt derzeit nur zwei Dateiformate, die im Browser transparente Inhalte ermöglichen: GIF und PNG GIF kennt nur einen Grad an Transparenz: vollstängige Transparenz. PNG unterstützt Alpha-Kanäle: Für jedes Pixel können 256 Grade der Transparenz zwischen vollständig durchsichtig und vollständig undurchsichtig eingestellt werden. GIF kann nur eine einzige Farbe als transparent erklären: Wenn Bildbereiche mit vielen Farben transparent sein sollen, wird beim Speichern das Bild verändert! Effekte Photoshop 5.5 hat eine relativ unbekannte, aber sehr praktische Funktionalität: Die Einstellungsebene mit Effekten. Nebenstehendes Bild soll ein eingestanztes Schild erhalten. Innerhalb des Schildes soll der Hintergrund für Text optimiert werden. Wir starten mit einer Ebene und einer einfachen rechteckigen Auswahl, die zum Schild werden soll. Die Ebene wird mit der rechten Maustaste angeklickt. In dem Popup wird eine neue Einstellungsebene angelegt. Alles Folgende wirkt nur auf den ausgewählten Bereich. Wir wählen eine Tonwertkorrektur und verändern den Kontrast innerhalb der Auswahl wunschgemäß. Anschließend wird die Einstellungsebene mit der rechten Maustaste angeklickt und das Effekte- Kommando gegeben.

14 Photoshop in Internet-Anwendungen 14 Bei den Effekten steht ein Schlagschatten zur Verfügung. Man kann mehr als einen Effekt gleichzeitig anwenden. Für Schilder eignen sich Abgeflachte Kante und Relief in den verschiedenen Stilen sehr gut. Dies wurde aus der rechteckigen Auswahl nach Anwendung eines Reliefs an allen Kanten. Verschiebt man die Auswahl, verschiebt sich das Schild. Auch die Tonwertkorrektur kann jederzeit verändert werden.

15 Photoshop in Internet-Anwendungen 15 Weitere Infos Im Datennetz finden Sie, soweit vorhanden, Handbuch und Lehrgang: RIO\USER1:IOSERVER\DOKU\Photoshop\Training\contents.pdf RIO\USER1:IOSERVER\DOKU\Photoshop\Handbuch50LE Andere Tools können so Manches besser: Ulead Smartsaver Pro: Speichern und Optimieren in GIF, JPEG und PNG. Siehe Ulead PhotoImpact: 3D-Effekte, Schaltflächen