Transparente Grafiken im Web
Elisabeth Mirtl
Da man Bilder nur mit rechteckigen Grenzen abspeichern kann und diese Form oft langweilig und störend wirkt, ist es immer wieder notwendig, Masken einzusetzen oder zumindest Transparenz vorzutäuschen.
Transparenz vortäuschen
l Im “BODY” dieselbe Hintergrundfarbe, wie im eingefügten Bild angeben;
l Allerdings besteht dabei die Gefahr, daß der Betrachter in seinem Browser die Einstellung “Always use mine” angewählt hat, d.h. er verwendet immer die selbst gewählte Hintergrundfarbe.
l Man kann dem vorbeugen, indem man im “BODY” ein kleines Backgroundbild mit der gewünschten Farbe einfügt. Mit einer doppelten Definition, nämlich “bgcolor” und “background” mit unterschiedlichen Farben, läßt sich ein netter Effekt erzielen, weil die Hintergrundfarben während des Ladens wechseln.
l Bei der vorgetäuschten Transparenz ist es notwendig, das Backgroundbild und das eingefügte Bild im selben Format zu verwenden, weil die Farben ansonsten differieren.
Transparenz mit TGIF(transparentem GIF)
Transparentes GIF, technisch auch GIF89a genannt, unterstützt das Maskieren. Transparente GIFs sind zwingend, wenn man gemusterte Hintergründe verwendet. Sie werden mit HTML wie jedes andere Bild aufgerufen.
Randlose transparente GIFs entstehen nur bei Grafiken oder Bildern mit UNGEGLÄTTETEN KANTEN, weil für die Maske, die gesetzt wird, nur eine einzige Farbe angewählt werden kann! D. h. alle geglätteten Ränder erscheinen als Ränder verlaufend zur maskierten Farbe.
Die Lösung, um diese Ränder zu vermeiden
Bei erstellten Grafiken darf bei keinem Werkzeug (Lasso, Text, Bleistift, Radiergummi etc. in Photoshop) die Option “Glätten” eingestellt sein! Die Grundeinstellung ist allerdings meistens auf “Glätten” geschaltet, also muß sie fast immer geändert werden.
Bei gescannten Grafiken (z.B. Logos, Schwarz-Weiß-Zeichnungen) kann man die Kantenglättung aufheben, indem man vom RGB-Modus in den Bitmap-Modus (Bild - Modus - Bitmap - Schwellenwert auf 50% festlegen) wechselt. Wenn man dann wieder auf den RGB-Modus zurückgeht bleiben die Linien ungeglättet.
Bei Photografien oder Illustrationen gibt es die mühevolle Variante, mit dem “viereckigen” Radiergummi (ohne Kantenglättung!) den geglätteten Rand sorgfältig wegzuradieren, oder die schnellere Variante, mit dem Lasso (ohne Kantenglättung!) die Teile, die man entfernen will, zu markieren.
Will man Schriftzüge mit Kantenglättung, Schatten oder Lichtschein verwenden, kann man sich behelfen, indem man sie auf der selben Hintergrundfarbe erstellt, die für die Zielseite geplant ist.
Dann sind die Ränder kaum mehr zu sehen.
Transparentes Gif erstellen
Im Photoshop
1. Auswahl der Maske über eine Farbe :
l vom RGB-Modus auf indizierte Farben wechseln;
l unter “Ablage - Export - Gif89a” anwählen und im Fenster die Farbe mit der Pipette anklicken, die maskiert werden soll;
l Preview und OK;
2. Auswahl der Maske über einen Kanal :
l vom RGB-Modus auf indizierte Farben wechseln;
l einen Bereich mit ungeglätteten Kanten auswählen;
l mit “Auswahl - Auswahl sichern” den Kanal speichern
l unter “Ablage - Export - Gif89a” und im Fenster bei “Transparenz aus” den Kanal anwählen;
l Preview und OK;
Transparenz mit PNG - Format
Die meisten Browser brauchen ein Plug-In, um PNG zu unterstützen, also kann man es eigentlich noch nicht verwenden.
Trotzdem: PNG-Dateien können mit 8-bit-Maskenkanälen (Alphakanälen) gespeichert werden.
D.h.man hat die Möglichkeit verlaufender Transparenz!
Man wählt zum Beispiel mit dem Lasso und einer weichen Auswahlkante einen Bereich an und speichert, wie gehabt, die Auswahl als Kanal ab. Dann bleibt man im RGB-Modus und speichert die Datei im PNG-Modus. Fertig!
Allerdings muß das Bild durch den Alphakanal mit 24-Bit gespeichert werden, die Datei wird groß!
Weitere Anwendungen, mit denen TGIFs erstellt werden können
Windows und Macintosh: Fractal Design Painter
Windows: Lview, GIFConstruction Set, Paint Shop Pro
Macintosh: Transparency, DeBabilizer (ideal, wenn man viele Bilder gleich bearbeiten will, weil Batchverarbeitung möglich!)
URLs zum Thema “Transparent Gifs”
http://sunsite.unc.edu/
boutell/faq/tinter.htm
http://204.96.160.175/
IGOR/photosho.htm
URLs für Online-Transparenz
http://www.inf.fu-berlin.de/~leitner/trans/german.html
http://www.mit.edu:8001/transweb.html
http://olympia.ucr.edu/~davec/trans.html