So verhinderst du Farbverschiebungen beim Export von Pixel-Charakteranimationen als GIF

GIF speichert Pixelfarben in Farbtabellen mit jeweils bis zu 256 Einträgen. Es unterstützt eine globale Tabelle und lokale Tabellen, die einzelnen Bildern zugeordnet sind. Eine Animation ist daher nicht zwangsläufig während ihrer gesamten Dauer auf 256 Farben beschränkt. Jedes codierte Bild verwendet jedoch eine begrenzte aktive Tabelle. Diese Regeln stammen aus der ursprünglichen GIF89a-Spezifikation.

Wenn die Quelle Farben enthält, die sich mit der ausgewählten Exportpalette nicht darstellen lassen, muss der Exporter sie verfügbaren Einträgen zuordnen. Aseprite nennt RGB-Sprites mit zu vielen Farben, Ebenenüberblendungen, unscharfe Bereiche und Leuchteffekte ausdrücklich als mögliche Ursachen für Farbänderungen in GIFs. Die praktische Empfehlung lautet, RGB-Sprites mit weniger als 256 Farben zu verwenden oder direkt im Indizierten Modus zu arbeiten. Siehe Aseprites Erläuterung zu Farbänderungen beim GIF-Export.

Eine kurze Palette in deinem Farbfeld beweist nicht, dass die Grafik nur diese Farben verwendet. Im RGB-Modus von Aseprite können Pixel Farben enthalten, die nicht in der angezeigten Palette vorkommen. Im Indizierten Modus ist das Malen auf Paletteneinträge beschränkt. Diese Unterscheidung wird in Die Farbleiste und Paletten erklärt.

Speichere eine separate Exportkopie deiner Animation, bevor du Exporteinstellungen änderst. Wähle mehrere Referenzfarben aus: die Hauptfüllfarbe des Körpers, die dunkelste Konturfarbe, einen Glanzpunkt und einen Akzent, der erst in einem späteren Frame vorkommt.

Gehe bei der Diagnose wie folgt vor. Dies sind Ausgangspunkte zur Fehlersuche, die sich aus dem dokumentierten Verhalten ableiten, keine definitiven Diagnosen allein anhand des Erscheinungsbilds.

Beobachtung	Zuerst prüfen	Sinnvoller Vergleich
Eine einheitliche Füllfläche hat nach dem Export einen anderen RGB-Wert	Palettenauswahl und Farbreduktion	Einen undurchsichtigen Pixel im Inneren vor und nach dem Export abtasten
Farben ändern sich zwischen Posen	Ob die Palette Farben aus allen Frames enthält	Dieselbe vorgesehene Füllfarbe in mehreren Posen vergleichen
Nur die Silhouette hat einen hellen oder dunklen Saum	Teiltransparenz und Matte-Einstellungen	Vorschau vor hellem und dunklem Hintergrund anzeigen
Das GIF sieht in verschiedenen Anwendungen unterschiedlich aus	Interpretation des Farbprofils und Anzeigeeinstellungen	Das GIF im Quelleditor erneut öffnen und Werte vergleichen
In einheitlichen Flächen erscheinen neue Punkte	Dithering beim Export	Eine weitere Kopie mit deaktiviertem Dithering exportieren

Vergleiche entsprechende gerenderte Frames und nicht beliebige Pixel an derselben Canvas-Koordinate, nachdem sich der Charakter bewegt hat. Beurteile das Erscheinungsbild bei gleichbleibendem Hintergrund und Zoom. Notiere, ob sich die RGB-Werte, das Erscheinungsbild oder beides geändert haben. Davon hängt der nächste Schritt ab.

Wenn dein Charakter auf konsistenten Farben basiert, verwende eine durchdachte Palette, die alle Posen abdeckt. Nimm auch Farben auf, die erst bei Bewegungen sichtbar werden, etwa einen alternativen Gesichtsausdruck, einen Glanzpunkt auf einem Accessoire oder einen anderen Farbton an der Unterseite. Eine Palette, die nur auf dem ersten Frame basiert, lässt diese Farben möglicherweise aus.

Das ist eine Empfehlung für den Arbeitsablauf und keine Vorgabe, dass jedes GIF eine globale Palette verwenden muss. Lokale Paletten sind im Format zulässig. Eine gemeinsame Palette bietet den Vorteil, dass du einen festgelegten Farbsatz prüfen und sicherstellen kannst, dass jeder Frame dazu passt.

Prüfe die Grafik in Aseprite im RGB-Modus, bevor du eine Exportkopie in den indizierten Modus umwandelst. Indizierte Pixel verweisen auf Paletteneinträge. Wenn du einen Eintrag bearbeitest, ändern sich alle Pixel, die auf ihn verweisen. Auch transparente Ebenen benötigen einen festgelegten transparenten Index, üblicherweise Index 0. Siehe Aseprites Dokumentation zum Farbmodus.

Bei einem transparenten GIF mit einer gemeinsamen Tabelle solltest du höchstens 255 undurchsichtige Farben plus einen transparenten Eintrag einplanen. Das ergibt sich aus der Kapazität von 256 Einträgen der Tabelle und der Verwendung eines Palettenindex für Transparenz in GIF. Eine undurchsichtige Animation kann alle 256 Einträge für sichtbare Farben verwenden. Siehe die Definitionen von Farbtabelle und Transparenz in GIF89a.

Angenommen, deine gesamte Animation verwendet 24 verschiedene undurchsichtige Farben. Mit einem transparenten Eintrag werden 25 Einträge benötigt, die Palettenkapazität reicht also aus. Das beweist nicht, dass der Exporter genau diese 24 Farben ausgewählt hat: Prüfe die resultierende Tabelle und taste deine Referenzpixel ab. Fehlt ein Glanzpunkt, korrigiere die Palette, bevor du die Datei erneut umwandelst.

Farbprofile legen fest, wie RGB-Werte interpretiert werden sollen. Laut Aseprites Dokumentation wird für Internetbilder im Allgemeinen der Farbraum sRGB verwendet. Die Farbverwaltungseinstellungen findest du unter Bearbeiten > Einstellungen > Farbe. Für eine Animation, die gewöhnlich im Web betrachtet werden soll, ist es sinnvoll, zunächst die Exportkopie in sRGB vorzubereiten. Siehe Aseprites Dokumentation zu Farbprofilen.

Wenn deine Quelle ein anderes bekanntes Profil verwendet, solltest du Konvertieren und Zuweisen unterscheiden. Im Dialogfeld Sprite > Eigenschaften von Aseprite behält „Zuweisen“ die Pixelwerte bei und ändert ihre Interpretation. „Konvertieren“ passt die Pixelwerte zwischen Farbräumen an, um das Erscheinungsbild im Rahmen der Möglichkeiten der Konvertierung möglichst genau zu erhalten. Beide Vorgänge werden unter Sprite-Eigenschaften beschrieben.

Nimm erforderliche Profilkonvertierungen vor, bevor du die Exportpalette endgültig festlegst, und erfasse anschließend neue Referenzwerte. Andernfalls könntest du eine beabsichtigte Konvertierung von RGB-Werten irrtümlich für einen späteren GIF-Exportfehler halten. Wenn das Quellprofil unbekannt ist, kläre zunächst, wie die Originalgrafik interpretiert werden sollte, bevor du wiederholt andere Profile zuweist.

GIF-Transparenz kennzeichnet einen Palettenindex, dessen Pixel die vorhandene Anzeige unverändert lassen. Für jedes Pixel werden keine unabhängigen Alpha-Werte gespeichert. Teilweise transparente Kanten eines Charakters erfordern daher eine bewusste Entscheidung beim Export. Das zugrunde liegende Verhalten ist in der GIF89a-Spezifikation festgelegt.

Prüfe bei Pixelgrafiken mit scharfen Kanten die Kontur und entferne in der Exportkopie unbeabsichtigte Teiltransparenz. Jedes vorgesehene Kantenpixel sollte vollständig undurchsichtig und jedes leere Pixel vollständig transparent sein. So wird die Silhouette bewusst gezeichnet und nicht erst beim Konvertieren festgelegt.

Wenn der Charakter absichtlich weiche Kanten hat, entscheide vor dem Export, wie der Hintergrund behandelt werden soll. Adobe erklärt, dass Matte-Einstellungen teilweise transparente Pixel mit einer ausgewählten Farbe mischen. Wird diese Matte auf einen bekannten einfarbigen Hintergrund abgestimmt, kann sich die Kante nahtlos in ihn einfügen. Auf einem anderen Hintergrund kann eine für einen bestimmten Hintergrund vorbereitete Matte sichtbar bleiben. Siehe Adobes Hinweise zu Transparenz und Matte in Animate.

Zeige die exportierte Kante vor hellem und dunklem Hintergrund an. Wenn die Innenfarben übereinstimmen, sich der Saum aber deutlich verändert, prüfe zuerst die Deckkraft- und Matte-Einstellungen, bevor du die Körperpalette neu erstellst.

Beginne bei Pixelgrafiken mit einheitlichen Farben mit deaktiviertem Export-Dithering. Adobe erklärt, dass Dithering nicht verfügbare Farben simuliert und Bilder, die überwiegend aus einheitlichen Flächen bestehen, oft ohne Dithering gut aussehen. Bei Verläufen kann ein anderer Kompromiss nötig sein. Deaktiviere auch Web Snap, sofern diese Option vorhanden ist: Sie verschiebt Farben gezielt in Richtung ähnlicher Farben der Webpalette. Siehe Adobes GIF-Optimierungsoptionen in Animate.

Verwende diese Einstellungen als Ausgangspunkt und prüfe dann das Ergebnis. Wenn beim Deaktivieren des Ditherings große Flächen mit ersetzten Farben sichtbar werden, verbessere die Palettenabdeckung, statt sofort ein Muster über die Abweichung zu legen. Halte absichtlich gezeichnete Pixeltexturen getrennt von zusätzlichem Dithering, das bei der Konvertierung entsteht.

Wenn ein Exporter Schutz für exakte Farben anbietet, prüfe die Bedingungen. Die dokumentierte Photoshop-Option preserveExactColors schützt Farben, die bereits in der Farbtabelle vorhanden sind, vor Diffusions-Dithering. Sie fügt der Tabelle keine fehlenden Farben hinzu. Siehe Adobes Referenz zu den GIF-Speicheroptionen.

Öffne das GIF nach dem Export als neues Dokument. Verlasse dich nicht allein auf die Vorschau im Exportdialog. Aseprite beschreibt, wie ein GIF geöffnet und seine Frames als PNG-Sequenz gespeichert werden können. So lassen sich einzelne Frames auf einem weiteren Weg prüfen. Siehe die Aseprite-FAQ.

Führe diese abschließende Prüfung durch:

1. Vergleiche die Referenzfarben in der vorbereiteten Exportkopie mit denen im erneut geöffneten GIF.
2. Prüfe jeden Frame, der eine Farbe enthält, die in der Anfangspose fehlt.
3. Prüfe undurchsichtige Pixel im Inneren getrennt von transparenten Kanten.
4. Spiele die gesamte Schleife ab und achte auf unbeabsichtigte Änderungen an Füllflächen oder Glanzpunkten.
5. Zeige das GIF in der vorgesehenen Größe und vor dem vorgesehenen Hintergrund an.

Weicht der RGB-Wert einer undurchsichtigen Füllfläche ab, prüfe die Palettenzuordnung oder Profilkonvertierung. Stimmt der Wert, aber das Erscheinungsbild unterscheidet sich zwischen Anwendungen, untersuche zuerst die Darstellungsinterpretation, bevor du die Grafik neu kolorierst. Ändere pro Testexport jeweils nur eine Einstellung, damit du erkennen kannst, welche Anpassung geholfen hat.

Bewahre die bearbeitbare Masterdatei, die vorbereitete Exportkopie und das fertige GIF getrennt auf. Ein wiederholbarer Exportprozess beginnt mit bekannten Quellfarben, legt Entscheidungen zu Palette und Transparenz ausdrücklich fest und endet mit einem Vergleich der erneut geöffneten Datei. So kannst du das beabsichtigte Erscheinungsbild des Charakters konkret erhalten und erkennen, welche Kompromisse noch bestehen.

• GIF89a-Spezifikation — CompuServe, gehostet vom W3C
• Häufig gestellte Fragen — Aseprite
• Die Farbleiste und Paletten — Aseprite
• Farbmodus — Aseprite
• Farbprofil — Aseprite
• Sprite-Eigenschaften — Aseprite
• Optionen für Bild- und animierte GIF-Exporte — Adobe Animate
• GIF-Speicheroptionen — Entwicklerdokumentation von Adobe Photoshop