Как избежать сдвига цветов при экспорте пиксельной анимации персонажа в GIF

GIF хранит цвета пикселей в таблицах, каждая из которых содержит до 256 записей. Формат поддерживает глобальную таблицу и локальные таблицы для отдельных изображений, поэтому количество цветов во всей анимации необязательно ограничено 256. Тем не менее для каждого закодированного изображения используется ограниченная активная таблица. Эти правила описаны в оригинальной спецификации GIF89a.

Если исходник содержит цвета, которые не представлены в выбранной палитре экспорта, программа должна сопоставить их с доступными записями. В документации Aseprite к возможным причинам изменения цветов GIF отнесены спрайты RGB со слишком большим количеством цветов, смешивание слоёв, размытые участки и свечение. Практическая рекомендация — использовать в спрайтах RGB менее 256 цветов или работать непосредственно в режиме Indexed. См. объяснение Aseprite о смене цветов при экспорте GIF.

Короткая палитра в панели цветов не доказывает, что в изображении используются только эти цвета. В режиме RGB в Aseprite пиксели могут содержать цвета, которых нет в отображаемой палитре. Режим Indexed ограничивает рисование записями палитры. Это различие объяснено в разделе «Панель цветов и палитры».

Прежде чем менять настройки экспорта, сохраните отдельную копию анимации для экспорта. Выберите несколько контрольных цветов: основную заливку тела, самую тёмную обводку, блик и любой акцентный цвет, который появляется только в более позднем кадре.

Воспользуйтесь следующей последовательностью для диагностики. Это отправные точки для поиска неполадок, основанные на документированном поведении, а не окончательные диагнозы, которые можно поставить только по внешнему виду.

Что вы замечаете	Что проверить в первую очередь	Полезное сравнение
Цвет плоской заливки после экспорта имеет другие значения RGB	Выбор палитры и сокращение количества цветов	Сравните непрозрачный внутренний пиксель до и после экспорта
Цвета меняются при смене позы	Включает ли палитра цвета из всех кадров	Сравните одну и ту же заливку в нескольких позах
Только по силуэту появилась светлая или тёмная кайма	Частичную прозрачность и настройки матирования	Просмотрите изображение на светлом и тёмном фоне
В разных приложениях GIF выглядит по-разному	Интерпретацию цветового профиля и настройки отображения	Откройте GIF в исходном редакторе и сравните значения
В сплошных областях появились новые точки	Дизеринг при экспорте	Экспортируйте другую копию с отключённым дизерингом

Сравнивайте соответствующие кадры после рендеринга, а не случайные пиксели с одинаковыми координатами холста после перемещения персонажа. При оценке внешнего вида сохраняйте одинаковые фон и масштаб. Зафиксируйте, изменились ли значения RGB, внешний вид или и то и другое: от этого зависит следующий шаг.

Если персонаж создан с расчётом на постоянство цветов, используйте единую продуманную палитру для всех поз. Добавьте цвета, которые появляются только при движении: например, для другого выражения лица, блика на аксессуаре или оттенка нижней стороны тела. Палитра, составленная только по первому кадру, может их не включать.

Это рекомендация по организации работы, а не требование, согласно которому каждый GIF должен использовать глобальную палитру. Формат допускает локальные палитры. Преимущество общей палитры в том, что можно проверить один заданный набор цветов и убедиться, что он подходит для каждого кадра.

В Aseprite проверьте изображение в режиме RGB, прежде чем преобразовывать копию для экспорта в Indexed. Пиксели в режиме Indexed ссылаются на записи палитры, поэтому изменение записи меняет все ссылающиеся на неё пиксели. Для слоёв с прозрачностью также требуется назначить индекс прозрачности, обычно индекс 0. См. документацию Aseprite о цветовых режимах.

Для прозрачного GIF с одной общей таблицей отведите не более 255 непрозрачных цветов и одну запись для прозрачности. Это следует из ёмкости таблицы в 256 записей и использования в GIF индекса палитры для прозрачности. В непрозрачной анимации все 256 записей можно использовать для видимых цветов. См. определения в спецификации GIF89a для таблиц цветов и прозрачности.

Например, предположим, что во всей анимации используется 24 различных непрозрачных цвета. Для записи прозрачности потребуется ещё одна запись, то есть всего 25, поэтому ёмкости палитры достаточно. Но это не доказывает, что экспортёр выбрал именно эти 24 цвета: проверьте итоговую таблицу и значения контрольных пикселей. Если блик отсутствует, исправьте палитру перед повторным преобразованием.

Цветовые профили определяют, как следует интерпретировать значения RGB. В документации Aseprite sRGB указан как цветовое пространство, обычно используемое для изображений в интернете. Настройки управления цветом находятся в меню Edit > Preferences > Color. Для анимации, предназначенной для обычного просмотра в интернете, подготовка копии для экспорта в sRGB — практичный первый шаг. См. документацию Aseprite о цветовых профилях.

Если исходник использует другой известный профиль, различайте команды Convert и Assign. В диалоговом окне Sprite > Properties в Aseprite команда Assign сохраняет значения пикселей, меняя способ их интерпретации. Команда Convert изменяет значения пикселей между цветовыми пространствами, чтобы по возможности сохранить внешний вид. Эти операции описаны в разделе «Свойства спрайта».

Если профиль нужно преобразовать, сделайте это до окончательной настройки палитры экспорта, а затем заново снимите контрольные значения. Иначе вы можете принять намеренное преобразование значений RGB за ошибку последующего экспорта в GIF. Если профиль исходника неизвестен, сначала выясните, как предполагалось интерпретировать оригинал, и лишь затем пробуйте назначать разные профили.

В GIF прозрачность задаётся индексом палитры: пиксели с этим индексом не изменяют уже отображённое изображение. Формат не хранит для каждого пикселя отдельный диапазон значений альфа-канала. Поэтому для частично прозрачных краёв персонажа нужно заранее принять явное решение при экспорте. Это поведение определено в спецификации GIF89a.

Для пиксельной графики с чёткими краями проверьте обводку и удалите непреднамеренную частичную прозрачность в копии для экспорта. Оставьте каждый задуманный краевой пиксель полностью непрозрачным, а каждый пустой пиксель — полностью прозрачным. Так силуэт станет осознанным элементом рисунка, а не результатом решения, принятого при преобразовании.

Если у персонажа намеренно мягкие края, выберите обработку фона перед экспортом. В документации Adobe сказано, что настройки матирования смешивают частично прозрачные пиксели с выбранным цветом; если цвет матирования совпадает с известным сплошным фоном, край может плавно с ним сливаться. На другом фоне матирование, подготовленное для одного цвета, может быть заметно. См. рекомендации Adobe Animate по прозрачности и матированию.

Просмотрите экспортированный край на светлом и тёмном фоне. Если внутренние цвета совпадают, но кайма заметно меняется, сначала снова проверьте непрозрачность и настройки матирования и только потом перестраивайте палитру основных цветов.

Для пиксельной графики с плоскими цветами начните с отключённого дизеринга при экспорте. Adobe объясняет, что дизеринг имитирует недоступные цвета и что изображения преимущественно со сплошными цветами могут хорошо выглядеть без него. Для градиентов может понадобиться другой компромисс. Отключите также Web Snap, если такая настройка есть: она целенаправленно сдвигает цвета к соответствующим оттенкам веб-палитры. См. раздел Adobe Animate о настройках оптимизации GIF.

Используйте эту конфигурацию как отправную точку, а затем проверьте результат. Если после отключения дизеринга появились большие участки цветов-заменителей, сначала расширьте палитру, а не добавляйте поверх несоответствия узор. Текстуру в пикселях, которую вы нарисовали намеренно, держите отдельно от дополнительного дизеринга, появляющегося при преобразовании.

Если в экспортёре есть защита точных цветов, проверьте условия её работы. Документированная настройка Photoshop preserveExactColors защищает цвета, уже присутствующие в таблице цветов, от дизеринга с рассеиванием; она не добавляет в таблицу отсутствующие цвета. См. справочник Adobe «Параметры сохранения GIF».

После экспорта откройте GIF как новый документ. Не полагайтесь только на предварительный просмотр в диалоговом окне экспорта. В документации Aseprite описано, как открыть GIF и сохранить его кадры как последовательность PNG, чтобы проверить каждый кадр отдельно. См. раздел часто задаваемых вопросов Aseprite.

Выполните эту итоговую проверку:

1. Сравните контрольные цвета в подготовленной копии для экспорта и заново открытом GIF.
2. Проверьте каждый кадр, содержащий цвет, которого нет в первой позе.
3. Отдельно проверьте непрозрачные внутренние пиксели и прозрачные края.
4. Воспроизведите полный цикл и убедитесь, что заливки и блики не меняются нежелательным образом.
5. Просмотрите GIF в предполагаемом размере и на предполагаемом фоне.

Если у непрозрачной заливки отличаются значения RGB, вернитесь к сопоставлению с палитрой или преобразованию профиля. Если значение совпадает, но внешний вид в приложениях различается, прежде чем перерисовывать изображение, проверьте, как интерпретируются цвета при отображении. Меняйте по одной настройке на каждый пробный экспорт, чтобы определить, какое изменение помогло.

Храните отдельно редактируемый оригинал, подготовленную копию для экспорта и итоговый GIF. Воспроизводимый процесс экспорта начинается с исходных цветов, значения которых известны, явно учитывает решения о палитре и прозрачности и завершается сравнением повторно открытого файла с исходником. Так можно конкретно проверить, сохранился ли задуманный внешний вид персонажа, и выявить оставшиеся компромиссы.

• Спецификация GIF89a — CompuServe, размещена на сайте W3C
• Часто задаваемые вопросы — Aseprite
• Панель цветов и палитры — Aseprite
• Цветовой режим — Aseprite
• Цветовой профиль — Aseprite
• Свойства спрайта — Aseprite
• Параметры экспорта изображения и анимированного GIF — Adobe Animate
• Параметры сохранения GIF — документация для разработчиков Adobe Photoshop