TechArts - Halbtransparente Layer

Halbtransparente Layer

Übersicht

Halbtransparenz wird mittlerweile von allen guten Grafikprogrammen unterstützt. Farbige Layer auf Webseiten haben demgegenüber immer deckende Hintergründe. In Animationen wäre es jedoch oftmals schön, wenn der Hintergrund durch ein Layer scheinen würde, welches unabhängig vom Untergrund ist. Mit normalen Gif-Grafiken ist dieser Effekt überaus einfach zu realisieren.

Beispiel

Hier überlagert ein halbtransparentes Layer teilweise eine einfache Gif-Animation.

Erklärung

Der Effekt beruht darauf, dass abwechselnd ein farbiges bzw. ein transparentes Pixel gesetzt wird. Legen Sie hierzu in Ihrem Grafikprogramm eine neue Grafik an. Um Probleme zu vermeiden sollte diese mindestens die Größe 6 x 6 Pixel haben. Setzen Sie dann abwechselnd ein deckendes und ein Pixel in der Farbe die später unsichtbar sein soll. Wir verwenden als transparente Farbe Grau. Stellen Sie falls nötig den Zoomfaktor in Ihrem Grafikprogramm so ein, dass Sie einzelne Pixel problemlos erkennen können. Anti-Aliasing sollten Sie abschalten. Wenden Sie folgendes Schema an, kann die Grafik später problemlos gekachelt werden:
Das Muster nach dem die Pixel gesetzt werden sollten.

Stellen Sie nun in Ihrem Grafikprogramm eine optimierte 8 Bit Farb-Palette ein. Speichern Sie das Bild als Gif-Datei und stellen Sie die Farbe, die transparent werden soll, transparent ein. In unseren Fall ist dies Grau. Unten finden Sie transparente Hintergründe für Layer in Rot, Gelb, Grün und Blau, die Sie mit Rechtsklick - "Hintergrund speichern" auf Ihrer Festplatte speichern können, um sie auf Ihrer Homepage zu verwenden.

Transparente Hintergründe

Über einen Hinweiß auf die Quelle freuen wir uns !

Layer

Layer sind Schichten beliebiger Größe und Inhalts die frei und auch übereinander auf Web-Seiten verteilt werden können. Eine Einführung finden Sie in unserem Artikel Pixelgenaue Positionierung.

Anti-Aliasing
wird verwendet um Kanten in Bildern zu vermeiden. Dazu werden einzelne Pixel um ein dunkles Pixel so gestreut, dass dieses weich wirkt.

Gif-Format

Das CompuServe-Bitmap-Format speichert Grafiken mit bis zu 256 Farben. Die Dateien haben die Endung ".gif". Dieses Format ist im Internet sehr beliebt, da es Transparenz und einfache Videos enthalten kann.

Auflösung
Der hier gezeigt Effekt funktioniert um so besser, je höher die Bildschirmauflöung des Surfers ist. Ab der Auflösung 800 x 600 ist der Effekt gut zu sehen.

Optimierte Farbpalette
Eine optimierte Farbpalette enthält nur die Farben, die in einem Bild wirklich verwendet werden. Dies senkt die Größe des Bildes und somit die Zeit die zur Übertragung des Bildes benötigt wird.