Долгое время многие мечтали о том, чтобы для анимации появился новый формат. Более прогрессивный, чем привычный гиф, у которого, как все уже знают, есть один огромный недостаток - он воспринимает только 256 цветов, из-за чего качество работ всегда (и иногда очень значительно) портится.
Но альтернативы долгое время не было.
Теперь же появился новый формат  apng. Это то, о чем многие мечтали. Анимация качества пнг. Да, есть флеш-анимация, которая позволяет добиться максимума качества при минимуме веса, но во флеше не сделаешь форумные аватары.
Новый формат, конечно, не совсем оправдал ожидания, поскольку у него ряд очень существенных недостатков. И из-за них рядовому аватарщику, возможно, и не захочется его использовать.
Расскажу сначала о достоинствах:
А достоинство у формата только одно - пнг качество анимации. Миллионы цветов. То, о чем все мечтали.
Теперь о недостатках подробно (такие недостатки заметила я):
1. Формат apng корректно отображается только в 2-х браузерах: Opera и Mozilla Firefox. Те люди, у которых установлены другие браузеры (IE, Google Chrome итд), увидят только статичное изображение. Без анимации.
2. Вес изображения фантастически огромен. Представьте себе вес одного аватара пнг, умноженный на количество кадров. В работе с этим форматом нужно жертвовать размерами и количеством кадров.
3. Сложности с сохранением и просмотром. Сохранять в этом формате сложно, иногда сайт для загрузки глючит (если не сказать, всегда хдд). Нужно делать массу лишних телодвижений.
Невозможно просмотреть такую анимацию в фотошопе (он откроет только 1 кадр) и в стандартных просмотрщиках (подходят только XnView и KSquirrel).
4. Невозможно выставить разную задержку для разных кадров. Задержка будет всегда одинаковой.

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

ШАГ 1
Вес и размер
Чем меньше - тем лучше. Сайт может не захотеть работать с анимациями в очень много кадров и огромного размера.
Если Вы решили поэкспериментировать сразу на многокадровом муве - откажитесь от этой затеи. Могу практически со 100%-ной уверенностью сказать, что у Вас навряд ли выйдет создать громоздкую (по количеству кадров и размеру) анимацию.
Начните с простых анимаций, чтобы освоить принцип работы (а он очень необычен).

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

Для любопытных - вот так выглядит мой псд с анимацией.

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

Но наш мануал не о гифе. Он здесь только для наглядности. Да и не все могут адекватно вывести качество гифки.

ШАГ 2
Подготовка слоев
Начнем работу над первым апнг.
Создайте любую анимацию, как сделала я. Работайте как обычно. Накладывайте текст, текстуры, корректировки - что душе угодно. На цветах можно не экономить.
Выделите в ВСЕ слои Вашего псд и создайте для них группу, нажав Ctrl+G.

Ваша панель слоев теперь будет Выглядеть так.

Затем обратимся в меню анимации, обведенное кружочком. И выберем функцию Flattern Frames Into Layers|Создать слои из кадров.

Панель слоев будет выглядеть вот так.

ШАГ 3
Сохранение и архивация слоев
Теперь у Вас есть 12 кадров и 12 слоев анимации.
Создаем папку где-то. Например, на рабочем столе.
Теперь последовательно сохраняйте туда каждый слой в формате пнг, присваивая номер от 1 до 12 (тк у меня 12-кадровая анимация).
Обязательно нужно делать это ПОСЛЕДОВАТЕЛЬНО. И именно цифрами.

Ваша папка должна выглядеть ТАК. Если у Вас иначе - возможно не заработает. Если Вы сделали иначе - не пишите в теме сразу о том, что у Вас не вышло. Переделайте именно так (заранее прогнозирую вопросы, тк на этом этапе можно все испортить ).
Немного забегая вперед, скажу. НЕ ДЕЛАЙТЕ сразу урок. Дочитайте его до конца. Есть второй способ, где архив не нужен.

Теперь нужно создать ZIP-архив папки со слоями. Это НЕ должен быть RAR-архив. Только ZIP!
Я использую бесплатный архиватор 7-Zip. Скачать его можно здесь.

Вот такие настройки архивации установлены у меня. Прошу обратить внимание на то, что стоит формат ZIP, а не стандартный для данного архиватора 7z.

ШАГ 4
Создание пнг-анимации: 2 способа
В этом нам поможет данный сайт: http://animatedpng.com/index.php/assembler/
Это сайт разработчиков данного формата. Вернее, мода стандартного пнг.

Здесь нас интересуют только две опции - время и загрузка.
Время можно выставить в миллисекундах.
Там по умолчанию стоит 100 миллисекунд. Это 0,1 сек. Стандартная задержка для фотошопной анимации.
Если Вы хотите устаноновить задержку 0,15 или 0,2, то соответственно нужно вписать 150 или 200 миллисекунд.

Загрузка на этот сайт часто ГЛЮЧИТ.   Я Вас предупредила.

Существует также второй способ создания апнг. На мой взгляд, он в сто раз проще.
Скачайте данную программу.
Я на всякий случай залила ее прямым скачиванием.
Откройте в ней все 12 слоев (БЕЗ АРХИВА!) одним кликом, просто выделив их при  открытии.

Выставьте задержку и сохраните. Теперь Ваш апнг можно заливать на любой файлообменник.

Теперь сравним качество и вес: gif vs apng

Качество второго аватара намного выше, но вес говорит в пользу гифа:
78 KB и 558 KB
Разница весьма и весьма ощутима.
Написано специально для colorforum.ru
Копировать можно только в полном объеме (со всеми скринами и копирайтами) и активной ссылкой на наш форум.