Transparentes Gif erzeugen für die Webseiten

[Chris]

hallo zusammen,

ich habe für meine webseiten eine navigationsleiste in paintshop (hintergrund transparent) erstellt. ich wollte eigentlich die webseiten ausschließlich in einer hintergrundfarbe darstellen, habe jedoch nunmehr ein schönes hintergrundbild gefunden. nur...wie bekomme ich es nun hin, meine navigationsleiste mit einem transparenten hintergrund zu speichern, ohne dass mein schlagschatten verloren geht und ohne, dass ein rand entsteht?

könnt ihr mir dabei helfen, oder mir eine seite nennen, auf welcher das schritt für schritt erklärt wird?

dankeschön.

gruss chris

[Schuer]

Hi,

könnt ihr mir dabei helfen, oder mir eine seite nennen, auf welcher das schritt für schritt erklärt wird?

Ein (schöner) Schlagschatten hat meist die Angewohnheit, in die Hintergrundfarbe auszulaufen. Problem bei Dir ist nun, daß Du durch das Background-Bild unterschiedliche Farben hast.

Lösungsansätze für Dich könnten nun sein :

1. Du montierst die Navigation schon im Bildbearbeitungsprogramm auf den Background und erzeugst dann darauf die Schatten, die Du hinterher verwendest. Dazu muß Navi und Background allerdings hinterher auf der Website unbedingt richtig positioniert werden.

2. Du verwendest einen zweifarbigen Schatten mit Dithering -> also nur schwarze (oder besser noch graue) Punkte, die beim Auslaufen einfach nur mehr Abstand bekommen. Den Hintergrund machst Du dabei transparent. Nachteil : Es sieht nicht so "sauber" aus.

(3. Du läßt den Schatten weg)

(4. Du läßt den Background weg)

Gruß,
_Dirk

[Orlando]

Hi, Dirk

Ein (schöner) Schlagschatten hat meist die Angewohnheit, in die Hintergrundfarbe auszulaufen. Problem bei Dir ist nun, daß Du durch das Background-Bild unterschiedliche Farben hast.

Welch wunderbares Einsatzgebiet für PNG das eigentlich wäre ;)
http://www.google.com/search?q=grafik+erstellung+png+transparenz

LG Orlando

[Schuer]

Hi Orlando,

Welch wunderbares Einsatzgebiet für PNG das eigentlich wäre ;)
http://www.google.com/search?q=grafik+erstellung+png+transparenz

Ja ja, hast ja recht, ich sollte mich so langsam wirklich mal mit PNG beschäftigen. Bisher hab ich mich davor gedrückt, weil die Browserunterstützung ja noch recht dünn ist.

Welche Browser unterstützen PNG eigentlich?

Gruß,
_Dirk

[Orlando]

Hi, Dirk

Ja ja, hast ja recht, ich sollte mich so langsam wirklich mal mit PNG beschäftigen. Bisher hab ich mich davor gedrückt, weil die Browserunterstützung ja noch recht dünn ist.

Das ist leider wahr, sollte dich aber nicht davon abhalten.

Welche Browser unterstützen PNG eigentlich?

Irgendwie alle, wobei speziell die Transparenzen noch Schwierigkeiten machen. Folgende Hackordnung ist aktuell:

Mozilla: sehr gut
Opera: gut
IE: naja

Genaueres unter http://www.libpng.org/pub/png/pngapbr.html

LG Orlando

[Schuer]

Hi nochmal,

Mozilla: sehr gut
Opera: gut
IE: naja

Genaueres unter http://www.libpng.org/pub/png/pngapbr.html

Danke für die Info! :-)

Gruß,
_Dirk

[Chräcker Heller]

Hallo,

ja, "wäre", eben..... aber vor allem der IE kann den Alphakanal (vulgo: die transparenz) nicht daretsllen. und selbst ich habe es noch nicht geschafft, die Mehrheit der user zum mozilla zu überreden ;-)))

(habe ich schon erwähnt, daß man bei dem verhindern kann, daß sich automatisch ein weiteres Browserfenster öffnet? ;-))))

Chräcker

<img src="http://www.stempelgeheimnis.de/diverses/werbung.gif" border=0 alt="">

[Orlando]

Hi, Chräcker

ja, "wäre", eben..... aber vor allem der IE kann den Alphakanal (vulgo: die transparenz) nicht daretsllen.

Ich sehe da kein Problem. Wir sind uns (fast) alle einig, den betagten N4.x nicht mehr zu unterstützen. Er beherrscht einfach zu wenige der aktuellen Techniken. Ich habe daher _null_ Verständnis dafür, dem IE, der ebenfalls sehr vieles nicht unterstützt, Zugeständnisse zu machen. Wenn man ein mangelhaftes Produkt verwendet, hat man eben die Konsequenzen zu tragen. Gleiches Recht für alle ;) Komm' mir jetzt ja nicht mit Opera & DOM ;)

und selbst ich habe es noch nicht geschafft, die Mehrheit der user zum mozilla zu überreden ;-)))

Keine Sorge, AOL steht hinter dir ;)

(habe ich schon erwähnt, daß man bei dem verhindern kann, daß sich automatisch ein weiteres Browserfenster öffnet? ;-))))

Das muss man extra abstellen? Opera öffnet keine Fenster ungefragt *scnr*

LG Orlando

[Chräcker Heller]

Hallo,

der NS4.xy ist eins sehr alter Browser. Es ist kaum anzunehmen, das der benutzerkreis zunehmen wird. Der IE in seiner neusten version ist eben "neu", und eben nicht in der Lage, alles "neue" anständig zu unterstützen. Das ist ärgerlich bei verabschiedeten Standarts. Die Unterstützung eines bestimmten Grafikformat gehört allerdings nicht dazu. (keine Frage, unverständlich bleibts damit natürlich trotzdem)....

ich versuche meine Seiten für die Besucher (also Menschen) zu schreiben. Ich möchte, daß möglichst viele Menschen das sehen, was ich zusammengeklebt habe. Ein sehr sehr großer teil benutzt den IE in seiner neueren Version, wobei ich den 5.5 jetzt mal als neu mitbezeichne, aber auch der 6er wird uns bei png nicht retten. Ich möchte, das diese Menschen meine Seiten sehen. das diese menschen Browser benutzen, die png nicht richtig anzeigen können, liegt nicht an der Standartschludrigkeit des Browsers.

Chräcker

http://www.Stempelgeheimnis.de

[Orlando]

Hi, Chräcker nochmal

der NS4.xy ist eins sehr alter Browser. Es ist kaum anzunehmen, das der benutzerkreis zunehmen wird. Der IE in seiner neusten version ist eben "neu", und eben nicht in der Lage, alles "neue" anständig zu unterstützen.

Das ist genauso traurig, wie es wahr ist. Soll ich aber jetzt deswegen auf Techniken verzichten, nur weil diese im IE immer noch nicht anständig umgesetzt sind? Wenn ich in der Verwendung von PNG einen Vorteil sehe, werde ich solche Grafiken einsetzen und Besuchern mit kaputten Browsern einen freundlichen Hinweis geben. Du machst das ja auch :)

Das ist ärgerlich bei verabschiedeten Standarts. Die Unterstützung eines bestimmten Grafikformat gehört allerdings nicht dazu. (keine Frage, unverständlich bleibts damit natürlich trotzdem)....

PNG ist natürlich standardisiert und zB GIF in vielen Belangen deutlich überlegen. Wo bleibt denn da der Fortschritt? Da könnte ich ja gleich alles für den alten Netsie schreiben und alle CSS-Diskussionen wären mit einem Schlag sinnlos.

ich versuche meine Seiten für die Besucher (also Menschen) zu schreiben. Ich möchte, daß möglichst viele Menschen das sehen, was ich zusammengeklebt habe. Ein sehr sehr großer teil benutzt den IE in seiner neueren Version, wobei ich den 5.5 jetzt mal als neu mitbezeichne, aber auch der 6er wird uns bei png nicht retten.

Je mehr Seiten IE-Benutzer auf die Mangelhaftigkeit ihres Browsers hinweisen, desto eher wird sich MS bemühen müssen, ordentliche Software abzuliefern. Alles andere bedeutet Kapitulation und Stillstand.

Ich möchte, das diese Menschen meine Seiten sehen.

Das will jeder, der welche im Netz hat ;) Seiten müssen in erster Linie zugänglich sein, der optische Aufputz hängt dann eben von den Fähigkeiten des User-Agents ab. Wenn ich PNG einsetze, funktioniert die Seite ja auch im IE, sie sieht nur nicht so 'schön' aus.

das diese menschen Browser benutzen, die png nicht richtig anzeigen können, liegt nicht an der Standartschludrigkeit des Browsers.

Doch. Genau daran liegt es [1] - und daran, dass sie keine Ahnung haben. Deswegen ja auch der freundliche Hinweis...

LG Orlando

[1] Schließlich interpretiert er jeden Sch*** abseits der Standards, was die Leute glauben lässt, er sei besser.

[Chräcker Heller]

Hallo,

der optische Aufputz

da steckt vielleicht das Mißverständnis. Meine Seite haben keinen optischen Aufputz der nur zu Dekozwecken dient. Alle meine grafischen Elementen dienen dem informationstransport und sind mit bedacht und Absicht gewählt worden. Und deswegen müssen sie auch  beim Benutzer so ankommen, wie ich meine, sie dem Informationstransport dienlich gestaltet zu haben.
Bleibt was auf der Strecke, so bleiben bei den meisten meiner Seiten Informationen auf der Strecke. Und genau das möchte ich vermeiden, dann verzichte ich lieber auf den gesammten Infotransport, da so nur fehlerhafte Infos beim Besucher ankommen. Ich müste bei png eine Weiche bauen, die beim IE auf eine "Dir mit Deinem browser kann ich die Information nicht zukommen lassen"-Seite (wie Du sie ja bei mir für andere Browser kennst ;-)) leitet. Und dann kämen mir bei meinem täglichen blick auf den Besucherzähler doch die Tränen ;-)))

Chräcker

[Kai Lahmann]

Ich müste bei png eine Weiche bauen, die beim IE auf eine "Dir mit Deinem browser kann ich die Information nicht zukommen lassen"-Seite (wie Du sie ja bei mir für andere Browser kennst ;-)) leitet. Und dann kämen mir bei meinem täglichen blick auf den Besucherzähler doch die Tränen ;-)))

stellt sich nur die Frage, wie lange - wenn dann dort steht, dass es mit Mozilla bestens läuft, wird man sich den vielleicht ja ansehen....:)

Grüße aus Lüneburg

Kai

[Orlando]

Hi, Chräcker

der optische Aufputz

da steckt vielleicht das Mißverständnis.

Vielleicht ;) Wenn ich PNG für meine Grafiken verwende und der IE die Transparenz nicht so darstellen kann, wie es eigentlich zu erwarten wäre, entsteht ja kein Schaden. Lediglich gute Browser bieten dieses Feature eben _zusätzlich_ an. Bei deiner Kühlschrank-Seite ginge aber wahrscheinlich Mozilla endgültig in die Knie, weil die Transparenz zusätzliche Ressourcen beim Rendering frisst.

Meine Seite haben keinen optischen Aufputz der nur zu Dekozwecken dient. Alle meine grafischen Elementen dienen dem informationstransport und sind mit bedacht und Absicht gewählt worden.

Ich kenne deine Seite(n), bezog mich aber in meinen vergangenen Aussagen nicht nur auf diese - torpediere doch nicht meine Grundlagendiskussion mit so feinen Dingen ;)

Und deswegen müssen sie auch beim Benutzer so ankommen, wie ich meine, sie dem Informationstransport dienlich gestaltet zu haben.
Bleibt was auf der Strecke, so bleiben bei den meisten meiner Seiten Informationen auf der Strecke. Und genau das möchte ich vermeiden, dann verzichte ich lieber auf den gesammten Infotransport, da so nur fehlerhafte Infos beim Besucher ankommen.

Ich glaube, das hast du falsch verstanden. Beim Besucher kommen keine fehlerhaften Informationen an, sondern werden fehlerhaft dargestellt!

Ein schönes Beispiel ist ja auch position:fixed im IE. Er kann es einfach nicht - besser gesagt - immer noch nicht. Trotzdem entsteht der Seite ja kein optischer Schaden, wenn man sie mit dem IE ansurft (ok, meistens muss man dann noch an der Positonierung feilen, was wiederum hervorragend mit Selektoren funktioniert, die er ebenfalls nicht beherrscht).

Ich müste bei png eine Weiche bauen, die beim IE auf eine "Dir mit Deinem browser kann ich die Information nicht zukommen lassen"-Seite  leitet.

Ein kleiner Hinweis auf der Seite würde schon reichen ;D

(wie Du sie ja bei mir für andere Browser kennst ;-))

Warte nur, bis Opera auch bei DOM/DHTML alle Geschwindigkeitsrekorde bricht.

Und dann kämen mir bei meinem täglichen blick auf den Besucherzähler doch die Tränen ;-)))

Pfff... Angeber ;)

LG Orlando

[Kai Lahmann]

hi

Bei deiner Kühlschrank-Seite ginge aber wahrscheinlich Mozilla endgültig in die Knie, weil die Transparenz zusätzliche Ressourcen beim Rendering frisst.

bin ich mir gar nicht so sicher, ich hatte letztens eine DHTML-Konstruktion, die transparente PNGs durch die Gegend geschoben hat - auch nicht langsamer als bei Text - außer auf meinem Lap

Warte nur, bis Opera auch bei DOM/DHTML alle Geschwindigkeitsrekorde bricht.

glaubste das wirklich...? Der ist jetzt schon nicht mehr so viel schneller, wenn ich alte, nicht DHTML-Fähige Versionen von MSIE oder Netscape dagegen sehe..

Grüße aus Lüneburg

Kai

[Orlando]

Hi, Kai

Bei deiner Kühlschrank-Seite ginge aber wahrscheinlich Mozilla endgültig in die Knie, weil die Transparenz zusätzliche Ressourcen beim Rendering frisst.

bin ich mir gar nicht so sicher, ich hatte letztens eine DHTML-Konstruktion, die transparente PNGs durch die Gegend geschoben hat - auch nicht langsamer als bei Text - außer auf meinem Lap

Wie sag' ich's jetzt? Geschwindigkeit ist relativ. Speziell bei fixierten Elementen und teiltransparenten PNGs gibt's diesbezüglich Probleme.

Warte nur, bis Opera auch bei DOM/DHTML alle Geschwindigkeitsrekorde bricht.

glaubste das wirklich...? Der ist jetzt schon nicht mehr so viel schneller, wenn ich alte, nicht DHTML-Fähige Versionen von MSIE oder Netscape dagegen sehe..

Ich denke, DOM wird erst vollständig freigegeben, wenn die Implementierung schnell genug ist. Wir werden sehen ;)

LG Orlando

[Kai Lahmann]

hi

glaubste das wirklich...? Der ist jetzt schon nicht mehr so viel schneller, wenn ich alte, nicht DHTML-Fähige Versionen von MSIE oder Netscape dagegen sehe..

Ich denke, DOM wird erst vollständig freigegeben, wenn die Implementierung schnell genug ist. Wir werden sehen ;)

nur, dass man sich mit der Verzögerung dann immer mehr Probleme einhandeln wird, nachdem man ohne Probleme einen identischen DHTML-Konstrukt für MSIE, Mozilla und konqueror bauen kann und damit nur einer der 4 Probleme hat...

Grüße aus Lüneburg

Kai

[Chräcker Heller]

Hallo,

Ich kenne deine Seite(n), bezog mich aber in meinen vergangenen
Aussagen nicht nur auf diese - torpediere doch nicht meine
Grundlagendiskussion mit so feinen Dingen ;)

;-)))))

Ich glaube, das hast du falsch verstanden. Beim Besucher kommen
keine fehlerhaften Informationen an, sondern werden fehlerhaft
dargestellt!

da muß/möchte ich doch noch mal nachhaken: wenn auf meinen Seiten Grafiken mit einem Schatten auf "Hintergrund" liegen, dann beinhalten diese "sauberen" Grafiken schon eine zu transportierende Information. Ist diese Grafik unsauber, weil der Schatten vom IE nicht angezeigt wird, leidet die "inneliegende" Information. Mal erheblich, mal nur ein wenig. Es ist vergleichbar mit einem Wort, das nur unzureichend ankommt. Das Wort "Stemelgeheimnis" (diemal mit Absicht falsch geschrieben ,-)) ist auch trotz fehlenden p verständlich, aber, wie ja leider an meinen postings hier immer zu sehen, bei einer Summierung solcher Auslassungen und Fehler leidet der Lesefluß. Hier erlaube ich mir das frech, weil sich die leute netterweise die Mühe machen, manchmal meine Postings trotzdem zu lesen, so wie ich auf der Suche nach einer Anleitung zum CD-Brenner-Einbau auch manchen Schnitzer übersehen würde, wenn ich denn trotzdem an die information heran komme. Aber wenn man Informationen auch durch die Qualität der grafischen Aufbereitung transportieren will (vulgo "Stimmung machen"), dann kann ein fehlender Schatten ein enormer informationsverlust auf dem Weg zum  Adressaten bewirken.

Und dann kämen mir bei meinem täglichen blick auf den
Besucherzähler doch die Tränen ;-)))
Pfff... Angeber ;)

nene, so viele zum Angeben sinds nicht ;-) Auf der Kühlschrankseite grad mal 30 bis 40/Tag und auf der Stempelseite um die 70.... aber mit dem Feedback könnte ich schon angeben, da hänge ich manche sicher ab ;-)))))

Chräcker

[Orlando]

Hi, Chräcker

da muß/möchte ich doch noch mal nachhaken: wenn auf meinen Seiten Grafiken mit einem Schatten auf "Hintergrund" liegen, dann beinhalten diese "sauberen" Grafiken schon eine zu transportierende Information.

Gut, ich werde mal konkreter. Wenn du die Umrandung der Wörter etwas dicker machst und diese dann als teiltransparent gestaltest, ergibt sich automatisch ein dreidimensionaler Effekt. Ich denke auch an verlaufende Transparenzen, mit denen man sehr schöne Effekte erzielen kann. Ich könnte mir das alles bei deiner Kühlschrankseite gut vorstellen. Nachdem der IE das alles nicht wirklich beherrscht, wird er wohl die Ränder ganz transparent anzeigen. Wenn du ein bisschen an den Grafiken arbeitest, sieht dann trotzdem alles ok aus und niemand, der einen IE benutzt, weiß, dass da etwas fehlt. Wenn du mal Zeit hast, sieh' dir die Möglichkeiten an, die dir das PNG-Format bietet. http://www.libpng.org/

[...] bei einer Summierung solcher Auslassungen und Fehler leidet der Lesefluß. Hier erlaube ich mir das frech, weil sich die leute netterweise die Mühe machen, manchmal meine Postings trotzdem zu lesen, so wie ich auf der Suche nach einer Anleitung zum CD-Brenner-Einbau auch manchen Schnitzer übersehen würde, wenn ich denn trotzdem an die information heran komme.

Kannst du auch, weil der 'Gehalt' der Postings stimmt.

Aber wenn man Informationen auch durch die Qualität der grafischen Aufbereitung transportieren will (vulgo "Stimmung machen"), dann kann ein fehlender Schatten ein enormer informationsverlust auf dem Weg zum Adressaten bewirken.

Man sollte natürlich darauf achten, dass nichts verlorengeht. Wenn aber ein besserer Browser zusätzliche Features bietet, kann man diese ruhigen Gewissens verwenden. Wenigstens hier könntest du mir ein bisschen entgegenkommen ;)

aber mit dem Feedback könnte ich schon angeben, da hänge ich manche sicher ab ;-)))))

Ja, reib' mir das noch unter die Nase ;)

LG Orlando

[Chräcker Heller]

Hallo,

Wenn aber ein besserer Browser zusätzliche Features bietet,
kann man diese ruhigen Gewissens verwenden.
Wenigstens hier könntest du mir ein bisschen entgegenkommen ;)

ach, wir haben uns zwar auch so schon gut uns "näher geschrieben", aber ja, da hast Du vollkommen recht ,-) Bei mir ist es vielleicht auch "umgekehrt", ich bastel in meinem lieblingsbrowser, der ja bekannterweise vor kurzem wechselte, "in Gedanken" und ich echt meine Seiten zusammen. Und dann überlege ich "rückwärts", was ich anderen Browsern zuliebe weglassen sollte und kann, ohne das mich der Verlust zu sehr schmerzt. (Beim NS4 bekam ich z.B. die Umrandungen bei den Wörtern für die Kühlschrankseite nicht hin, also flog der Browser komplett raus. DAS hätte ich nicht "verkraftet", die Information "Magnetplätchen" wäre nicht mehr so gut rübergekommen....)

Meine Seiten enstehen meistens erst im Kopf, dann im Malprogramm und dann erst in Phase-5 und für den Browser. Alles, was ich drinhaben möchte und meinte, das es realisierbar ist, ist dann am Schluß der Kette (bei dem übertragen in den browser)schon drin. Und das meiste funktioniert ja eben auch mit allen Browsern. Es gibt aber ein Beispiel, wo wir uns dann wirklich treffen und ich somit ein paar Schritte auf Dich zugekommen bin: auf meiner Stempelseite  kann man nur einfarbig stempeln. das liegt daran, das die Stempel eben "ja" Gif-Bilder sind, die keine wirkliche transparenz darstellen können. Stempelt man einen "verlaufenden" Abdruck (also einen schwächeren) auf einen starken Abdruck (im malprogramm ohne transparenz), so sieht man das Dilema. Der untere Abdruck scheint nicht durch, sondern wird "falsch" vom eigendlich schwächeren überdeckt. Hatte mich auch schon mal mit Michael S. unterhalten, und wir kamen schon zu der Lösung, daß ich hier eben für die "guten" Browser eine Farbstempel-png-Lösung anbieten könnte, die Normalsterblichen bekommen dann eben "nur" meine bisherige Seite, die anderen die bessere. das bedeutet aber, das die "normale" gif-Seite für sich schon so gut wie möglich sein sollte und der fehlende "Zusatznutzen" nicht offensichtlich auffällt.

Chräcker

PS. die png-Seite kommt, sobald mein Grafikprogramm endlich Grafiken im Batchmodus bearbeiten kann ;-)

[Michael Schröpl]

Hi Chräcker,

Ich müßte bei png eine Weiche bauen,

Ja.

die beim IE auf eine "Dir mit Deinem browser kann ich die Information
nicht zukommen lassen"-Seite (wie Du sie ja bei mir für andere Browser
kennst ;-)) leitet.

Nein.

Du kannst jedem Besucher diejenige Graphik senden, die sein Browser am
besten versteht - dem einen PNG, dem anderen GIF, dem dritten irgendwas.

Und das über denselben URL.

Viele Grüße
      Michael