APNG-изображение. Урок для Gimp.

Четверг, 21 Апреля 2022 г. 23:03 + в цитатник

Цитата сообщения novprospekt

Прочитать целиком В свой цитатник или сообщество!

Создаем, сохраняем и оптимизируем APNG-изображение. Урок для Gimp.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#2(180ms)(replace)

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

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

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

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

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

Еще раз повторю последовательность создания и сохранения изображения на прозрачном слое в формате 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, которое хотите оптимизировать и путь для сохранения оптимизированного изображения. Жмете Старт и ждете выполнения оптимизации.

Так созданное в уроке изображение Диск размером 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

Серия сообщений "Уроки GIMP":
Часть 1 - Новогоднии открытки в Gimp.
Часть 2 - Создаем демотиватор в Gimp.
...
Часть 5 - Gimp:Создание баннерной кнопки 88*31.
Часть 6 - Gimp: Анимированные круги.
Часть 7 - Создаем, сохраняем и оптимизируем APNG-изображение. Урок для Gimp.
Часть 8 - Поддержка APNG-формата анимации в браузере Google Chrome.
Часть 9 - Уроки GIMP. Создание анимации фильтром жалюзи.
...
Часть 14 - Анимация горячего текста. Моя работа по уроку в GIMP.
Часть 15 - Как сделать анимацию воды и солнышка в Gimp.
Часть 16 - Весенние бесшовный фон с клипартом в GIMP с помощью направляющих.

Серия сообщений "Все для GIMP":
Часть 1 - Новогоднии открытки в Gimp.
Часть 2 - Создаем демотиватор в Gimp.
Часть 3 - Сохранение анимации в формате APNG. Плагин для Gimp
Часть 4 - Создаем, сохраняем и оптимизируем APNG-изображение. Урок для Gimp.
Часть 5 - Поддержка APNG-формата анимации в браузере Google Chrome.
Часть 6 - Урок Gimp.Фильтр "Синий экран или BlueBox".
Часть 7 - Сегодня Пятница, 13...
Часть 8 - Gimp:Радужный текст с расширением Layer Effects
Часть 9 - Урок в Gimp «Рамочка с рваными краями».

Рубрики:

дневник на ЛиРу/ФШ

Метки: фш

<a href="https://www.liveinternet.ru/users/elenaslava/post491943223/">APNG-РёР·РѕР±СЂР°Р¶РµРЅРёРµ. РЈСЂРѕРє РґР»СЏ Gimp.</a><br/>РЎРѕР·РґР°РµРј, СЃРѕС…СЂР°РЅСЏРµРј Рё РѕРїС‚РёРјРёР·РёСЂСѓРµРј APNG-РёР·РѕР±СЂР°Р¶РµРЅРёРµ. РЈСЂРѕРє РґР»СЏ Gimp.

Р’ СЃРІРѕРµРј СЃРѕРѕР±С‰РµРЅРёРё РЎРѕС…СЂР°РЅРµРЅРёРµ Р°РЅРёРјР°С†РёРё РІ С„РѕСЂРјР°С‚Рµ APNG. РџР»Р°РіРёРЅ РґР»СЏ Gimp.  СЏ РЅР°РїРёСЃР°Р»Р° Рѕ APNG-С„РѕСЂРјР°С‚Рµ.

Р”Р»СЏ С‚РµС…, РєС‚Рѕ Р·Р°РёРЅС‚РµСЂРµСЃРѕРІР°Р»СЃСЏ СЌС‚РѕР№ С‚РµРјРѕР№, С…РѕС‡Сѓ РІС‹Р»РѕР¶РёС‚СЊ СѓСЂРѕРє, РєРѕС‚РѕСЂС‹Р№ Р±С‹ РЅР°РіР»СЏРґРЅРѕ РґРµРјРѕРЅСЃС‚СЂРёСЂРѕРІР°Р» РЅРµРєРѕС‚РѕСЂС‹Рµ РІРѕР·РјРѕР¶РЅРѕСЃС‚Рё СЌС‚РѕРіРѕ С„РѕСЂРјР°С‚Р°, Р° С‚Р°РєР¶Рµ РµС‰Рµ СЂР°Р· РѕР±СЂР°С‚РёС‚СЊ РІРЅРёРјР°РЅРёРµ РЅР° РѕС‚РґРµР»СЊРЅС‹Рµ РЅСЋР°РЅСЃС‹ СЃРѕР·РґР°РЅРёСЏ Рё СЃРѕС…СЂР°РЅРµРЅРёСЏ Р°РЅРёРјР°С†РёРё РІ APNG.

Р С‚Р°Рє, РїР»Р°РіРёРЅ gimp-apng-0.1.0.win32 РґР»СЏ cРѕС…СЂР°РЅРµРЅРёРµ Р°РЅРёРјР°С†РёРё РІ С„РѕСЂРјР°С‚Рµ APNG Сѓ РІР°СЃ СѓСЃС‚Р°РЅРѕРІР»РµРЅ. 
РҐРѕС‡Сѓ С‚РѕР»СЊРєРѕ Р·Р°РјРµС‚РёС‚СЊ, С‡С‚Рѕ СЌС‚РѕС‚ РїР»Р°РіРёРЅ РїСЂРѕС‚РµСЃС‚РёСЂРѕРІР°РЅ РјРЅРѕСЋ РґР»СЏ РІРµСЂСЃРёРё GIMP 2.6 Рё РІ Р±РѕР»РµРµ РїРѕР·РґРЅРёС… РІРµСЂ... <a href="https://www.liveinternet.ru/users/elenaslava/post491943223/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Цитатник

-Рубрики

-Метки

-Приложения

-Поиск по дневнику

-Подписка по e-mail

-Интересы

-Друзья

-Постоянные читатели

-Статистика

APNG-изображение. Урок для Gimp.