Webdesign - Webseiten planen, gestalten - Free-Hack Library

Grafiken und Bilder im Web
TIPP: Wenn Sie freigestellte Motive auf eine neue Hintergrundfarbe
stellen, sollten Sie das Motiv ganz leicht mittels der Funktion Farbüberlagerung
mit der neuen Hintergrundfarbe einfärben. Das Motiv
und der neue Hintergrund passen dann besser zusammen.
Schwieriger wird diese Methode, wenn auf der Webseite Hintergrundbilder
hinter dem Vordergrundbild liegen, weil sich dann
darüber der Rechteckbereich des Vordergrundbildes abbildet. Eine
mögliche Problemlösung besteht darin, den Teil des Hintergrundbildes,
über dem das Vordergrundbild eingefügt ist, ebenfalls in
den Hintergrund des Vordergrundbildes einzumontieren. Dies
setzt dann eine absolute Positionierung von Vordergrundbild zu
Hintergrundbild über CSS voraus.
Freistellen durch Transparenz
Die verbreitete Vorgehensweise zum Freistellen (richtiger: Ausblenden
des Hintergrundes) ist die Anwendung der GIF-Transparenz,
ein Maskierungseffekt. Bei diesem Dateiformat lässt sich eine
(und nur eine!) Farbe als Transparenzfarbe definieren. Damit wird
sofort klar, dass Sie mit diesem Verfahren nur einen einfarbig
gleichmäßigen Hintergrund verschwinden lassen können; weiche
Übergänge, Halbtransparenzen sind nicht möglich.
Beim Arbeiten mit GIF-Transparenz müssen Sie Folgendes beachten:
Sie haben in einem Bildbearbeitungsprogramm mit Antialiasing-
Einstellung einen roten Kreis vor blauem Hintergrund erzeugt
und als GIF abgespeichert und dabei die blaue Hintergrundfarbe
auf transparent gesetzt. Wenn Sie dieses Bild in eine Webseite
mit z. B. hellen Hintergrund einfügen, wird sich der rote Kreis
mit einem bläulichen „Hof“ (dem so genannten Halo) darstellen
(Abb. 8.6.4g-i). Durch das Antialiasing findet ein weicher Übergang
zwischen rotem Kreis und blauem Hintergrund statt. Bei der
Transparenzdefinition für Blau werden aber die zwischen Blau und
Rot erzeugten Zwischenfarben nicht erfasst. Diese werden jedoch
sichtbar, wenn das freigestellte Motiv vor einer anderen als der
ursprünglichen Hintergrundfarbe positioniert wird.
Um dies zu vermeiden, muss das Motiv (der rote Kreis) bereits im
Bildbearbeitungsprogramm in die festgelegte Hintergrundfarbe
der Webseite eingerechnet werden (Antialiasing aktiviert) bzw.
die Hintergrundfarbe als Transparenzfarbe definiert werden. Die
einfache Lösung, auf das Antialiasing zu verzichten und randscharf
ASSETDESIGN 8
Abb. 8.6.4g-i: GIF-Transparenz. Der Websitehintergrund
ist die Transparenzfarbe.
(Grafik: Hammer)
279