Stefanie Wald: Transparenz-Verlauf im GIF möglich?

Hallo wiedermal, liebe Forummer !

Bin schon zum zweiten Mal hier, das erste Mal habe ich soviel Hilfe erhalten, für die ich mich
nochmals herzlichst bedanken möchte.

Mein Frage heute beschäftigt sich wiedermal mit Grafik (ist halt mein Ressort).
Bei meinen Bildern arbeite ich unter anderem halt auch mit Schatten-Effekten.
Wer meine erste Frage mitbekommen hat, ich hatte Probleme mit Hintergrundfarbe und
Hintergrundfarbe des Bildes, die wurden im Browser unterschiedlich dargestellt.
Aufgrund dessen ist mir ein praktikabler Lösungsvorschlag genannt worden.
Ich soll es mal mit transparenten Hintergründen bei meinen Bildern versuchen.

Nachdem ich mich seitdem ein Weilchen mit den GIF-Format beschäftigt habe, stellt sich
mir nun eine neue Frage. Wenn der Hintergrund transparent sein soll und der Schatten ja
bekanntlich fließende Übergänge hat (langsam verblasst), weiß ich nicht, wie ich einen
Transparenz-Verlauf erzeugen kann (vorzugsweise Photoshop), d.h. die Farbe wird zunehmend
transparenter und transparenter. Wenn ich die Hintergrundgarbe beim Abspeichern als transparent angebe, erzweugt das einen harten Übergang. So weit wie ich das verstehe, gibt
es wohl nur entweder 100% transpartent oder 100%Farbe, so was wie Opacity (so wird das im Photoshop genannt) gibt es wohl nicht, oder doch?

Wäre echt nett, wenn Ihr mir sagen könnt, ob und wenn, wie.

Danke,

Eure Steffi

  1. hi steffi,

    leider gibt es sowas wie transpoarenzverläufe nicht fürs GIF. das hat sich schon so mancher gewünscht.

    der transparente hintergrund sollte in einer ähnliche farbe sein wie der hintergrund deiner site.

    bei ähnlichen farben fällt das nicht weiter auf, wenn die übergänge nicht genau in der richtigen farbe sind.

    andere möglichkeit sind harte schatten, also keine weichen farbeverläufe.

    ole
    (8-)>

    1. Hallo Ole !

      Super, wie schnell hier geantwortet wird, hab kaum bis nach unten geblättert, schon ist eine
      Antwort auf meine Frage da.

      leider gibt es sowas wie transpoarenzverläufe nicht fürs GIF. das hat sich schon so mancher

      gewünscht.

      Und damit bin ich wieder am Anfang, denn ich möchte nicht auf Schatten-Verläufe verzichten
      und meine Hintergrundfarbe sieht dann unterschiedlich aus zu der Hintergrundfarbe.
      Aber selbst wenn ich ein kleines GIF-Bild erzeuge, nur mit der Hintergrundfarbe, und stelle
      dieses Bild als Hintergrund da, dann ist auch ein Unterschied zu sehen, zwischen Hintergrund
      und Hintergrund des Bildes.

      (wie schon in meiner ersten Frage erläutert)

      Ich kann mir das Problem irgendwie nicht so recht erklären, da ich auch schon Seiten gesehen
      habe, die Fotos abgebildet haben, die haben sicherlich ein vielfaches an Farben als meine im Vergleich harmlosen Bilder. Und ich möchte im Prinzip nur ein Bild auf einem Hintergrund darstellen und scheitere bereits.

      Traurige Welt, oder nicht?

      Eure Steffi

      1. hi steffi,

        wenn du den hintergrund des gifs, der eine ähnliche farbe hat wie dein hintergrund auf der site, transparent stellst, siehst du die übergänge nicht.

        wenn deine site dunkel blau ist kannst du auch ein gif mit transparentem dunkel grünen hintergrund draufstellen ohne das es auffällt.

        das geht mit vielen farben

        dunkel blau/grau/grün tun sich da nicht viel

        genausowenig wie

        weiß/gelb etc

        ole
        (8-)>

  2. Sorry Steffi, nichts zu machen.
    In der Gif Grafik wir eine einzelne Farbe, z.B. rosa, also transparent gekennzeichnet. Und zwar nur dieses Rosa - kein dunkelrosa, zartrosa oder wie-auch-immer rosa. Halbtransparente Pixel gibt es also nicht.

    Welche Möglichkeiten bleiben Dir?

    Du arbeitest ohne Transparenz und musst deine Grafik EXAKT auf der Seite positionieren können - für alle Browser. Schwierig, macht sehr viel Arbeit.

    Oder Du verpasst deinem Schriftzug einen INNEREN statt einen äusseren Schatten.

    Oder Du legst deinen Schriftzug in eine Art Box. Sozusagen einen Hintergrund mit geraden Kanten. Der weiche Schatten fällt in die Box, diese wiederum schliessen sauber mit deinem HTML Background.

    Oder Du arbeitest einfach mit Tables mit einfarbigem Background - siehe http://andriz.de.

  3. Moin Stefanie,

    so was wie Opacity (so wird das im Photoshop genannt) gibt es wohl nicht, oder doch?

    Wenn du es in Photoshop (oder einem anderen Programmm) so hinbekommst, wie du es auf dem Bildschirm später sehen willst, dann geht es IMHO schon. Speicher alles, was du willst, in _ein_ Bild und lege eine <map> darüber. Oder zerstückle das Bild in Teile und füge sie durch eine Tabelle wieder zusammen.

    Beide Lösungen verlangen allerdings, dass die Grafik anständig reduziert ist- sonst laufen die Besucher während der Wartezeit wieder fort.

    Vielleicht hilft das weiter ?

    Swen

  4. Hi Steffi!

    Ich hätte noch 'ne Idee:

    Dein Bild erhält den gewünschten transparenten Hintergrund. Den Schatten, der ja eingentlich  einen Farbverlauf von grau (schwarz) bis zur Hintergrungfarbe hat, wird nicht per Farbverlauf, sondern per Rasterung erzeugt.
    Und zwar aus 2 Farben: aus der Schattenfarbe und dem (transparenten) Hintergrund. Je nach Größenverhältnis der Schatten- und Hintergrundrasterpunkte erhältst Du einen Farbverlauf.

    Probleme kann es allerdings geben, wenn sich die durch Rasterpunkte des Bildes und die Pixel/Lochmaske der Bildröhre unschöne Moirè-effekte ergeben.

    Gruß Frank

    1. Hi Steffi!!!

      Wenn du einen weichen Übergang haben willst, dann nimm als Hintergrundfarbe von deinem Gif ganz einfach die seble Farbe her die du später als Hintergrund auf der HP verwendest. so ist der Teil unterm Schatten nicht tranzparent, aber er läuft schön in den Hintergrund und alles was dann außerhalb von dem Schatten ist dem weißt du danach eine neue Farbe zu und setzt diese auf tranzparent.

      1. Hallo Sebastian,

        wie bereits weiter oben erwähnt, genauso hab ich es gemacht.

        Die einzige bisherige für mich nurn schwer zu akzeptierende Abhilfe war der Wechsel zu
        einer "ähnlichen" Farbe, die aber im Netscape-Schema liegt (FFFFCC).

        Bisher hatte ich E9F1B8.

        Gruß, Steffi

  5. einen trick dafür gibt es, funktioniert nur aber bei einer hintergrundFARBE, keine Bild-Hintergründe.

    du setzt im photoshop die hintergrundfarbe auf die, welche du auch auf der site hast. dann setzt du darauf deinen schriftzug mit schatten. dadurch erreichst du, daß photoshop das anti-aliasing mit deinem hintergrund macht. sodann änderst du den bildmodus auf indiziert farben (exakt übersetzen), und exportierst das bild als gif89a.

    gerhard

    1. Hallo Gerhard,

      das ist exakt so, wie ich es bisher gemacht habe.

      Dennoch ist, ich kann es leider nur wiederholen, Der Unterschied nur mehr als deutlich zu
      erkennen.

      Meine bisherige Abhilfe ist, daß ich meine Hintergrundfarbe geändert habe, in eine
      Netscape Farbe (FF/FF/CC). Bisher hatte ich E9/F1/B8, sowohl im Bild als auch als Hintergrundbild.

      Gruß, Steffi

  6. Hallo Steffi,

    es gibt eine Möglichkeit mit Raster, die aber nicht ganz so toll aussieht, wie ein softer Verlauf ohne Raster:

    Annahme: Du möchtest einen Farbverlauf von blau nach transparent.

    1. Farbverlauf erstellen wie gewohnt, aber als Ausgangsfarbe Schwarz und als Endfarbe Weiß einstellen.
    2. Bild in 1-Bit umwandeln und rastern lassen (wenn vorhanden mit Floyd-Steinberg Algorythmus
    3. Bild in Zweiton-Bild umwandeln. Der einen Farbe Dein Blau zuweisen, der anderen Farbe die Transparenz (beim speichern)

    Dort wo vorher Schwarz war ist nun Dein Blau. Auf dem Weg zum Weiß befinden sich immer mehr weiße Punkte, die ja transparent dargestellt werden. Dein gewünschter Effekt ist *annähernd* erreicht.

    Gruß
      Christian Schnagl

    1. Hallo  Christian !

      Werd ich unbedingt probieren, Danke !

      Gruß, Steffi

  7. Hallo!

    d.h. die Farbe wird zunehmend
    transparenter und transparenter. Wenn ich die Hintergrundgarbe beim Abspeichern
    als transparent angebe, erzweugt das einen harten Übergang. So weit wie ich das
    verstehe, gibt es wohl nur entweder 100% transpartent oder 100%Farbe

    Stimmt leider! Ich nehme an, Du möchtest das GIF auf einen "gemusterten" Hintergrund bringen, oder auf verschiedenen Seiten einsetzen? (sonst wär's ja kein Problen...)

    Mir fällt leider nur die Möglichkeit ein, den Hintergrund schon im Zeichenprogramm ins Bild zu integrieren und dieses dann auf der Webseite pixelgenau zu positionieren. (Es sei denn, es handelt sich um eine Hintergrund-Kachel im "Rauhfaser-Stil", da fällt es nicht auf.)

    Das Thema Transparenz wäre damit erledigt, aber je nach Seitengestaltung kann das natürlich schwierig werden. :-(

    gruss,
    Claudio

    1. Hallo !

      Ist eigentlich noch viel einfacher (dachte ich)

      der Hintergrund meines Bildes ist einfarbig und das mit den gleichen Farbwerten (RGB)
      erzeugte Hintergrundbild ist auch einfarbig!

      Trotzdem zeigt mir der Browser sichtbare Unterschiede.

      Gruß, Steffi

      1. Hallo Steffi,

        der Hintergrund meines Bildes ist einfarbig und das mit den gleichen Farbwerten (RGB)
        erzeugte Hintergrundbild ist auch einfarbig!

        Trotzdem zeigt mir der Browser sichtbare Unterschiede.

        das passiert nicht, wenn Du eine der 216-Grundfarben als Background nimmst:

        <../../tcaeb.htm>

        Gruß
          Christian

      2. hi steffi,

        die unterschiede kommen daher, das ein GIF nur 256 farben hat. wenn du nun ein high- oder true-color bild auf 256 farben runterrechnest kommt es zu farbverschiebungen. außerdem gibt es da noch verschiedene methoden farben runterzurechnen.

        das ist fast schon eine wissenschaft für sich. damit es nicht weiter auffällt, den hintergrund des GIFs einfach transporent machen, wenn die farben ähnlich sind dürfte es nicht auffallen

        ole
        (8-)>

  8. Wenn der Hintergrund transparent sein soll und der Schatten ja
    bekanntlich fließende Übergänge hat (langsam verblasst), weiß ich nicht, wie ich einen
    Transparenz-Verlauf erzeugen kann (vorzugsweise Photoshop), d.h. die Farbe wird zunehmend
    transparenter und transparenter.

    Daß es mit GIF offenbar nicht geht, wurde mehrfach gepostet.
    Kann vielleicht jemand etwas darüber aussagen, ob mit PNG mehr zu machen wäre? Das unterstützen ja doch inzwischen einige Browser mehr oder weniger gut ...

    1. hi michael

      von ping ist abzuraten. es wird zwar von den aktuellen browsern in der regel unterstützt, nur mit der interpretation ist das noch so seine sache. jeder browser interpretiert die bildchen anders und das teilweise sogar von version zu version unterschiedlich.

      ole
      (8-)>