HTML-Dateien selbst erstellen: Inhaltsverzeichnis

Grafiken (IV): Transparenter Hintergrund bei Grafiken

Grafiken mit transparentem Hintergrund

Transparenter Hintergrund mit Paintshop Pro

Grafiken mit transparentem Hintergrund

Die meisten modernen WWW-Browser bieten dem Anwender per Voreinstellung einen hellgrauen oder weißen Hintergrund für das Anzeigefenster an, sehen jedoch die Möglichkeit vor, die Hintergrundfarbe dem eigenen Geschmack anzupassen. Wenn Sie nun eine Grafik mit hellgrauem Hintergrund haben, wirkt diese Grafik auf einem weißen oder bunten Fensterhintergrund wie ein "häßlicher" grauer Fleck. Ideal wäre eine Grafik, die einen unsichtbaren (transparenten) Hintergrund hat, damit sie auf jedem Fensterhintergrund wirkt. Auch in Verbindung mit

selbst definierten Hintergrundfarben und

Hintergrundbildern (Wallpapers) ist der Einsatz von Grafiken mit transparentem Hintergrund sinnvoll.

Das Dateiformat GIF, in dem die meisten Grafiken des WWW vorliegen, sieht die Möglichkeit vor, eine Farbe (hier: die Farbe für den Hintergrund) als unsichtbar zu definieren. Dies ist jedoch erst mit dem neuen, 89er-Format von GIF möglich. Im älteren, 87er Format ist das noch nicht möglich.

Mittlerweile gibt es viele Grafikprogramme, mit denen Sie eine transparente Farbe bei GIF-Grafiken einstellen können: unter MS Windows z.B. LView und Paintshop Pro (ab Version 3.11, nicht vorher!). Angesichts der umfangreichen übrigen Möglichkeiten zur Grafikbearbeitung ist Paintshop Pro wohl eine ideale Wahl. Beide Programme sind Shareware und in vielen Mailboxen oder CompuServe-Foren zu haben.

Seitenanfang

Transparenter Hintergrund mit Paintshop Pro

Um die Vorgehensweise beim Einstellen einer transparenten Hintergrundfarbe zu erläutern, wird hier der konkrete Fall am Beispiel von Paintshop Pro beschrieben.

Laden Sie die gewünschte Grafik mit "File/Open"
Reduzieren Sie ggfs. die Farbanzahl auf 256 oder 16 mit "Colors/Decrease Color Depth"
Klicken Sie in der Werkzeugleiste auf das links angezeigte Symbol.
Fahren Sie nun mit der Maus über das Bild und beobachten Sie gleichzeitig die Angaben in der Stauszeile untem am Bildschirm. Dort sehen Sie Angaben von der Art:
(20,80)(I:18,R204,G153,B0)
Positionieren Sie mit der Maus auf eine Stelle in der Grafik, die den Bildhintergrund darstellt. Merken Sie sich nun die Zahl, die in der Statuszeile in der zweiten Klammer hinter I: steht.
Speichern Sie die Grafik nun mit "File/Save As". Wählen Sie bei "List Files of types" GIF aus. Bei "File Sub-Format" stellen Sie am besten version 89a interlaced ein. Vergeben Sie bei "File Name" einen Dateinamen. Klicken Sie dann auf "Options" Am Bildschirm erscheint die Dialogbox "GIF Transparency Options".
Wählen Sie den letzten Button "Set the Transparency value to" aus. Geben Sie in dem Eingabefeld dahinter die gemerkte Index-Zahl ein. Klicken Sie dann auf "OK".
Klicken Sie nun noch in der Dialogbox "File/Save As" auf "OK".

HTML-Dateien selbst erstellen: Inhaltsverzeichnis
Seitenanfang

Blättern:
Grafiken (III): Animierte GIF-Grafiken | Guter HTML-Stil