Transparenz, die sich anpasst

[mafiamix]

Hallo,

ich hab neulich ein Werbebanner von einer Seite gesehen (möchte nicht extra noch Werbung für diese Seite machen, wer sie wissen möchte, kann mir eine PN schreiben). Jedenfalls war in dem Banner abwechselnd ein Smiley abgebildet. Der hält eine Taschenlampe und strahlt damit ein Herz in die Luft. Jetzt kommt aber das besondere - für mich jedenfalls - und zwar passt sich das Bild immer wieder an den jeweiligen Hintergrund an.
Wenn sich dieses Bild also auf einem schwarzen Hintergrund befindet, dann ist der Lichtstrahl der Taschenlampe etwas schwarzer und wenn sich das z. B. auf einem roten Hintergrund befindet, dann "vermischt" sich der Lichtstrahl mit der roten Hintergrundfarbe.
Hab sowas noch nie gesehen und kannte bisher nur die normale (?) Transparenz mit 256 Farben bei gif- und png Bildern.
Bei dem o. g. Bild handelt es sich übrigens auch um ein .png Bild.

Hab hier auch nochmal eine Übersicht mit drei Beispielen gemacht, bei denen das Bild mit verschiedenen Hintergründen gezeigt wird.

Beispielseite von dem Bild

Weiß jemand wie so eine Transparenz funktioniert? Und gibts da vielleicht irgendwo Tutorials davon?


LG

 

[Another]

Ja, 'n normales .png Bild braucht sich auch nicht an die reduzierten 256 Farben zu richten, du meist da eher .png 24.

Allein der Verlauf des Lichtstrahlst könnte einem zeigen, dass es sich aus weit aus mehr Farben zusammen setzten müsste. Und z.B. .gif und .png 24 besitzen an sich nicht einmal tranzparenz, ihnen wird beim abspeichern nur mitgeteilt an welche Hintergrundfarbe sie sich richten sollen, um diese als "tranzparent" wahrzunehmen, um sich somit an den Rändern dementsprechend anzupassen. Summa sumarum, die Lösung liegt nahe.

 

[Marius Heil]

Um mal kurz Licht ins Dunkel zu bringen:
Bei dem gif Format hast du die Möglichkeite Transparenz festzulegen, jedoch keine Abgestufte, entweder ein Pixel ist vollfarbig oder vollkommen transparent. Deshalb sieht man bei gif Bildern auch immer wieder die pixelig abgestuften Kanten.
Bei png hingegen hast du einen vollen Alphakanal mit 8 bit zur Verfügung. Soll heißen: Du hast einen Rot, einen Blau und einen Grünkanal (wenn png als RGB abgespeichert wird, weiß ich grad nicht) mit jeweils 256 abstufungen und zusätzlich einen alphakanal auch mit 256 stufen der die transparenz angibt. Dadurch hast du die Möglichkeit teilweise transparente Pixel zu erstellen, zB Flächen die zu 50 Prozent transparent sind, das vermischt sich dann natürlich mit dem darunterliegenden Hintergrund. Wenn du Photoshop oder Gimp hast erstell einfach mal einen Farbverlauf von Schwarz nach Schwarz, gib aber als Transparenz am anfang alpha 100 und am ende alpha = 0 an. Speicher das ganze als png und siehe da, du hast einen Transparenzverlauf.

 

[Sven Mintel]

Moin,

mit was für Grafik-Programmen arbeitest du denn so?
Anhand dessen könnte man dir am Einfachsten beschreiben, wie es geht(vor allem, wie du es speichern musst)

 

[chmee]

Versuch es, in jenem Programm mit dem Du arbeitest - als png32 oder png+alpha/transparenz abzuspeichern. Angehängt ein png, dass die Backgroundfarbe eines Div/Body etc. durchschimmern lässt.

mfg chmee

 

[mafiamix]

Danke euch allen.
Habs jetzt hin bekommen und zwar mit einem Alphakanal.
Arbeite übrigens noch mit Paint Shop Pro 5.
Wenn ich jetzt den Alphakanal eingestellt habe, dann wird aber nur dieser Bereich vom Bild "benutzt". Das heißt, dass der Rest des Bildes mit einheitlicher Farbe transparent wird. Dass sich die Farbe von diesem Alphakanal mit der Hintergrundfarbe "vermischt" funktioniert irgendwie nicht.
Hab noch eine Datei angehängt. Bei der hätte sich eigentlich der Rand von dem weißen Strich mit der Hintergrundfarbe vermischen sollen (wie bei den Beispielen im 1. Post). Hab noch einen Text drauf geschrieben "test" in grün. Zu sehen sind aber nur die zwei Buchstabene, die sich innerhalb des Alphabereiches befinden.

//E: Hätte auch noch Photoshop CS3, kenn mich damit aber nicht gut aus.