W. Esser Networks GmbH, Berlin Neues Dienstleistungen Produkte Service International
Site Suchen Kontakt

 

 

Über Browser-Ränder
Pixelgenau mit Illustrator
Web-Palette in Gefahr
Palette gut, alles gut
 

Palette gut, alles gut

Über die Kunst, in Photoshop die richtige Palette zu erzeugen.

Christian Augustin, Stand 98-09-14

Alles Handarbeit | Hin und her | Jenseits der Web-Palette | Wer zählt die Versionen | Take That! | Am Ziel | Anleitung: Die Web-Palette reduzieren | Anleitung: Die flexible Palette optimieren | Quellen

Wer sich die Arbeit leicht machen will und ein RGB-Bild mit dem Photoshop-Exportfilter GIF89a nach GIF konvertiert, der bekommt fast nie das, was er eigentlich wollte: Er bekommt keine Web-Palette angeboten, sondern System, und die Einstellung Flexibel läßt in der Palette Phantasiefarben entstehen.

Für die gezielte Web-Optimierung sind beide Einstellungen unbrauchbar. System enthält 40 Farben, die nicht zur Web-Palette gehören, und die Palette ist immer 256 Farben groß. Und die falschen Farben bei Flexibel machen es unmöglich, in einem Bild homogene Flächen mit Farben aus der Web-Palette zu erhalten.

Es gibt Programme, die eine optimale Umsetzung nach GIF versprechen, beispielsweise Adobe ImageReady oder Ulead GIF SmartSaver. Ist die teure Anschaffung eines Zusatzprogramms oder Plug-Ins unvermeidlich? Nein! Mit Photoshop 4 und 5 geht es auch -- wenn das Programm richtig eingesetzt wird.

Alles Handarbeit

Soll ein RGB-Bild umgesetzt werden, so bietet Photoshop unter Bild > Modus den Eintrag Indizierte Farben... an. Im dazugehörigen Dialog gibt es alles, was das Herz begehrt: Exakt, wenn das Bild weniger als 256 Farben enthält; oder World Wide Web, wenn die Web-Palette gewünscht ist; und Flexibel, wenn fotografische Motive umzusetzen sind.

Und wie wird aus einem Bild mit indizierten Farben ein GIF? Einfach mit Speichern unter als CompuServe GIF speichern! Soll noch eine transparente Farbe gewählt werden, kann auch der GIF89a-Exportfilter benutzt werden -- der sieht jetzt nämlich anders aus ...

Hin und her

Wir haben also World Wide Web gewählt und das Bild von RGB-Farbe nach indizierte Farben konvertiert: Die Palette enthält jetzt 256 Farben und wird komplett in der GIF-Datei gespeichert. Und wenn nicht alle Farben der Palette genutzt werden, wie werden wir die überflüssigen Paletteneinträge los? Dafür gibt es einen Trick: Das Bild wieder nach RGB-Farbe zurückwandeln!

Das RGB-Bild enthält jetzt die Farben der Web-Palette, die tatsächlich gebraucht werden. Bei erneuter Konvertierung nach indizierte Farben bietet Photoshop die Option Exakt an -- und erzeugt eine Palette, die ausschließlich verwendete Farben enthält. Beim Speichern wird dann diese verkleinerte Palette und damit auch eine kleinere Datei gespeichert.

Jenseits der Web-Palette

Die Web-Palette garantiert zwar die gleiche Darstellung auf fast allen Systemen, ist aber für fotografische Motive nicht gut geeignet. Kommt JPEG ebenfalls nicht in Frage, so bleibt die Anwendung einer flexiblen Palette. Dabei wird von Photoshop eine Palette zusammengestellt, die der Farbverteilung im Bild am ehesten entspricht.

Eine flexible Palette kann oft mit wenigen Farben eine befriedigende Darstellung erzielen, so daß Dithern bei der Bilderstellung verzichtbar wird. Allerdings werden solche Bilder auf Systemen mit 256-Farben-Anzeige häufig gedithert dargestellt.

Wer zählt die Versionen

Bei genauerer Betrachtung ist in Photoshop flexible Palette nicht gleich flexible Palette: Bis Version 4 wurden die Farben vor der Umsetzung vergröbert, so daß in der resultierenden Palette die Originalfarben nicht mehr auftauchten. Das ist ein Problem, wenn das Bild homogene Farbflächen aus der Web-Palette enthält, damit sie nicht gedithert werden.

Mit Version 5 hat Adobe an die geplagten Web-Designer gedacht und den Algorithmus für die flexible Palette überarbeitet: Jetzt enthält die Palette auch Farben aus dem Bild -- wenn sie häufig genug darin vorkommen. Ohne Eingriffe kommt es deshalb immer noch zu Farbverschiebungen.

Take that!

Deshalb kann in Version 5 die flexible Palette in Photoshop gezielt beeinflußt werden: Sind Bildbereiche mit Auswahlwerkzeug oder Lasso markiert worden, so werden die darin enthaltenen Farben möglichst genau umgesetzt.

Die Größe der gewählten Bereiche beeinflußt dabei die Gewichtung der Farbumsetzung. So können homogene Farbflächen mit Web-Farben vor Veränderung geschützt werden.

Am Ziel

Die folgende Tabelle zeigt die beschriebenen Umsetzungen des gleichen Bildes (in doppelter Größe). Unerwünschte Farbabweichungen in den Flächen sind rot hervorgehoben. Im Anschluß an die Tabelle stehen noch zwei schrittweise Anleitungen für reduzierte Web-Palette und optimierte flexible Palette.

JPEG, RGB, ohne Komprimierungen
Grau oben RGB 204/204/204
Grau links RGB 153/153/153
Rot vorne RGB 255/51/0
GIF, Web-Palette mit Dithering, reduziert
Grau oben RGB 204/204/204
Grau links RGB 153/153/153
Rot vorne RGB 255/51/0
GIF, flexible Palette (64 Farben), Photoshop 4
Grau oben RGB 206/206/206
Grau links RGB 156/156/156
Rot vorne RGB 255/49/0
GIF, flexible Palette (64 Farben), Photoshop 5
Grau oben RGB 204/204/204
Grau links RGB 152/152/152
Rot vorne RGB 255/51/0
GIF, flexible Palette (64 Farben), Photoshop 5, optimiert
Grau oben RGB 204/204/204
Grau links RGB 153/153/153
Rot vorne RGB 255/51/0

Die Web-Palette reduzieren

GIF-Bilder mit reduzierter Web-Palette erzeugen Sie in Photoshop 4 und 5 mit folgenden Schritten:

1. Das Bild muß im RGB-Modus vorliegen. Prüfen Sie das mit Bild > Modus; der Menüpunkt RGB-Farbe muß ein Häkchen haben. Falls nicht, gehen Sie einfach auf RGB-Farbe.

2. Das Bild auf die Web-Palette umsetzen. Dazu Bild > Modus > Indizierte Farben... wählen.

3. Im Dialog Indizierte Farben bei Palette: den Eintrag World Wide Web, bei Dither: je nach Motiv Ohne, Diffusion oder Muster und bei Color Matching: (erst bei Photoshop 5) die Option Best wählen. Den Moduswechsel mit OK bestätigen.

4. Das Bild mit Bild > Modus > RGB-Farbe wieder nach RGB konvertieren.

5. Erneut Bild > Modus > Indizierte Farben... wählen. Die von Photoshop vorgeschlagene Einstellung Exakt mit OK bestätigen.

6. Das Bild wahlweise mit Datei > Speichern unter... oder Datei > Export > GIF98a exportieren... als GIF speichern.

Anmerkung: Dieser Vorgang kann als Action aufgezeichnet und anschließend auf beliebige Bilder angewendet werden (beispielsweise im Batch-Betrieb für ein ganzes Verzeichnis). Leider führt die Anwendung dieser Action bei Photoshop 4 (unter Windows) zu Palettenfehlern. Mit Photoshop 5 funktioniert es einwandfrei ...

Die flexible Palette optimieren

Ein Bild mit optimierter flexibler Palette erzeugen Sie in Photoshop 5 mit folgenden Schritten:

1. Das Bild muß im RGB-Modus vorliegen. Prüfen Sie das mit Bild > Modus; der Menüpunkt RGB-Farbe muß ein Häkchen haben. Falls nicht, gehen Sie einfach auf RGB-Farbe.

2. Mit dem Auswahlwerkzeug oder dem Lasso bei gedrückter Umschalt-Taste einige Bildbereiche auswählen, deren Farben möglichst exakt erhalten bleiben sollen. Dabei homogene Flächen mit Farben aus der Web-Palette berücksichtigen.

3. Bild > Modus > Indizierte Farben... wählen. Im Dialog Indizierte Farben für Palette: den Eintrag Flexibel wählen. Die weiteren Einstellungen, speziell für Farbtiefe, Farben und Optionen richten sich nach gewünschter Dateigröße oder Bildqualität. Ist die Option Vorschau aktiviert, kann die Wirkung direkt im Bild beurteilt werden. Gehen Sie mit dem Zeiger über das Bild, können Sie in der Info-Palette Originalfarbwerte und umgesetzte Werte ablesen.

4. Den Moduswechsel mit OK bestätigen. Anschließend kann die entstandene Palette mit Bild > Modus > Farbtabelle... überprüft werden.

5. Das Bild wahlweise mit Datei > Speichern unter... oder Datei > Export > GIF98a exportieren... als GIF speichern.

Quellen

Adobe Tips: Maximizing the Web-Safe Color Palette
(http://www.adobe.com/studio/
tipstechniques/wpdphsf2/main.html)

David Siegel, Creating Killer Web Sites, Design Tips: Reduce Colors
(http://www.killersites.com/1-design/reduce.html)

[Home] [Neues] [Dienstleistungen] [Produkte] [Service] [Site] [International]

Stand Samstag, 27. März 2004

Copyright © Samstag, 27. März 2004 by W. Esser Networks GmbH, Berlin (Germany)
E-Mail:
info@esser.com. Rechtliche Hinweise. Impressum.