Автор Тема: Новый формат apng (png с анимацией)  (Прочитано 11440 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн SatinelightАвтор темы

  • блудный Светик снова АЕ-шит
  • Аватарщица
  • *
  • Сообщений 2114
  • Респектов +748
  • Репутация 484
  • Пол: Женский
    • Просмотр профиля
Долгое время многие мечтали о том, чтобы для анимации появился новый формат. Более прогрессивный, чем привычный гиф, у которого, как все уже знают, есть один огромный недостаток - он воспринимает только 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
Разница весьма и весьма ощутима.
« Последнее редактирование: 01 Май 2011, 03:05:52 от Serenissima »

Форум аватар


Оффлайн kilot

  • Ангел-
  • Хранитель
  • *
  • То, что мы видим, зависит от того, как мы смотрим.

  • Сообщений 6692
  • Респектов +5863
  • Репутация 993
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #1 : 30 Апрель 2011, 04:15:54 »
+2
Интересный и очень информативный урок. *super* Жаль, что пока это только, чисто, в качестве эксперимента, ведь практической пользы от данного формата пока мало. Вес в 7 раз превышает размер гифа, видят только два самых продвинутых браузера, хостинги картинок не совсем дружат с этим форматом. Хотя, насколько сейчас быстро развиваются технологии, то скоро гифы канут в лету, а их место займёт APNG. А ты у нас будешь одним из первопроходцев в освоении работы с ним *super* НА ФА - так точно первая *smile*

Оффлайн Крон

  • Аватарщик
  • *
  • Сообщений 11078
  • Респектов +8535
  • Репутация 3881
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #2 : 30 Апрель 2011, 15:24:34 »
0
Качество отличное, кто бы спорил *pardon me*, но вес... *scratch_one-s_head* Светик, полегче ничего не придумали? Хотя... в наше время мало кто сидит на низкой скорости и лимитированном трафике *pardon me*
Я ведь не спроста создал эту и эту темы. Из них видно, что в основном скорости приличные *victory*

Оффлайн Nikola Tesla

  • Землянин
  • *****
  • Сообщений 6462
  • Респектов +3559
  • Репутация 1361
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #3 : 30 Апрель 2011, 16:22:45 »
0
Странно новые версии интернет браузеров Internet Explorer и Google Chrome действительно не поддерживают формат apng  *scratch_one-s_head*

Оффлайн kilot

  • Ангел-
  • Хранитель
  • *
  • То, что мы видим, зависит от того, как мы смотрим.

  • Сообщений 6692
  • Респектов +5863
  • Репутация 993
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #4 : 30 Апрель 2011, 16:40:57 »
0
Nikola Tesla, тебе, как человеку, сталкивающимся с веб-мастерингом, неподдержка чего-то в IE, каких бы то ни было версий, не должна казаться странным. У них всё не как у людей *smajlik*

Оффлайн Lana★

  • Дюранщица
  • Колорщица
  • *
  • Сообщений 5485
  • Респектов +3066
  • Репутация 1641
  • Пол: Женский
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #5 : 30 Апрель 2011, 16:57:43 »
0
 Светка, молодчина *girlfriend*, развивай эту тему) Авось и колоризации можно будет спокойно анимировать *victory*
Сделала из фотографий, подобрала более близкие, не совсем совпадают но, естественно, суть не в этом, ищем 10 различий гиф и апнг   *smajlik*

Это моя кошечка Мотильда

Спойлер

АПНГ ГИФ


Оффлайн kilot

  • Ангел-
  • Хранитель
  • *
  • То, что мы видим, зависит от того, как мы смотрим.

  • Сообщений 6692
  • Респектов +5863
  • Репутация 993
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #6 : 30 Апрель 2011, 17:56:58 »
0
Звёздочка, ну... ты, явно, на телефон кошечку снимала. Качество фоток не очень. Так что, в результате, я не заменил большой разницы между APNG и GIF, кроме веса, что говорит не в пользу APNG, в данном случае *pardon me*

Оффлайн SatinelightАвтор темы

  • блудный Светик снова АЕ-шит
  • Аватарщица
  • *
  • Сообщений 2114
  • Респектов +748
  • Репутация 484
  • Пол: Женский
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #7 : 30 Апрель 2011, 19:17:33 »
+1
Вес в 7 раз превышает размер гифа, видят только два самых продвинутых браузера, хостинги картинок не совсем дружат с этим форматом. Хотя, насколько сейчас быстро развиваются технологии, то скоро гифы канут в лету, а их место займёт APNG.
Солгласна, недостатки у формата очень уж существенные, но вообще круто, что он просто есть *sun*
И можно привыкнуть в нем работать. Правда, красоту оценят только оперцы и мозилловцы *smajlik*
А ты у нас будешь одним из первопроходцев в освоении работы с ним  НА ФА - так точно первая
Я люблююю все новое осваивать...  *modesty*
но вес...  Светик, полегче ничего не придумали?
Я тоже так думаю. Последнее время на весе не экономлю, тк делаю работы на форумы, где нет сильного лимита.
 
Крончик, вот ты как всегда. Нет бы порадоваться, что хоть такое есть. *smajlik*
Что придумали - тем я честно поделилась *wink*
Хотя... в наше время мало кто сидит на низкой скорости и лимитированном трафике
Странно новые версии интернет браузеров Internet Explorer и Google Chrome действительно не поддерживают формат apng
Саш, насчет гугл хрома и правда непонятно. Тк он вроде довольно продвинутый...  *pardon me*
А от Эксплорер всегда отстает... Вообще, он дурной. Терпеть его не могу.
Авось и колоризации можно будет спокойно анимировать
Светик, так в апнг можно спокойно анимировать *smajlik*
Только не все это увидят. *smajlik*
Это моя кошечка Мотильда
Как-то не особо видна разница. Мне кажется, нужно взять один старый псд с анимацией и просто пересохранить в апнг. Тогда будет заметно.

Оффлайн Lana★

  • Дюранщица
  • Колорщица
  • *
  • Сообщений 5485
  • Респектов +3066
  • Репутация 1641
  • Пол: Женский
    • Просмотр профиля
 
просто пересохранить в апнг.


Одуван Чик))))

 

Мда.. тут уже видно различие)))

Оффлайн kilot

  • Ангел-
  • Хранитель
  • *
  • То, что мы видим, зависит от того, как мы смотрим.

  • Сообщений 6692
  • Респектов +5863
  • Репутация 993
  • Пол: Мужской
    • Просмотр профиля
Звёздочка, да, тут различие заметно невооружённым взглядом  *super*

Оффлайн Alia

  • И в этом вся я...
  • Аватарщица
  • *
  • Сообщений 2562
  • Респектов +856
  • Репутация 1011
  • Пол: Женский
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #10 : 08 Май 2011, 23:37:23 »
+4
С прогой не разобралась, а с сайтом получилось (:

VS

Оффлайн kilot

  • Ангел-
  • Хранитель
  • *
  • То, что мы видим, зависит от того, как мы смотрим.

  • Сообщений 6692
  • Респектов +5863
  • Репутация 993
  • Пол: Мужской
    • Просмотр профиля
Alia, кстати, у меня GIF показывается не анимированным

Оффлайн Эвридика

  • Аватарщица
  • *
  • Сообщений 1622
  • Респектов +1539
  • Репутация 442
  • Пол: Женский
    • Просмотр профиля
Разница между gif и apng конечно видна но мне что-то не особо нравится этот формат, да и отображается он не совсем нормально, иногда отображается иногда-нет *pardon me* у меня например аватары этого формата появились только после того как я дофига раз обновила страницу

Оффлайн Никита

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #13 : 09 Май 2011, 00:54:22 »
+1
С прогой не разобралась, а с сайтом получилось (:

Аналогично  *delight*

Короче вот *skipjack*:

Оффлайн Alia

  • И в этом вся я...
  • Аватарщица
  • *
  • Сообщений 2562
  • Респектов +856
  • Репутация 1011
  • Пол: Женский
    • Просмотр профиля
Alia, кстати, у меня GIF показывается не анимированным

я случайно его 1м кадром сохранила  *modesty*

а с программой может быть не разобралась потому что мне нужна была задержка 1,5сек. а я поставила 15000 млсек. а надо было 1500....не наю (:

Оффлайн Yuriy_Yav

  • Новичок
  • *
  • Сообщений 17
  • Респектов +2
  • Репутация 0
    • Просмотр профиля
Как по мне, давно уже пора было придумать замену Gif ведь прогресс на месте не стоит. А вот с размерами конечных изображений я думаю разработчики разберутся, придумают какой-то новый вид сжатия.

Оффлайн Solovei95

  • Наблюдатель
  • Сообщений 2
  • Респектов 0
  • Репутация 0
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #16 : 10 Июль 2011, 06:30:35 »
0
Позвольте я вмешаюсь: вот вы создали APNG. Но надо его оптимизировать!
http://sourceforge.net/projects/apng/files/APNG_Optimizer/
Стериотип [вес * кадры] искажается!

Оффлайн traviamer

  • Решительный
  • Сообщений 7
  • Респектов 0
  • Репутация 0
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #17 : 31 Август 2011, 01:49:36 »
0
Как по мне, давно уже пора было придумать замену Gif ведь прогресс на месте не стоит. А вот с размерами конечных изображений я думаю разработчики разберутся, придумают какой-то новый вид сжатия.

А как же Flash? Очень даже прогрессивно)

Оффлайн Ya-Grisha

  • Наблюдатель
  • Сообщений 4
  • Респектов 0
  • Репутация 0
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #18 : 20 Ноябрь 2011, 16:18:10 »
0
4. Невозможно выставить разную задержку для разных кадров. Задержка будет всегда одинаковой.

Это не правда!!!

Оффлайн dolgagarina

  • Наблюдатель
  • Сообщений 1
  • Респектов 0
  • Репутация 0
  • Пол: Мужской
    • Просмотр профиля
Re: Новый формат apng (png с анимацией)
« Ответ #19 : 23 Апрель 2012, 22:20:37 »
0
Apng вообще странный формат, идея у него хорошая, но реализация... Сам png очень хорош, и многое умеет.  Кто не в курсе, у png не один алгоритм сжатия, и его можно очень хорошо адаптировать под любой размер, что для веба важно (на сайте Лебедева была по этому поводу статья). Png может даже сохранять полупрозрачность с малым кол-вом цветов. Т.е. в фотошопе png с прозрачностью автоматически сохраняется без урезок цвета, но если его предварительно ограничить в цветах и сохранить с полупрозрачностью, то по весу он не сильно будет отличатся от png-8 (в том же фотошопе). Но все это я к чему, apng всего этого не может, он сохраняется в максимальном размере, с наихудшим алгоритмом сжатия, что само по себе делает его для веба неприятным. Это и является основной причиной того, что его не стали поддерживать официально разработчики браузеров (и сами разработчики png). Ну и к тому же, на сколько я помню, apng разработка фаерфоксов и кроме оперы, этот формат никто не хавает.