В своем сообщении Сохранение анимации в формате APNG. Плагин для Gimp. я написала о APNG-формате.

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

И так, плагин gimp-apng-0.1.0.win32 для cохранение анимации в формате APNG у вас установлен. Теперь перейдем непосредственно к созданию самой анимации, которую потом и сохраним в APNG. Я не стала очень сильно мудрить, а решила создать небольшой объект, с отражением и полупрозрачной тенью.
Открываем наш GIMP и создаем новое изображение 400 x 300 пикс. с прозрачным фоном (Файл-Создать)

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Создаю фигуру - тор. Фигура похожа на бублик. Для этого инструментом эллиптическое выделение рисую эллипс и заливаю его красным цветом.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Теперь немного трансформирую эту фигуру инструментом "Перспектива". После преобразования мой эллипс стал иметь вид


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

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


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Слой с эллипсом переименовываем, например, "Диск1". Для этого в палитре слоев щелкаем дважды по иконке с эллипсом и вызываем диалоговое окно "Правка атрибутов слоя". В графе имя слоя вписываем название и нажимаем "OK".


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Теперь выполним команду "Слой-Слой к размеру изображения".
Продолжаем рисовать из нашего трансформированного эллипса – тор, т.е. приделаем эллипсу дырку. Для этого выделяем инструментом Волшебная палочка наш эллипс и идем во вкладку меню "Выделение". Выбираем пункт "Уменьшить выделение". Значение на ваш выбор. Я взяла "40". Выделение уменьшилось. Жмем "delete" на клавиатуре и получаем нашу дырку от бублика.
Все фигура наша готова.
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Будем делать анимацию. Так как анимация- это смена кадров, в каждом из которых, что-то меняется, то создадим 3 дубля-кадра нашего слоя.
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Для того, чтобы создать анимацию в каждом слое используем градиентную заливку, изменяя направление заливки или ее протяжение по объекту. Для того же чтобы залить в каждом кадре наш тор, его необходимо выделить. Используем для этого инструмент "Выделение по цвету".
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Щелкаем по красному цвету внутри фигуры и она выделена далее ее можно заливать градиентом.
Если вам будет удобнее и нагляднее, то снимите видимость с верхних слоев, оставив видимым только нижний. Сделайте слой активным и залейте его выбранным градиентом. Затем перейдите на второй слой включите его видимость и выделите его. Также залейте его выбранным градиентом, но, например, измените направление градиента или его протяжение. Затем включите третий слой, выделите его и залейте градиентом. Внимательно следите за тем, чтобы был выделен тот слой, с которым вы работаете.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Слои залиты выбранным градиентом. Можно даже просмотреть анимацию. "Фильтр-Анимация-Воспроизведение". Анимация работает.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Сделаем обводку нашего объекта на каждом слое. Установим цвет переднего плана ближе к черному. Выделяем первый слой, делая его рабочим. Объект у нас выделен, поэтому идем во вкладку меню "Выделение" и щелкаем по строке "Редактор выделения". Откроется диалоговое окно "Правка выделенной области". Выбираем пункт "Обвести указанным типом линии" и выставляем параметры как на скрине (или свои). Нажимаем "Обвести". Далее поочередно делаем рабочими второй и третий слои. Выпоняем обводку, в каждом случае с теми же параметрами, как на первом слое.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Следующим шагом будет создание к каждому слою этой анимации полупрозрачного отражения.
Создаем каждому слою дубль. Всего у нас теперь получится 6 слоев или 3 группы, в каждой из которой по 2 одинаковых слоя.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

В каждой группе из одинаковых слоев нижний слой переименуйте в Дубль1,Дубль2,Дубль3, соответственно, а верхние слои каждой группы - Диск1, Диск2, Диск3.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Нижние слои мы сначала сдвинем относительно основных, для того чтобы их было видно, а затем будем делать полупрозрачными.
Для этого, выключите глазки видимости на основных слоях Диск 1, Диск2, Диск3. Затем свяжите слои Дубль1,Дубль2, Дубль3. Для этого щелкните в клеточке рядом с глазком видимости в каждом из этих слоев. Рядом со связываемым слоем должна появиться цепочка.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Выберите инструмент "Перемещение" и сдвиньте связанные слои. Включите видимость основных слоев и отрегулируйте положение слоев "Дубль", так чтобы эти слои были хорошо видны из- под основных.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Развяжите слои и для всех слоев выполните команду "Слой-Слой к размеру изображения".
Теперь слои дубли по очереди сделаем полупрозрачными. Значение непрозрачности для каждого слоя я выбрала "40". Вы можете выбрать свое.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

К каждому слою "Дубль", после смены значения непрозрачности можно также применить фильтр "Размывание". "Фильтры-Размывание-Гауссово размывание".
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Объединим Основные слои с их дублями. Встаем на каждый основной слой поочередно, начиная с "Диск1" и выполняем "Слой –Объединить с предыдущим". Следите внимательно, чтобы каждый основной слой "Диск" объединился со своим дублем. Теперь у нас З слоя "Диск" со своим полупрозрачным отражением.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Каждому объединенному слою добавим эффект полупрозрачной отбрасываемой тени.
Поочередно встаем на каждый из трех слоев и применяем фильтр "Свет и тень – Отбрасываемая тень" с параметрами, как на скрине (или свои значения)
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Под каждым слоем у нас получился слой с отбрасываемой полупрозрачной тенью
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Объединим каждый основной слой с его тенью и выполним для каждого слоя команду "Слой – Слой к размеру изображения"
Инструментом "Кадрирование" можно убрать лишнее поле вокруг нашего объекта с тенью.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Щелкните внутри выделения, чтобы применить кадрирование.
Далее нам осталось сохранить нашу созданную анимацию в формате APNG и убедиться, что все созданные нами эффекты –полупрозрачное отражение и полупрозрачная тень, останутся таковыми и после сохранения нашей анимации.
Поскольку оптимизировать наше изображение перед сохранением нельзя, то правку атрибутов слоя будем делать сами. Для этого щелкаем дважды на иконке слоя и вызываем диалоговое окно "Правка атрибутов слоя". Делаем это поочередно с каждым слоем, начиная с первого. Вписываем в графу Имя слоя соответственно по номерам

180-это задержка воспроизведения анимации, replace –это режим отображения смены кадров в анимации. При данном режиме последующее изображение полностью скрывает предыдущее.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Сохраняем нашу анимацию. Идем "Файл-Сохранить как"


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

После того как указаны все атрибуты сохранения и выбран формат сохранения (в нашем случае он называется PNG+APNG image. ) нажимаем сохранить. Появится диалоговое окно для ввода атрибутов сохранения в формате APNG и библиотека командной строки сохранения APNG.
В диалоговом окне сохранения в формате APNG, отмечаем пункты как на скрине.
 

«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Нажимаем "Export"
Если все сделали правильно, пойдет процесс сохранения. Загрузчик будет показывать сохранения каждого слоя. Если что-то сделали не так – в сохранении будет отказано. Очень часто это происходит если изображение пытались оптимизировать или какой-то из слоев не приведен К размеру изображения. Просматриваем полученное изображение в просмотрщике на вашем компьютере (например XnViewPortable_1.97.8 ) и в браузере, который поддерживает формат APNG(например FirefoxPortable_4.0.1_Russian или Opera)
Вот наше изображение сохраненное в APNG

А это тексты созданные по такому же принципу.

Еще раз повторю последовательность создания и сохранения изображения на прозрачном слое в формате APNG в редакторе GIMP.

Еще раз повторю последовательность создания и сохранения изображения на прозрачном слое в формате APNG в редакторе GIMP.
1. Создаем или открываем изображение PNG в GIMP.
2. Создаем слои для анимации.
3. Применяем к слоям эффекты.
4. Все слои приводим к Слой-Слой к размеру изображения.
5. Оптимизировать анимацию в Gimp нельзя!
6. Вводим атрибуты слоя, которые должны содержать время задержки кадров и режим воспроизведения анимации. Например, #1(180ms)(replace).
7. Сохраняем анимацию в APNG.
8. Оптимизируем APNG изображение.

Теперь об оптимизации полученного изображения. Есть небольшая портативная программа apngopt_gui-1.0-bin-win32 Пользоваться ей довольно просто. Указываете путь к изображению APNG, которое хотите оптимизировать и путь для сохранения оптимизированного изображения. Жмете Старт и ждете выполнения оптимизации.


«Создаем, сохраняем и оптимизируем APNG-изображение.» на Яндекс.Фотках

Так созданное в уроке изображение Диск размером 271x243пикс весило 162 КБ, а после оптимизации 125 КБ.
Я создала еще одну анимационную картинку в Gimp, но не на прозрачном слое, а только используя в нем изображение PNG.
После сохранения ее в формате APNG она, при размере 640x640 пикс, весила аж 6,08 МБ, что, конечно же очень и очень много.
После обработки этой картинки в программе apngopt_gui-1.0-bin-win32 картинка при тех же размерах стала весить 1,29 МБ, что вполне допостимо.



Иногда после оптимизации вес картинки снижается существенно, иногда не очень. Но в любом случае программа очень нужная.
Скачать ее можно здесь apngopt_gui-1.0-bin-win32.zip

Изображение созданное и сохраненное в APNG можно конвертировать в обычный GIF с помощью программы конвертирования apng2gif_gui-1.2-bin-win32
Скачать ее можно здесь apng2gif_gui-1.2-bin-win32.zip