Animated PNG Maker
This tool will assemble individual image files into an animated PNG file. It gives you options to change frame order using drag and drop, set frame disposal (whether or not to keep the previous frame in the background), set loop count, or skip the first frame. If you are making an animation with transparent areas, it's possible to use the first frame as a background image for the rest of the frames.
You can also use it to edit existing APNG (change frame order, animation speed, disposal method), merge multiple APNG files, add or remove frames from animation or convert other types of animated images to APNG. It can import APNG, WebP, GIF, FLIF, and MNG animations, as well as archives of images (ZIP, RAR, 7z).
Animated PNG files work similarly to animated GIFs but can contain more colors, partial (alpha) transparency, and other features for much greater image quality.
Анимированный PNG в Firefox, Opera и WebKit? Легко!
Однажды, от скуки, мне захотелось создать красивую полноцветную анимацию с 8-битной прозрачностью. Понятно, что GIF для этой цели никак не подходил и я стал искать альтернативы. Flash в этом качестве даже не рассматривался – слишком нагружает процессор, плохо встраивается в страницу поверх других элементов, да и стоит не у всех.
Сперва мой взгляд пал на MNG, родственника PNG. «Спецификация формата выпущена ещё в 2001 году, поэтому он наверняка реализован во всех современных браузерах!». И тут меня ждало первое разочарование. Формат оказался слишком сложным для реализации – реализация Mozilla, по их словам, содержала столько же строк кода, сколько все остальные форматы вместе взятые, за что и была удалена из их продуктов. Другие производители браузеров, похоже, даже не пытались внедрить у себя этот формат. Конечно, существует плагин для браузеров, поддерживающих плагины Netscape, но это ничем не лучше Flash. Отмечу лишь, что, возможно, формат слишком опередил свое время. Судя по описанию возможностей, это такой растровый SVG.
Дальше поиски привели меня к формату APNG. Формат прост, как два рубля: в файле записаны изменения в кадре от предыдущего с некоторыми мелкими нюансами. Но самое главное, что браузеры, не поддерживающие этот формат, отобразят статичную картинку. В целом, по возможностям формат схож с GIF. Он был предложен Mozilla как замена монструозному MNG. Проверяю в Firefox – все отлично работает. Opera – также. Открываю в Chrome и… получаю статичную картинку. Что произошло: Mozilla предложила включить APNG в спецификацию PNG. Путем голосования эта идея была отвергнута. И теперь часть браузеров поддерживает этот формат, а часть – нет.
Предо мной явственно предстала картина:
Mozilla: Ваш формат плохой, вы ничего не понимаете в анимированных PNG! Мы сделали свой, без шахмат и поэтесс. Включите его в спецификацию!
Группа разработчиков PNG: А вот вам!
Как это часто бывает, из-за людского самомнения мы уже десять лет имеем удовольствие пользоваться давно устаревшим GIF.
И тут меня посетила идея: вроде же в SVG можно вставлять растровые изображения?!
Если гора не идет к Магомету
Разбиваем картинку на отдельные кадры: 
И так далее. Получилось 25 кадров.
Указываем размеры SVG, равные размеру самого большого кадра, и вставляем изображения. Порядок, кстати, не важен.
Дальше я было попытался просто накладывать последовательно кадры друг на друга, но не учел прозрачности и получил солнышко из уха лисы (этот же эффект можно пронаблюдать в IE9):
Эффект можно использовать для реализации одного из режимов APNG: отрисовка следующего кадра поверх предыдущего.
Теперь анимируем свойство прозрачности (opacity). Можно анимировать и координаты и сдвигать кадры за пределы видимости.
Тут проблема может проявиться в том, что прозрачность будет меняться плавно и появится шлейф или мерцание. Для этого мы указываем calcMode как «discrete».
Список опорных значений: values=«1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0». Как видно, это первый кадр. Первое значение – 1 – изображение не прозрачно. На всех остальных кадрах – полностью прозрачно.
Продолжительность анимации (dur) выбираем так, чтобы при делении на число кадров получить время одного кадра. Если какой-то кадр должен находиться на экране вдвое большее время, список опорных значений придется удваивать, либо менять длительность одного значения, что несколько сложнее.
Теперь у нас остается лишь одно неудобство – анимация состоит из множества файлов. Эту проблему мы решим с помощью data:URL, встроив изображения прямо в SVG.
Размер исходного APNG: 613321 байт;
Размер SVG: 799692 байт;
Размер SVG, сжатого gzip: 601409 байт. Даже меньше исходного!
Кадры PNG были оптимизированы при помощи pngout.
Внимательный читатель мог заметить, что данная «тайная техника» не работает в IE. Могу посоветовать только отдавать ему другой код с GIF или Flash, ждать IE10 и готовить лопату.
Создаем анимацию для PNG-картинки
В этой статье мы рассмотрим процесс создания анимации, на примере PNG-картинки. Для работы понадобится Adobe Photoshop и Adobe AfterEffects, а также сама картинка.
Приступим к реализации:
Открываем свою картинку в Photoshop-е и дублируем ее при помощи сочетания клавиш «Ctrl+J», выбираем инструмент лассо:
При помощи ранее выбранного инструмента выделяем первый глаз, затем с зажатой клавишей Shift выделяем второй (На этом этапе важно выделить только глаза, не задевая ничего лишнего):
Нажимаем правую кнопку мыши по любому из выделенных глаз и копируем их на новый слой:
Выключаем видимость у нового слоя:
Отдельно вырезаем ресницы, для этого дублируем слой с глазами и повторяем действия из предыдущих шагов. Не забываем удалить копию слоя:
Сохраняем результат в формате .psd:
Открываем Adobe AfterEffects и импортируем PSD с параметром «Composition»:
После переноса файла, перекидываем саму композицию на timeline и открываем ее двойным кликом:
*Выбираем инструмент, указанный на скриншоте:
Ставим точки на ресницах:
После этого пролистываем на пару кадров или секунд вперёд и тянем за каждую точку, при необходимости выравнивая:
Повторяем те же действия со вторым глазом. Во вкладке с эффектами находим эффект «Linear Wipe»/»Линейное стирание», переносим его на отрезок с глазами:
Вот примерные настройки, значения можно чуть-чуть изменить:
Создаем два значения, в самом начале устанавливаем ноль, а на карде с закрытыми глазами ставим Transition Completion на +/- 30%. Если стирание работает неправильно, то корректируем значения(Wipe Angle изменяем в зависимости от угла наклона персонажа, Feather служит для сглаживания краёв):
После этого копируем первый ключ «CTRL + C», создаем отступ длинной в столько же кадров сколько и до второго, и вставляем его «CTRL + V»:
Повторяем тоже самое и с кадрами на ресницах:
Копируем отрезки с глазами и ресницами сочетанием клавиш «CTRL + D» и перемещаем на пару кадров или секунд вправо, обрезаем отрезки снизу при помощи «Ctrl+Shift+D»:
Нажимаем на данную вкладку со своим названием:
Анимируем персонажа, для этого расставляем точки примерно как на скриншоте:
Повторяем все те же действия что делали после выбора инструмента(Пункт со *), только с самой верхней точки:
Конструктор гиф анимации онлайн.
Зарегистрированные пользователи могут добавить свою анимацию в галерею!
Оживить фотографию или создать свой анимационный микрофильм применив эффекты. Ниже представлены примеры как можно использовать конструктор.
Анимация фотографии.
Создание анимированного фото и открытки онлайн с помощью конструктора ProGif увлекательное и интересное занятие. Принцип работы редактора заключается в том, что на статическое фото накладываются анимированные объекты и сохраняется результат в виде анимированного файла GIF или WebP. По желанию можно создать анимацию с чистого листа.
Как сделать анимированное фото и открытку?
Теперь перейдем непосредственно к процессу создания анимации изображений в ProGif.
Первое, что нужно — нажмите на кнопку «Открыть редактор» на данной странице и загрузите редактор.
Второе — необходимо выбрать размер будущего файла анимации, загрузить фото или создать проект с чистого листа. (в дальнейшем вы сможете загрузить сое фото на холст)
Далее — добавьте анимированные эффекты на фото. Нажмите кнопку "Анимация" и выберите библиотеку с анимированными файлами. При клике по понравившемуся файлу, на холст будет загружена и воспроизведена, анимация.
За результатом своих действий можно будет следить непосредственно на холсте. При выборе большого количества гифок, может появиться эффект "торможения" при просмотре анимации — это зависит от производительности вашего компьютера. Если все же появился данный эффект — отключите просмотр с анимацией.
В конструкторе можно анимировать любой объект. Например — текст, клипарт, фигуры и другие элементы на своё усмотрение. Для этого выделите объект и нажмите кнопку АНИМИРОВАТЬ. В открывшемся окне выберите понравившийся эффект анимации.
Дополнительно примененная анимация к подвижным картинкам усилит эффект движения.
После создания анимации скачайте файл в формате анимированный GIF и сохраните на компьютер. Вы можете выбрать другой формат и сохранить все последовательные кадры из проекта в одном Zip архиве.
Итоговый "вес" GIF файла во многом зависит от размера фото и количества анимашек. По умолчанию применяется сжатие файла.
Вы можете дополнительно сжать, уменьшить вес файла — отметив пункт СЖАТЬ
Работа с анимацией:
Все анимашки имеют пропорциональный размер относительно холста. Увеличение размеров анимашки приведет к ее "размытию" и как следствие ухудшение качества!
Например — искры имеют небольшой размер и увеличив их они станут нечеткими. Вместо этого предпологается разместить несколько штук различных искр. Этот вариант будет наиболее эфективен и красочен.
Рекомендации при создании анимированной открытки:
При создании анимированной открытки в конструкторе начните с добавления клипарта — разместив его на заднем фоне. Составьте основной дизайн поздравительной открытки и напишите поздравление. Текст желательно писать крупно с форматированием, что бы он четко читался.
После анимируйте результат добавив различные эффекты анимации, скачайте открытку.
В каком формате сохранить анимированный файл?
Вы можете выбрать формат GIF или WebP для анимации.
GIF— используется для веб-изображений и анимированной графики, имеет ограничение в 256 цветов. Можно открыть любой программой для просмотра изображений, для просмотра анимици открыть любым браузером.
WebP — используется для веб-изображений и анимированной графики, имеет небольшой размер и высокое качество. Можно открыть во всех современных браузерах
Сделайте красивую анимацию — объединив свою фантазию и возможности ProGif.
Интуитивно понятный и простой интерфейс конструктора имеет в своём наборе достаточное количество инструментов и большое количество объектов для создания анимации. Вы легко сможете создать анимированные фото и авторские поздравительные открытки.
С конструктором справится даже ребенок, не обладающий специальными знаниями и умениями, и сможет создать живое фото. Уверены, что у вас точно получится отлично!
Делитесь полученным результатом с друзьями и знакомыми, публикуйте анимацию в социальных сетях и получайте лайки.
Редактор не имеет ограничений по возрасту! Предназначен для детей и взрослых — Окунись в волшебный мир сказки, ведь создавать анимированные изображения достаточно увлекательное занятие и приносит исключительно позитивные эмоции.
Процесс анимации картинки в редакторе напоминает создание аппликации или сборка из деталей конструктора, то есть создание единой картинки из нескольких кусочков. В нашем случае — это фотографии, которые вы можете загрузить, картинки клипарта, надписи и непосредственно движущиеся картинки, которые в дальнейшем будут наложены на фотографию и склеены в одну единую анимированную композицию.