Home  >  Tutorials  >  Basics
>  Transparente GIFs
E-mail this tutorial to a friend Email to a Friend

Transparente GIFs

Von: Doro Sensen
 
Auf Webseiten sieht man oft teilweise transparente Bilder, bei denen der Hintergrund durchscheint. Es ist gar nicht so schwer, diese sogenannten "transparenten GIFs" zu machen.
 
Transp. GIFs selbstgemacht
Konvertieren in transp. GIFs
Antialiasing & transp. GIFs
In diesem Tutorial werden zwei Arten beschrieben, transparente GIFs zu erstellen: von Anfang an selbstgemacht sowie durch Konvertieren eines nicht-transparenten Bildes. Der letzte Teil dieses Tutorials handelt über Antialiasing und transparente GIFs.
 
Download für das TutorialDownload-Datei
Für den zweiten Teil dieses Tutorials benötigt ihr ein Bild zum Konvertieren in ein transparentes GIF; zu diesem Zweck könnt ihr die Datei links downloaden.
 
Neues Bild erstellen

Transparente GIFs selbstgemacht

Erstellt ein neues Bild:
– Breite = 150
– Höhe = 150
– Hintergrundfarbe = weiß
– Bildtyp = 16,7 Millionen Farben
 
Werkzeug "Auswahl" Klickt auf das Auswahl-Werkzeug in der Werkzeugleiste:
– Auswahltyp = Quadrat
– Randschärfe = 0
– Antialiasing = nicht aktiviert
 
Zieht eine quadratische Auswahl auf, ca. 1 cm vom Bildrand entfernt.
 
Werkzeug "Farbfüllung" Klickt auf das Werkzeug "Farbfüllung" in der Werkzeugleiste:
– Anpassungsmodus = Normal
– Auswahlmodus = Kein
– Toleranz = 0
– Deckfähigkeit = 100
– Auswahl/Verbinden = nicht aktiviert
 
Aktive Farben Stellt in den Feldern "Aktuelle Vollfarben" ein dunkles Blau (Rot = 0, Grün = 0, Blau = 64) für die Hintergrundfarbe ein (das weiße Feld im Bild links) und ein helleres Blau für die Vordergrundfarbe (Rot = 46, Grün = 91, Blau = 182; das schwarze Feld im Bild links).
 
Stiltafeln Klickt auf den kleinen Pfeil in der Vordergrund-Stiltafel (im Bild links die schwarze) und wählt das zweite Symbol von links, um den Vordergrundstil auf "Farbübergang" zu setzen. Für den Hintergrundstil wählt ihr das Symbol ganz rechts für "Kein Stil".
 
Jetzt klickt direkt in die Vordergrund-Stiltafel:
– Auswahlfeld Farbübergang = #1 Vordergrund-Hintergrund
– Farbübergang umkehren = nicht aktiviert
– Horizontal und Vertikal = beide 50
– Wiederholungen = 0
– Stil = Rechteckiger Farbübergang (2. Symbol von oben)
 
Klickt jetzt in eure Auswahl, um sie mit dem Farbverlauf zu füllen.
 
Geht zu Auswahl || Modifizieren || Verkleinern und verkleinert eure Auswahl um 35. Ihr habt jetzt eine kleine quadratische Auswahl in der Mitte des ursprünglichen Quadrats.
 
Setzt euren Vordergrundstil auf Einfarbig (klickt auf den kleinen Pfeil in der Vordergrund-Stiltafel und wählt das Symbol ganz links) und ändert eure Vordergrundfarbe in Weiß (Rot/Grün/Blau = 255). Füllt das innere Quadrat mit weißer Farbe. Hebt die Auswahl mit Strg+D auf (Auswahl || Keine Auswahl).
 
Um euer Bild als transparentes GIF zu speichern, geht zu Datei || Export || GIF-Optimierung.

Die erste Karteikarte enthält die Optionen für die Transparenz. Ihr seht, daß ihr auch mit einem transparenten Hintergrund arbeiten und dann die Option "Bestehende Bild- oder Ebenen-Transparenz übernehmen" wählen könnt.

In diesem Fall ist der Hintergrund, den ihr transparent schalten wollt, weiß; also wählt "Bereiche, die dieser Farbe entsprechen", dann klickt in das Farbfeld daneben und stellt Weiß ein.

 
Die nächste jetzt interessante Karteikarte enthält die Optionen für die Farben. Hier kann man die Anzahl der im Bild enthaltenen Farben einstellen (wenn ihr zu Farben || Bildfarben zählen geht, wird die Anzahl der Farben in eurem Bild angezeigt). Bei einem Farbverlauf sieht das Bild am besten mit 256 Farben aus, der größtmöglichen Anzahl von Farben bei einem GIF-Bild.

Darunter könnt ihr eine Reduktionsmethode auswählen; wählt hier "Octree, optimiert".

Wenn ihr euer Bild als transparentes GIF speichert, ist auf der Karteikarte "Format" schon "Version 89a" eingestellt, da die ältere Version keine Transparenz unterstützt.

So, das war's! Klickt jetzt nur noch auf OK und gebt einen Namen für euer transparentes GIF ein.

 
Bitte beachten! Tatsächlich habt ihr jetzt nicht das Bild selbst gespeichert, sondern eine Kopie des Bildes als transparentes GIF. Vielleicht möchtet ihr euer Originalbild noch als .psp-Datei speichern, so daß ihr es auch in Zukunft verwenden und eventuell verändern könnt.
 

Bilder in transparente GIFs konvertieren

Manchmal hat man ein Bild und möchte es in ein transparentes GIF umwandeln. Wenn man Glück hat und das Bild reine Farben hat, erfordert das nur ein paar einfache Schritte. Wenn das Bild allerdings feine Farbverläufe aufweist, muß man es erst ein wenig "saubermachen".
 
Bild öffnen Laßt uns dies mit einem JPG-Bild versuchen: Öffnet "/tutorial/html/tutbasic/ornament.jpg" aus dem Download.
 
Werkzeug "Zauberstab" Klickt auf den Zauberstab in der Werkzeugleiste:
– Auswahlmodus = RGB-Wert
– Toleranz = 5
– Randschärfe = 0
– Auswahl/Verbinden = nicht aktiviert
 
Wenn ihr jetzt in das Weiß in der Mitte des Bildes klickt, dann seht ihr, was ich eben damit gemeint habe, daß manche Bilder erst ein bißchen "saubergemacht" werden müssen! Obwohl der Hintergrund – für unsere Augen – rein weiß aussieht, ist es kein reines Weiß. Wir müssen also erst sicherstellen, daß der Hintergrund, den wir transparent schalten wollen, aus nur einer reinen Farbe besteht.
 
Hebt die Auswahl mit einem Rechtsklick in das Bild wieder auf und vergewissert euch zunächst, daß das Bild eine Farbtiefe von 16 Mio Farben hat (Farben || Farbtiefe erhöhen || 16 Millionen Farben). Ändert die Toleranz des Werkzeugs "Zauberstab" auf 30, und klickt noch einmal in den weißen Hintergrund des Bildes. Wenn der weiße Bildausschnitt jetzt komplett ausgewählt ist, könnt ihr mit dem nächsten Schritt weitermachen; andernfalls müßt ihr die Toleranz noch etwas erhöhen (beachtet auch die Anmerkungen weiter unten). Jetzt geht zu Auswahl || Modifizieren || Ähnliche Bereiche, so daß der komplette weiße Hintergrund ausgewählt ist.
 
Werkzeug "Farbfüllung" Klickt auf das Werkzeug "Farbfüllung" in der Werkzeugleiste und ändert eure Vordergrundfarbe wieder in Weiß. Euer Vordergrundstil sollte immer noch Einfarbig sein. Jetzt klickt irgendwo in eure Auswahl. Hebt die Auswahl wieder auf und tauscht Vorder- und Hintergrundfarbe, so daß jetzt Weiß eure Hintergrundfarbe ist.
 
Bild speichern Jetzt könnt ihr weitermachen und euer Bild als transparentes GIF speichern, wie oben beschrieben.
 



Bitte beachten!
Einige Anmerkungen zum Auswählen des Hintergrundes:

Manchmal reicht eine Toleranz von 5 oder sogar 30 nicht aus, den kompletten Hintergrund auszuwählen, also muß man ein wenig experimentieren! Wenn der Laufrahmen nicht exakt an der Kante des Hintergrundes verläuft, kann man auch zu Auswahl || Modifizieren || Vergrößern gehen und die Auswahl um 1 oder 2 vergrößern ... wieder ausprobieren!

Manchmal ist die Hintergrundfarbe auch in dem Bild selbst enthalten, das nicht transparent werden soll. In diesem Fall darf man beim Auswählen des Hintergrundes nicht mit Auswahl || Modifizieren || Ähnliche Bereiche arbeiten, sondern muß die Umschalt-Taste gedrückt halten und nacheinander in alle Hintergrundbereiche klicken. Jetzt kann man die Auwahl mit einer Farbe füllen, die im Bild selbst nicht vorkommt; dafür kann man jede beliebige Farbe nehmen, dunkles Lila oder helles Pink ... Jede Farbe kann transparent geschaltet werden!

 

Antialiasing und transparente GIFs

Warum ist es denn so wichtig, daß beim Erstellen der Auswahl die Antialiasing-Option nicht aktiviert ist? Man sollte doch meinen, daß da zumindest bei rechteckiger Auswahl kein Unterschied ist. Nun, es ist dasselbe Problem wie bei Schatten und transparenten GIFs: Beides erzeugt halb-transparente Pixel, die in einem transparenten GIF nicht richtig dargestellt werden können.
 
Ich habe zum Vergleich zwei rechteckige transparente GIFs vor einen dunkleren Hintergrund gesetzt; das Stück links ist ohne Antialiasing, das Stück rechts mit Antialiasing. Beachtet die weißen Streifen um das GIF, bei dem Antialiasing aktiviert war!
 
Dasselbe tritt hier bei den runden GIFs auf. Obwohl das kreisförmige GIF mit Antialiasing viel "runder" ist, muß man dafür mit den häßlichen weißen Streifen bezahlen. Diese sind zwar vor diesem Hintergrund nicht so deutlich, aber bei einem dunkleren Hintergrund ...
 

Eine Bemerkung zum Schluß

Ach ja, natürlich ...

... können transparente GIFs auch animiert werden! :-))
 
(Übersetzung aus dem Englischen von Doro Sensen)