Transparentes GIF

Der Vorteil eines transparenten GIFs liegt auf der Hand: Man kann es vor allen Hintergründen einbinden, ohne eine unschönes »Außenrum« in Kauf nehmen zu müssen. Am Häufigsten wird es deshalb bei Logos aller Art eingesetzt, z.B. Firmenlogos.

Nachfolgend werde ich zeigen, wie man so ein transparentes GIF mit dem Picture Publisher erstellt. Ich verwende dazu ein simples Motiv, nämlich einen blauen Kreis.

Ein uns dasselbe GIF vor unterschiedlichen Hintergründen.

Bevor wir ein GIF transparent machen können, müssen wir darauf achten, dass der Hintergrund des Motives wenn möglich nur eine Farbe besitzt und dass diese Farbe auch nicht im Motiv selbst vorkommt. In unserem Beispiel (blaue Kugel) habe ich mich für einen weißen Hintergrund entschieden.

Um ein transparentes GIF anzufertigen gehen wir nun in unsere GIF-Optionen unter → Datei → Export → GIF-Export...


Für das Transparent-Machen hält der Picture zwei Hilfs-Werkzeuge bereit, die wir schon aus dem Hauptprogramm kennen: das Zauberstab-Werkzeug (automatische Maske) und die Pipette. Mit dem Zauberstab kann man gleich- oder ähnlichfarbige Bereiche auswählen. Diese werden dann aber nicht Bestandteil einer Maske, sondern direkt in die Transparent-Palette gestellt oder mit anderen Worten: sie sind im Browser später nicht zu sehen. Mit der Pipette kann man überprüfen, welche Farbe im Bild wo in der Farbpalette aufgelistet ist. Dies ist hilfreich, wenn man sich gezielt Farben herauspicken möchte, um sie transparent zu stellen.


Im Feld »Hintergrundfarbe« kann man einstellen, welche Farbe an die Stelle einer transparent gewordenen Farbe treten soll. Diese Einstellmöglichkeit dient alleine der Anschaulichkeit. Der Benutzer bekommt damit eine genaue Vorschau darüber, wie das Motiv wirkt, wenn an Stelle einer transparenten Farbe nur noch der Hintergrund zu sehen ist. Aber nun zurück zu unserem Beispiel.


Bei unserem Kreismotiv habe ich mich entschieden, als Optimierungseinstellung 16 Farben, optimierte Palette, ohne Dithern zu verwenden. Demzufolge sieht unsere Farbpalette dann wie links abgebildet aus. Theoretisch kann nun jede dieser 16 Farben unsichtbar gemacht werden.


Wir wollen aber selbstverständlich nur diejenigen Farben unsichtbar machen, die nicht zum Motiv gehören, sondern zum Hintergrund. Auf den ersten Blick ist dies die Farbe Weiß. Wir klicken diese in der Farbpalette an (sofern sie nicht schon angeklickt ist).


Nach Klick auf den »Hinzufügen«-Button wird diese Farbe Weiß dann in die Transparenzpalette verschoben. An die Stelle der weißen Farbe tritt in der Farbpalette die gewählte Hintergrundfarbe (Rot). Im Vorschaufenster wird das Weiß ebenfalls durch das Rot ersetzt:


Die Transparenzpalette zeigt alle Farben eines Bildes an, die im Browser transparent sind und an deren Stelle der Hintergrund zu sehen sein wird. Das oben abgebildete Ergebnis ist noch nicht befriedigend, denn es sind noch etliche »Blitzer« zu sehen (also helle Überbleibsel an der Objektkante). Diese sind die Hauptgefahr bei der Erstellung eines transparenten GIFs und im Web sehr häufig zu sehen. Bevor man ein transparentes GIF mit so einem unsauberen Rand online stellt, sollte man lieber ganz auf Transparenz verzichten, denn damit macht man den vielleicht vorhandenen positiven Eindruck vom Design mit Sicherheit kaputt.

In unserem Beispiel bleibt uns nichts anderes übrig, als nachzuarbeiten. Wir haben zwei Möglichkeiten. Entweder wir erhöhen den Farbbereich-Wert und klicken nochmals das Außenrum an, oder wir markieren nacheinander die Farben in der Farbpalette – die hellsten Blautöne zuerst – und fügen sie über »Hinzufügen« der Transparenzpalette hinzu. Dabei können wir beobachten, dass die hellen Stellen am Rand mit jeder transparent gemachten Farbe abnehmen, dafür aber auch der Rand kantiger wird. Dies ist keine Überraschung, denn die hellen Blautöne wurden schließlich dazu verwendet, die Kanten zu glätten.

Schließlich haben wir einen akzeptablen Kompromiss gefunden. Nicht alle helleren Blautöne sind transparent geworden, denn einige sind dunkel genug, um nicht negativ hervorzuscheinen:


Folgende Qualitäts- oder Erstellungsprobleme treten bei einem transparentem GIF in der Regel auf:

• Bei GIFs mit weichen Schatten, die in den Hintergrund laufen, sollte man keine Transparenz einsetzen, das Ergebnis wird immer unsauber. (Aus diesem Grund setze ich auch keine Transparenz auf meiner Site ein.)
• Wenn die Hintergrundfarbe auch innerhalb des Motives auftaucht (und damit Pixel innerhalb des Motives transparent werden), empfehle ich folgende Strategie: Aus dem Motiv ein Objekt machen, mit Hilfe der zahlreichen Maskierungswerkzeuge und dem Befehl → Objekt → Objekt von Maske erstellen. Anschließend das Basisbild (den Objekthintergrund) mit einer Farbe einfärben, die zum einen ausreichend Kontrast zum Objekt bietet und zum anderen nicht selbst im Objekt enthalten ist.

Auch beim transparentem GIF gilt schließlich: Hat man sich für eine Einstellung entschieden, dann gelangt man mit einem Klick auf OK in das Speichern-Menü und braucht nur noch den Dateinamen festzulegen.