Transparenz bei GIF's ohne Treppenbildung

Sehr oft sieht man bei transparenten GIF's ausgefranste Kanten. Woher kommt das?

Nun, diese Frage ist einfach zu beantworten. Bildbearbeitungsprogramme arbeiten mit Pixel und die sind ja bekanntlich quadratisch. Müssen nun Rundungen dargestellt werden, sind diese "Treppen" unumgänglich. Das sieht zwar schlecht aus, ist nun mal aber so. Kann man was dagegen tun und wenn ja, wie?

Am oberen Button ist ganz deutlich der "Treppeneffekt zu sehen, während er beim unteren Button nahezu verschwunden ist.

Aber wie macht man das jetzt? Es ist eigentlich viel einfacher, als man denkt. Ich möchte es hier anhand von Photoshop erläutern.

Der normale Weg zur Herstellung von Buttons ist , diese zunächst in Photoshop (im PSD-Format) anzulegen. Es empfiehlt sich sogar, eine Hintergrundebene in der geplanten Hintergrundfarbe der Website, wo der Button eingesetzt werden soll, anzulegen und so den Farbwert der Web-Site zu erhalten. Wenn Sie den Farbwert haben, löschen Sie bitte diese Ebene wieder, sie wird nicht mehr benötigt. Solange der Button im PSD-Format vorliegt, sieht er einwandfrei aus. Wird er dann aber im GIF-Format gespeichert und auf der Website eingebunden, erscheinen die so ungeliebten Treppen.

Der Grund: Die Information, mit welcher Hintergrundfarbe das Antialiasing berechnet werden soll, fehlt beim GIF. Photoshop kann keine Antialiasing-Pixel anlegen, der Button bleibt fransig.

Um nun diese Treppen weitestgehend zu eliminieren, sind mehrere Schritt notwendig.

Schritt 1: Notieren Sie sich die Zusammensetzung der Hintergrundfarbe der Website (als RGB-Werte oder Hex-Code).   Schritt 2: Wählen Sie nun aus dem Menü Datei "Für Web speichern..."   Schritt 3: Wählen Sie in der Palette die Anzahl der Farben aus (32 Farben reichen in der Regel)   Schritt 4: Achten Sie darauf, dass bei den Einstellungen GIF, Adaptiv, Kein Dither, bei Transparenz ein Häkchen ist, Keine Transparenz ausgewählt und Interlaced nicht angeklickt ist. Weiterhin sollte bei Lossy und Web-Ausrichtung eine 0 stehen.   Schritt 5: Wählen Sie bei Hintergrund nun "Andere" aus und geben Sie die Hintergrundfarbe als RGB-Wert oder Hex-Code ein.   Schritt 6: Wenn Sie dies durchgeführt haben, sehen Sie um den Button herum einen andersfarbigen Rand. Dies sieht im Moment zwar furchtbar aus, aber auf der Web-Site nicht.     Schritt 7: Speichern Sie nun Ihren Button ab. Diese Methode hat sich bestens bewährt, allerdings hat sie auch ihre Grenzen. Bei bereits vorhandenen GIF's ist eine nachträglich Bearbeitung in der Regel fast unmöglich. Sie benötigen dazu immer die Original PSD-Datei, also löschen Sie diese Datei nicht. Denn wenn Sie einmal die Hintergrundfarbe wechseln oder auf einer anderen Site einsetzen möchten, muss dieser Weg immer von vorne neu beschritten werden.