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
Speichern in PSP 6
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. Da man seit PSP 6 transparente GIFs leichter speichern kann, gibt es auch hierzu eine Beschreibung. Der letzte Teil dieses Tutorials handelt über Antialiasing und transparente GIFs.
 
Download für das TutorialDownload-Datei
Für den dritten 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 "Füllfarbe"
Klickt auf das Werkzeug "Füllfarbe" in der Werkzeugleiste:
– Füllmodus = Rechteckiger Farbübergang
– Auswahlmodus = Kein
– Toleranz = 0
– Deckfähigkeit = 100
– Auswahl/Verbinden = nicht aktiviert

Zusätzliche Optionen für PSP 6:
– Anpassungsmodus = Normal
– Papiertextur = Kein

 
Stellt eure Hintergrundfarbe auf ein dunkles Blau (Rot = 0, Grün = 0, Blau = 64) und eure Vordergrundfarbe auf ein helleres Blau ein (Rot = 46, Grün = 91, Blau = 182). 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.
 
Wählt Weiß als Vordergrundfarbe (Rot/Grün/Blau = 255). Ändert den Füllmodus des Werkzeugs "Füllfarbe" auf Einfarbig und füllt das innere Quadrat mit weißer Farbe. Hebt die Auswahl mit Strg+D auf (Auswahl || Keine Auswahl).
 
Aktive Farben Klickt auf den Farbwechsler (die kleinen Pfeile im Feld "Aktive Farben"), um Vorder- und Hintergrundfarbe zu tauschen. Jetzt ist Weiß eure Hintergrundfarbe.
 

(PSP 6-Anwender können jetzt direkt weiter zu Speichern von Transparenten GIFs in PSP 6.)

Geht zu Farben || Farbtransparenz einstellen; die Frage, ob ihr euer Bild auf 256 Farben reduzieren möchtet, bestätigt ihr mit "Ja". Im folgenden Dialogfenster wählt ihr "Octree, optimiert" im Feld "Palette".

 
Im Feld "Reduktionsmethode" wählt ihr "Fehler-Diffusion".
 
Im Optionsfeld aktiviert ihr sowohl "Windows-Farben hinzufügen" als auch "Farbverlauf reduzieren". Klickt jetzt auf OK, woraufhin das Dialogfenster "Transparenz einstellen" erscheint.
 
In diesem Dialogfenster wählt ihr die Option "Aktuelle Hintergrundfarbe transparent schalten". Da eure Hintergrundfarbe Weiß ist, werden jetzt alle weißen Pixel transparent geschaltet.
 
Das kann man erst dann sehen, wenn man zu Farben || Farbtransparenz anzeigen geht; jetzt könnt ihr sehen, daß der weiße Hintergrund tatsächlich aus dem Bild entfernt wurde.
 
Bild speichern Speichert euer Bild als transparentes GIF: Geht zu Datei || Speichern; in der Auswahlliste "Dateityp" wählt ihr "CompuServe Graphics Interchange (*.gif)". Klickt jetzt auf Optionen, wählt "Version 89a" (die andere Version unterstützt keine Transparenz), klickt auf OK, dann auf Speichern. Jetzt habt ihr ein schönes, transparentes GIF!
 

Speichern von transparenten GIFs in PSP 6

In PSP 6 gibt es eine neue Möglichkeit, ein Bild als transparentes GIF zu speichern: Geht zu Datei || Export || Transparentes GIF-Bild.

Die erste Karteikarte enthält die Optionen für die Transparenz. Ihr seht, daß ihr jetzt 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 "Füllfarbe" Klickt mit dem Werkzeug "Füllfarbe" (Füllmodus = Einfarbig, Vordergrundfarbe = Weiß) 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 für PSP 5 und PSP 6 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)