Wulli: Buttons sehr pixelig - als png wie auch als gif

Hallo Forumer,

das Thema Webgrafiken wurde in den letzten Tagen ja bereits des öfteren diskutiert. Diese Threads habe ich mir auch aufmerksam durchgelesen. Trotzdem habe ich keine Lösung für mein Problem gefunden.
Ich arbeite in meiner Navigation mit einer Hintergrundgrafik die aus zwei verschiedenen Farben besteht. Darüber lege ich Buttons, die - wegen des zweifarbigen Hintergrundes - transpartent sein müssen. Nun habe ich die Dinger erstmal als Gif abgespreichert. Leider wird der Text in den Buttons immer sehr pixelig umrandet. Nun habe ich diese als PNG 8 abgespreichert (im Photoshop) was aber auch keinen Untershied macht. Erst im PNG 24 wär´s perfekt. Aber das wird ja wohl leider noch nicht genügend unterstützt.

Hat mir jemand von den Komprimierungs-Königen einen Rat, daß sich die Buttons nahtlos über den Hintergrund legen?

Vielen Dank und Grüße!

Wulli

  1. Hallo Wulli,

    ein Link zum corpus delikti würde helfen !

    Viele Grüße aus Ludwigsburg

  2. Hi Wulli,

    ... Buttons. Nun habe ich die Dinger erstmal als Gif abgespreichert. Leider wird der Text in den Buttons immer sehr pixelig umrandet.

    Vermutlich hast du den Text mit Anti-Aliasing in deine Buttons eingefügt. Dadurch werden die Kanten des Textes geglättet. Wenn deine Buttons keinen homogenen Hintergrund haben werden dadurch viele Farben "verbraucht" Das Grafikprogramm muss viele Zwischentöne bilden, um einen nahtlosen Übergang der (schwarzen) Buchstaben zum Hintergrund zu erreichen. GIF verwendet aber maximal 256 Farben. Also muss das Grafikprogramm (beim speichern) die verwendeten Farben optimieren. Vermutlich hast du in deinem Programm hierfür unterschiedliche Optionen. Vielleicht kannst du dadurch eine Verbesserung erreichen.

    HTH

    Maxx

  3. Hallo.

    Ich arbeite in meiner Navigation mit einer Hintergrundgrafik die aus zwei verschiedenen Farben besteht. Darüber lege ich Buttons, die - wegen des zweifarbigen Hintergrundes - transpartent sein müssen. Nun habe ich die Dinger erstmal als Gif abgespreichert. Leider wird der Text in den Buttons immer sehr pixelig umrandet. Nun habe ich diese als PNG 8 abgespreichert (im Photoshop) was aber auch keinen Untershied macht. Erst im PNG 24 wär´s perfekt. Aber das wird ja wohl leider noch nicht genügend unterstützt.

    Wenn du bei einen Schriftzug nur eine Warbe tranzparent schaltest, ist dieser Effekt ganz normal.
    Eine Lösung könnte so aussehen, eine besonders geeignete Schriftart zu verwenden, die besonders wenige Rundungen aufweist.
    Ausserdem sind Hintergründe problematisch, bei denen Fernsehbilder durch immer abwechselnd andersfarbige Pixelzeilen imitiert werden.

    Hat mir jemand von den Komprimierungs-Königen einen Rat, daß sich die Buttons nahtlos über den Hintergrund legen?

    Wenn ich die Frage richtig verstehe und falls es nichts ausmacht, dass ich noch nicht gekrönt wurde:
    Nahtlos neben- oder untereinander anordnen hat etwas mit deinem HTML/CSS zu tun, weniger mit den Grafiken. Aber du kannst natürlich die gesamte Grafik mit allen Navigationselementen in den Hintergrund legen und transparente GIF- oder PNG-Bilder darüberlegen. Manchmal kann das sogar sinnvoll sein.
    MfG, at

  4. Moin!

    Was sind denn transparente Buttons anderes als Links (mit Rahmen)?

    Wenn das nicht hilft:
    Überlege doch einmal, wie du die transparente Fläche erstlegst und wie du diese
    halbwegs einheitlich bekommst!
    Im Zweifel kannst du entweder eine Farbe oder einen maskierten Bereich transparent
    erscheinen lassen. Beides sieht zunächst gern "pixelig" aus.
    Besser wird's (je nach den Möglichkeiten, die du hast) durch:

    a) stelle die Maskierung "ungenauer" (also mehr Farbtoleranz bei der Maskierung).
    b) reduziere die Farbpalette auf möglichst wenige Farben und lasse DANN eine "verschwinden".
    c) mache dir bereits bei Erstellung der Buttons Gedanken, wo Anti-Aliasing evtl. böse ist.

    Gruß

    Der Hans

  5. Hat mir jemand von den Komprimierungs-Königen einen Rat, daß sich die Buttons nahtlos über den Hintergrund legen?

    würde einfach mal versuchen die transparenzaustauschfarbe so festzulegen, dass der hexadezimalwert mit dem html-farbhintergrund übereinstimmt

    1. würde einfach mal versuchen die transparenzaustauschfarbe so festzulegen, dass der hexadezimalwert mit dem html-farbhintergrund übereinstimmt

      Hallo Andrej,

      Hab ja im Hinergrund eine zweifarbige Grafik liegen... keinen Farbwert...
      Aber nur mal aus Interesse: Was ist denn eine Transparenzaustauschfarbe? Hab ich noch nie gehört den Begriff...

      Gruß

      Wulli