Visuelle Rhetorik – Tutorial 1: Extraktion einer Farbpalette

Stimmungsbild für eine Website mit Thema Kaffee

Das Tutorial zeigt Vorgehensweisen zur Extraktion und Reduzierung eines Farbschemas mit Adobe Photoshop CS3, wie man es für die Erstellung einer Website benötigt.

Im Laufe eines Website-Erstellungsprozesses stellt sich üblicherweise die Frage nach der farblichen Gestaltung der Web-Präsenz. Das Farbklima soll letztlich auch zur Botschaft, zur Aussage und zur Stimmung der Präsenz passen und diese unterstreichen. Im Teil 4 der Reihe “Visuelle Rhetorik” wird beschrieben, inwiefern Stimmungsbilder zur Klima- und Farbschemafindung beitragen können.

Vorraussetzungen:

• Stimmungsbild, welches die Aussage der Web-Präsenz verkörpert, ist vorhanden. (Bild- und Dateiformat egal)

Variante 1: Der Mosaik-Filter.

1. Bild in Photoshop öffnen.

Stimmungsbild auf weniger Farben reduziert

1. Filter Mosaikeffekt für das Bild aufrufen. (Filter ->Vergröberungsfilter -> Mosaikeffekt …)
2. In der Filtervorschau den Wert für die Größe der Mosaiksteine soweit erhöhen, bis eine sichtbare Reduktion der Farben eintritt. (Im Beispiel: 19 Quadrat)
3. Durch Klick auf OK bestätigen.
4. Mit dem Pippette-Werkzeug gewünschte Farbe als Vordergrundfarbe übertragen.
5. Auf die gewählte Vordergrundfarbe doppelt klicken. (Das Fenster “Farbwähler (Vordergrundfarbe)” öffnet sich.)
6. Farbe mit Klick auf Zu Farbfeldern hinzufügen abspeichern.
7. Für jede weitere gewünschte Farbe Vorgang ab Schritt 5 wiederholen.

Die Farbpalette kann nun für die Verwendung in anderen Adobe Programmen exportiert werden.

Vorteil: präzise Auswahl und individuelle Bestimmung der Farben.

Nachteil: Aufwendige Extraktion jeder Farbe einzeln.

Variante 2: Für Web speichern.

Einstellungen “Für Web speichern…”

1. Bild in Photoshop öffnen.
2. Bild für Web sichern. (Datei -> Für Web speichern… )
3. Unter Vorgabe “GIF 32 Dithering” auswählen. (oberer Pfeil)
4. Darunter wird eine Vorschau der reduzierten Farbpalette angezeigt.
5. Menü zur Farbpalette öffnen. (unterer Pfeil)
6. Farbpalette mit Klick auf Farbpalette speichern… abspeichern.

Die gespeicherte Farbpalette kann nun für die weitere Verwendung in die meisten Adobe Produkte eingelesen werden. Es stehen damit immer die gleichen Farbwerte zur Verfügung.

Vorteil: schnelle Reduktion “farbenfroher” Bilder.

Nachteil: mathematische Berechnung des Farbschemas, nicht zwingend harmonisch.

Variante 3: Web-Servive nutzen. (THX @ Tobi)

Variante 3 ist keine Lösung mit Photoshop, sondern setzt auf die Extraktion der Farbpalette per webbasiertem Tool.

1. http://www.cssdrive.com/imagepalette/index.php aufrufen.
2. Bild auswählen (entweder per Upload oder per URL).
3. Auf “Get Palette” klicken.
4. Palette am Seitenende entweder als CSS-Stylesheet oder als Photoshop-Farbpalette sichern.
   

   Medium Color Palette per CSS Drive.

Der Web-Service liefert nach der Verarbeitung des Bildes mehrere Palettenvarianten: Eine komplette Variante und jeweils eine (7 Farben) für die Helligkeitsstufen Light, Medium und Dark.

Vorteil: Drei Palettenvorschläge für unterschiedliche Helligkeitsstufen schnell und einfach.

Nachteil: Ergebnis sehr stark abhängig vom Klima des Ausgangsbildes.

Es ist möglich und sinnvoll, die Varianten zu kombinieren.