Как сделать анимацию PNG-качества в формате GIF?

Я заметил, что все больше и больше сайтов используют анимированные GIF-файлы в формате PNG. Вы бы подумали, что это последние, если бы не проверили информацию об изображении. Линии четкие, цвета выглядят великолепно, нет той легкой, но все же заметной зернистости, которую получают GIF. Как люди достигают этого? Я не графический дизайнер, но мне любопытно, и я хотел бы создавать такие анимированные GIF-файлы, которые не имеют заметной потери качества по сравнению с GIF-файлами. (Я использую GIMP, но при необходимости у меня есть доступ к Photoshop.)

ОБНОВЛЕНИЕ: Вот пример. http://codyhouse.co/gem/smart-fixed-navigation/

Вы уверены , что это гифки? Вы можете анимировать PNG с помощью jQuery или javascript.
Да, я проверил расширения файлов.

Ответы (2)

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

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

Вот палитра, использованная в этом конкретном GIF.

Цветовая палитра

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

Другое дело — высокая частота кадров. В этом примере частота кадров составляет 375 кадров примерно за 11-12 секунд, что означает, что частота кадров равна 30 кадрам в секунду, как и обычное видео.

Чтобы подготовить хорошую палитру:

Принципы одни и те же, независимо от программы, которую вы используете.

1) Поместите все элементы, которые вы используете во всей анимации, на одном холсте. Преобразуйте этот холст в 8-битное изображение без дизеринга с оптимизированной или адаптивной палитрой.

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

3) Извлеките эту палитру и заставьте исходную анимацию использовать эту контролируемую палитру.

Способ упорядочивания объектов для извлечения общей палитры

Отредактировано.

Вероятно, лучшая программа для создания такой анимации — After Effects и Flash, которые могут экспортировать ее непосредственно в анимированный gif. (Конечно, можно использовать другое программное обеспечение для анимации)

Но я публикую несколько бесплатных программ (win), которые могут дать аналогичные результаты, но с некоторыми дополнительными шагами.

Анимация

http://vectorian.com/ Это бесплатное программное обеспечение для Windows, похожее на flash. Но так как он может сохранять только в файл swf, нам нужен один дополнительный инструмент: http://www.pizzinini.net/projects/swf2avi/ И экспортировать последовательность файлов bmp.

И с подходящими материалами мы можем использовать http://www.blender.org/ для получения простых цветов.

Промежуточный шаг. Преобразовать в видео

Вы можете использовать отдельные файлы для создания многоуровневой анимации в gimp или photoshop. Но вы можете автоматизировать процесс, превратив их в видео, если у вас много кадров.

Вы можете использовать http://www.virtualdub.org/

Преобразование в гиф

Существует бесплатное программное обеспечение, которое вы, вероятно, можете найти в Microsoft Gif Animator, очень полезное и может конвертировать из avi в gif с возможностью применения без дизеринга.

Но есть несколько бесплатных программ для преобразования видео в gif. Я еще не тестировал их должным образом, поэтому пока не даю никаких рекомендаций.

Я опубликую некоторые после некоторого тестирования.

Photop Paint от Corel может напрямую преобразовывать avi-файл в анимированный gif.

Спасибо. Я согласен, плоский дизайн естественно подходит для создания анимированных GIF-файлов. Я попытался сделать простую анимированную плоскую цветную гистограмму (синие столбцы, черные оси) с заголовком диаграммы, но текст получился с зернистыми краями, а цвет столбцов казался немного другим оттенком синего. С другой стороны, этот GIF (не менее того же художника) использует перекрывающиеся цвета, текст, весь этот хлам, и, Боже, он выглядит красиво. dribbble.com/shots/1541960-медицинское использование
Что вы подразумеваете под размещением всех элементов на одном холсте? Поскольку я использую GIMP, относится ли это к слою? Как мне использовать эти элементы для создания финальной анимации?
Позвольте мне подготовить более подробный пример.
Еще одна деталь, которую следует отметить, заключается в том, что каждый кадр в GIF-анимации может иметь собственную отдельную палитру из 256 цветов. Один из способов использования этой функции заключается в том, что если цветовая схема в вашей анимации меняется на полпути, как в приведенном выше примере анимации, вы можете подготовить сегменты анимации по отдельности, а затем соединить их вместе с помощью процессора GIF, такого как GIFsicle. .
Также обратите внимание, что частота кадров 30 кадров в секунду достаточно высока, чтобы, по крайней мере, некоторые версии IE не запускали эту анимацию с предполагаемой скоростью . В данном случае это может не иметь большого значения, но если вам нужно обеспечить постоянную скорость анимации между браузерами, самая высокая безопасная частота кадров составляет 16,67 кадра в секунду (= задержка кадра 60 мс).

Для цветов мы ничего не можем сделать, кроме ограниченного ~256 цветов.

Но для пиксельных краев вы можете:

Сделайте это в @3x и повторно используйте его в @1x в HTML

Как сделать анимацию PNG-качества в формате GIF?
СпросиСетьПолитика конфиденциальности1y, 1v