Modul 2.5: Erstellen von Bildern mit transparentem Hintergrund für Webseiten

Vor allem Icons wie Buttons oder Logos, manchmal aber auch wissenschaftliche Balkendiagramme und sonstige Abbildungen schauen häufig besser aus, wenn Sie nicht rechteckig (d.h. auf einem weißen oder sonstigen Rahmen-Hintergrund) erscheinen, sondern der Hintergrund der Webseite transparent erscheint (also quasi "freigestellt" ist). Lehrer Lämpel links oben auf unserer Website ist z.B. freigestellt. Um diesen Effekt mit Beispielen weiter unten zu demonstrieren, habe ich den Hintergrund dieser Seite auf hellgelb eingestellt.

Folgende Vorabüberlegungen gilt es zu beachten:

• Verwenden Sie transparente Bilder nur, wenn Sie einen ruhigen Seitenhintergrund haben. Ein unruhiges Hintergrundbild wird sich v.a. mit transparenten Grafiken nicht vertragen.
  
  
• Stellen Sie am besten die Hintergrund-Farbe für Ihre html-Seite (mit dem bgcolor-Tag) ein, auch wenn Sie nur einen weißen Hintergrund wollen (so wie ich für diese Seite gelb eingestellt habe). Manche Webserver geben für ihre Standardeinstellung im Browser eine andere Hintergrundfarbe ein oder der Nutzer hat sich eine andere Standardhintergrundfarbe in seinem Browser eingestellt. Es könnte sein, dass dann Ihr hellblau-dominiertes transparentes Bild dann auf hellblauem Hintergrund zu liegen käme.
  
  
• Sollten Sie ein Fotomotiv freistellen wollen (vielleicht bei einem Porträt auf ner persönlichen Webseite anwendbar), müssen Sie zuvor das Foto in ein GIF-Bild umwandeln. Nur Gif-Bilder können transparent gemacht werden (auf das von noch längst nicht allen Browsern unterstützte PNG-Format sollten Sie vorläufig lieber noch verzichten).
  
  
• Je nach Qualität des verwendeten Programms und zeitlichem Aufwand kann die Freistellung sehr exakt oder aber pixelig-unruhig erscheinen.
  

So können Sie transparente Bilder erstellen:

• Mit einem Zeichen- oder Malprogramm, welches Ihnen bereits bei der Bildanlage erlaubt, einen transparenten Hintergrund zu wählen und diesen auch gleich in ein entsprechendes Gif abspeichern lässt (geht z.B. mit neuen Versionen von Photoshop und Illustrator)
  
  
• mit einfachen Freeware- und SharewareTools, wie z.B. Transparency (für den Mac). Dabei wird ein nichttransparentes Gif geöffnet und die Farbe definiert, die transparent werden soll (funktioniert also nur, wenn der wegzunehmende Hintergrund aus nur einer Farbe besteht). Viele shareware-Grafik-Programme für den PC haben diese Möglichkeit ebenfalls implementiert bzw. sind dazu erstellt (suchen Sie unter http://www.imagespro.com nach transparent Gifs, um aktuelle kostengünstige oder kostenlose Programme zu laden..
  
  
• Mit Photoshop und ähnlichen Programmen über eine zuvor zu definierende Auswahl (via "Zauberstab" oder frei zu definierender Auswahl; ggf. auch Mehrfachauswahl möglich). Diese Auswahl wird dann transparent gemacht und das Bild nach GIF exportiert.

Beispiel 1: Transparenz mit einem Klick (Shareware Transparency)
Unten stehendes Bild (ein Screenshot mit blauem Hintergrund) soll einen transparenten Hintergrund bekommen. Mit Transparency öffnet man das Bild (muss bereits im GIF-Format sein) und klickt auf die Farbe, die transparent werden soll (siehe Pfeilcursor, mittleres Bild). Dann speichert man die Datei unter neuem Namen und voilá, rechts das Ergebnis.Sehr komfortabel!

Beispiel 2: Transparenz durch Erstellung einer transparent zu machenden Auswahl (hier mit Shareware Graphic Converter für Mac, ähnlich auch für Photoshop 5 und früher sowie viele andere Bildbearbeitungsprogramme).

• Schritt 1: Auswahl erstellen (durch Zauberstab, Rahmenziehen oder Auswahlpfad)
• Schritt 2: Auswahl als transparent definieren
• Schritt 3: nach Gif exportieren.

In manchen Programmen sind Schritt 1 und 2 zusammenfassbar (z.B. beim Graphic Converter, siehe Abb. unten). Hier wurde zuerst das Zauberstab-Icon doppelgeklickt und im sich öffnenden Einstellfenster aktiviert: Farbe Transparent darstellen. Dann klickt man auf die blaue Farbe, löscht die dadurch entstehende transparente Auswahl und danach wird abgespeichert.

Schritt 1: Laden eines beliebigen Bildformates in Photoshop


Schritt 2: Auswahl des Zauberstabs (roter Kreis), Klick in die auszuwählende Fläche (hier wieder blau), daraufhin erscheint der Auswahlrahmen (ggf. Auswahl erweitern, falls mehr transparent werden soll oder - für erfahrende Benutzer Auswahl über Farbe oder Maske definieren bzw. Auswahlpfad erstellen)


Schritt 3: im Menu Hilfe (wer hätte gedacht, dass es sich da versteckt!): Transparentes Bild exportieren auswählen (grüner Kreis)

• Schritt 4: Es öffnet sich daraufhin der Export-Assistent für Bilder mit Transparenz (siehe unten). Klicken Sie das richtige an (in der Regel die mittlere Auswahl) und arbeiten Sie sich mit weiter durch die darauffolgenden Schritte durch. Am Schluss haben Sie ein webfähiges gif-Bild erstellt, welches Sie direkt verwenden können.