Форум 2D Аниматор
Image


Вернуться   Форум 2D Аниматор > Кладовая > Уроки, Книги, Учебники графических программ.. > Анимация

Важная информация

Анимация Книги, уроки по анимации и мультипликации...

Ответ
 
Опции темы
Старый 11.12.2010, 21:36   #1
Stan aka Vodka
Администратор
 
Аватар для Stan aka Vodka
 
Регистрация: 29.12.2007
Адрес: MA
Сообщений: 1,494
Сказал(а) спасибо: 978
Поблагодарили 3,000 раз(а) в 679 сообщениях
Stan aka Vodka скоро придёт к известностиStan aka Vodka скоро придёт к известности
По умолчанию Всё, что вы хотели знать о формате GIF, но стеснялись спросить :)



1. Введение

Пожалуй, не найдется такого интернет-пользователя, который никогда не видел анимашек, сделанных в формате GIF. "Ожившие" аватарки, смайлики, кнопки, "прикольные картинки", и так далее - во многих случаях всё это обеспечивается именно этим распространенным форматом. Тем не менее, хотя все мы часто наблюдаем его "лицевую" сторону, мало кто из начинающих аниматоров знает этот формат со стороны "технической". Ну что ж, давайте-ка отбросим все страхи и сомнения, и познакомимся с ним поближе.

Аббревиатура GIF расшифровывается как «Graphics Interchange Format (Формат для обмена изображениями)». Картинки в этом формате бывают статичные (неподвижные), и анимированные (подвижные). Поскольку форум наш посвящен анимации, упор в этой статье я буду делать именно на анимированный GIF. Сразу хочу предупредить, что статья рассчитана не на совсем новичков, а на тех, кто уже сделал первые шаги в закулисный мир анимации, и стремится расширить свой кругозор.


2. Что же из себя представляет анимированный GIF?

GIF - это изображение

Анимированный GIF по сути своей - это не видео-файл, а изображение (картинка), и как любая другая картинка, размещается он на веб-странице через тег IMG. Но, в отличии от изображений других распространенных форматов, GIF может содержать не один, а несколько кадров, показываемых последовательно. В настройках файла можно указать, как именно должна проигрываться эта последовательность - либо бесконечно, либо определенное количество раз.

Для просмотра GIF нужна программа

Важно понимать, что каждый раз, когда мы просматриваем файл GIF, мы делаем это при помощи какой-то программы. Это может быть стандартная виндовская "Программа для просмотра изображений и факсов", веб-браузер (Internet Explorer, Firefox), почтовый клиент (The Bat, Outlook), и так далее. При этом есть некоторые программы, которые, в принципе, показывают GIF, но не способны проигрывать его анимацию (Word, Outlook 2007, Picasa Photo Viewer). В таких случаях программа показывает только первый кадр анимированной гифки. На саму гифку это не влияет - если вы потом откроете ее другой программой, анимация будет проигрываться как надо.

Поддержка GIF в интернет-браузерах

Одной из основных причин популярности формата GIF является то, что все современные распространенные браузеры имеют его встроенную поддержку, и способны проигрывать эту анимацию без дополнительной установки всяких плагинов и надстроек (например, для проигрывания MOV нужен плагин от Apple, а для SWF – проигрыватель от Adobe). Но, к сожалению, такая поддержка хранит в себе один очень неприятный недостаток - разные браузеры иногда по-разному понимают скорость проигрывания GIF-анимации. Подробнее об этом - чуть ниже.

3. Скорость проигрывания

Скорость кадров в секунду (FPS) - это не про GIF

Поскольку формат GIF является картинкой, а не видео-файлом, у него напрочь отсутствует понятие fps (скорость кадров в секунду). Вместо этого, у гифа существует индивидуальная длительность показа (задержки) каждого кадра, которая измеряется в сотых долях секунды.

Вот смотрите: когда на вашем экране идет видео с частотой 25 fps, это означает, что за каждую секунду картинка на экране сменяется 25 раз, то есть получается, что каждый кадр задерживается на экране 1/25 секунды – что в десятичном эквиваленте будет 0.04 (четыре сотых доли) секунды.

Если частота видео равна 12 fps, то время задержки каждого кадра составляет 0.08 секунды (округленно до сотых долей).

Так вот, GIF – совсем не такой. В этом формате любой кадр имеет свою собственную длительность! То есть, например, можно сделать анимашку из трех кадров, в которой первый кадр будет задержан на 0.04 секунды, второй – на 0.08 секунды, а третий и вовсе на все 10 секунд!

Однако многие аниматоры об этом даже не догадываются, поскольку большинство анимационных программ (из тех, что не заточены специально под GIF-анимацию) при экспорте в GIF просто-напросто автоматически переводят fps проекта в соответствующую задержку для каждого кадра.

И хотя в большинстве случаев такой подход вполне справляется с поставленной задачей, но всё-таки не стоит забывать об индивидуальной длительности кадров. Это очень полезное свойство, помогающее сократить объем файла, что всегда важно для веб-графики.

Поясню на простом примере:



В видео «застывшие» моменты передаются повторением нескольких одинаковых кадров. В гифе же для этого можно обойтись всего лишь одним кадром, с увеличенной задержкой. Эта анимашка сделана при условной скорости 10 fps, то есть задержка кадров составляет 0.10 сек., но не всех. За счет увеличенной задержки некоторых кадров, цикл длительностью 3.4 секунды занимает не 34 кадра, а 18 – а ведь это почти двойная экономия!




Скорость проигрывания в разных браузерах

А вот теперь поговорим о самом неприятном. Как уже упоминалось в начале статьи, все браузеры имеют встроенную поддержку формата GIF. Но если пауза между кадрами составляет меньше, чем 0.10 секунды, то браузеры воспринимают ее неадекватно. Firefox в таких случаях рендерит гифку несколько быстрее, чем надо, а Internet Explorer и Chrome - наоборот, медленнее.

На практике это выглядит так: вы делаете гиф-анимашку в каком-нибудь редакторе, подгоняете тайминг, добавляете-убавляете промежуточные кадры – в итоге в конце концов всё выглядит классно и здорово, вы размещаете анимашку в интернете, и вдруг начинается катавасия – у одних пользователей ваша анимашка проигрывается очень медленно, а у других – наоборот, слишком быстро! А происходит это вот из-за чего – помните, в начале статьи я написал о том, что GIF мы всегда смотрим какой-то программой? Так вот – вы то в процессе изготовления просматривали свою гифку анимационным редактором – программой, для которой мультики это «самое главное в жизни», но зрители из Интернета смотрят вашу анимашку браузерами! А любой браузер предназначен, прежде всего, для обработки и вывода гипертекстовой разметки, и гифка для него – это всего лишь один из прочих элементов веб-страницы. Поэтому разработчики браузеров не особенно заботятся о такой незначительной (на их взгляд) вещи, как правильное отображение паузы гифа.

Хотя, если пауза составляет дольше, чем 0.10 сек, то все браузеры справляются с ней довольно таки одинаково. Почему именно 0.10 является пороговым значением? Да просто так уж исторически сложилось из-за всякой там древней совместимости с Netscape 2.0, и бороться с этим мы не в силах. Довольно долгое время вообще ни один браузер не мог проигрывать задержку короче 0.10 сек. – и, хотя сейчас некоторые из них всё-таки «научились» этому – как видите, проблему это не решило, а даже наоборот, несколько усложнило.

Здесь стоит сказать еще об одной особенности тайминга гифа. Дело в том, что межкадровая пауза – это лишь номинальная (то есть как бы «идеальная») величина. Кроме этой паузы, на саму прорисовку очередного кадра у компьютера уходит некоторое время (это зависит от многих факторов - размер и сложность кадра, быстродействие компьютера, и т.д.). Это время прорисовки в номинальную длительность кадра не включено, и при длительных паузах оно практически незаметно, но вот при проигрывании "скоростных" гифок, оно может оказывать существенный эффект на общий тайминг. Иными словами – никто не заметит, что при скорости 2 кадра в секунду задержка составила, на самом деле, не 0.5 сек, а 0.51. Но если кадры мелькают со скоростью 25 fps (0.04 сек), то та же разница в одну сотую долю секунды уже растянет общий тайминг на целых 20%.

В свете вышесказанного, формируется такое простое правило: Если вы хотите, чтобы ваш GIF просматривался в разных браузерах с одинаковой скоростью (максимально приблизительно) - тогда делайте задержку кадров не короче, чем 0.10 сек (то есть не быстрее 10 fps). Естественно, это оказывает негативное влияние на качество анимации, и вносит лишние трудности при конвертировании между GIF и видео-форматами, но поделать с этим ничего нельзя – это вина не формата, а браузеров. Поэтому гиф-аниматор всегда ставится перед таким жестоким выбором – либо 10 fps, либо приличное несоответствие скорости между пользователями разных браузеров. Есть надежда, что в будущем эта проблема решится благодаря замене формата GIF анимированным PNG, но пока, к сожалению, говорить об этом рановато.

4. Цвета, палитры, и эффекты


Палитра GIF


Каждый GIF-файл хранит в себе свою собственную палитру – таблицу цифр, обозначающих цвета, из которых строится кадр (то есть при прорисовке каждого пикселя, программа назначает ему цвет по номеру (индексу), который указан для него в таблице). Анимированный GIF может содержать либо одну глобальную палитру – для всех кадров сразу, либо же несколько отдельных, локальных палитр – по одной на каждый кадр. Для большинства случаев, глобальная палитра подходит лучше локальных – во-первых, места меньше занимает, а во-вторых, это гарантия того, что цвета будут одинаковы на всем протяжении анимации (не будет нежелательного мерцания). Палитра GIF устроена таким образом, что не может одновременно хранить в себе больше чем 256 индексов.

Как создавать палитру GIF, откуда она берется? Не волнуйтесь, создавать палитру вручную вам вовсе не обязательно – большинство программ просто генерируют ее автоматически из ваших рисунков, или из импортированных картинок. Более продвинутые редакторы предоставляют дополнительные возможности управления – например, импорт/экспорт палитр, или добавление/удаление выборочных цветов вручную.

Путаница с «веб-безопасной» палитрой

Довольно часто возникает путаница палитры GIF с [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации], поэтому стоит немного остановиться на этом поподробнее. Давным-давно, на заре Интернета, в эпоху 8-битных мониторов, возникла необходимость определить некий стандартный набор цветов, которые выглядели бы максимально одинаково в разных браузерах и на разных мониторах. Так была рассчитана палитра, состоящая из 216 цветов, названных «безопасными». На основе этих цветов дизайнеры старались разрабатывать элементы и фоны веб-страниц. В ту же эпоху возник и формат GIF, и вполне логично, что «безопасную» палитру часто использовали как палитру для картинок этого формата. Но палитра GIF – это вовсе не то же самое, что «веб-безопасная» палитра (которая состоит из четко определенных цветов). GIF может содержать не более 256 цветов в одном кадре, но это могут быть любые цвета из более чем 16 миллионов. К слову сказать, «безопасная» палитра уже давно утратила свою актуальность, ведь нынче даже мобильные телефоны оснащены 16-битными дисплеями. Хотя и по сей день некоторые программы при экспорте в GIF настойчиво предлагают выбрать палитру «Web 216»…

Прозрачность


Один из цветов палитры GIF может быть объявлен полностью прозрачным – в таком случае сквозь пиксели этого цвета будет виден находящийся под ними фон. Частичная прозрачность цветов («полупрозрачность», или «альфа-канал») форматом GIF не поддерживается. Пожалуй, здесь стоит немного отвлечься, и сказать пару слов о том, что такое вообще альфа-канал.

Существует несколько ошибочное мнение, что «альфа-канал» это и есть «прозрачность». Это не совсем так. Альфа-канал это не сама прозрачность, это ее значение (величина). Проведем аналогию с форматом PNG. В нём цвет каждого пикселя составляется из значений трех цветовых каналов – красного (Red), зеленого (Green), и синего (Blue) – это называется «Цветовая модель RGB». К этим трем каналам можно добавить еще один, содержащий значение прозрачности пикселя – это и есть Альфа-канал (такая разновидность модели RGB имеет название RGBA). Значение альфы «0» означает, что пиксель полностью прозрачен, то есть совсем невидимый. Альфа «255», в свою очередь, означает полностью непрозрачный пиксель. Промежуточные значения определяют, насколько из-под цвета RGB будет «просвечиваться» находящийся за ним фон. Так вот, в GIF ничего подобного нет – там дела обстоят по-другому. При прорисовке кадра, когда программа встречает цвет, объявленный прозрачным – она просто пропускает его, и берет значение цвета из предыдущего кадра.


Сглаживание краев (anti-aliasing)

Давайте попробуем ответить на вопрос: что собой представляет сглаживание краев, что оно делает? Казалось бы, ответ очевиден – ну конечно же, оно сглаживает края! Но как именно? Посмотрите на следующую иллюстрацию. Это одна и та же картинка, представленная в двух вариантах – без сглаживания и со сглаживанием:



Несглаженная картинка слева состоит всего лишь из двух цветов – черного и белого. На первый взгляд может показаться, что сглаженная картинка тоже состоит из двух цветов, но это не так. Давайте-ка рассмотрим ее поближе:



Посмотрите, сколько переходных оттенков создало сглаживание! Благодаря этому эффекту, теперь наша картинка состоит не из двух, а из 102 цветов, и это не шутка! А ведь это всего лишь сглаживание между двумя цветами, что же делать, когда наша картинка будет состоять из более сложных комбинаций цветов? Ведь каждый оттенок должен быть занесен в палитру, а там количество «посадочных мест» весьма ограничено – 256, и не больше… А вот так вот, ничего не поделаешь – как ни крути, а формат GIF штука древняя, и разрабатывался он в те времена, когда страшно было даже представить, что когда-нибудь появятся мониторы, способные воспроизводить более 256 цветов одновременно! Свят, свят, свят…

Впрочем, всё не так уж плохо – всё-таки веб-графика это веб-графика, и сногсшибательное качество ей ни к чему. К тому же, есть такая хитрая технология перемешивания разноцветных пикселей, благодаря которой картинки, состоящие из весьма скромного количества цветов, могут выглядеть довольно качественно. Называется эта технология «дитеринг» (или «дизеринг»), и сейчас мы поговорим о ней поподробнее.

Дитеринг (dithering, дизеринг)


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



Графические и анимационные программы предлагают на выбор различные алгоритмы дитеринга (Floyd-Steinberg, Pattern, Random, Diffusion, Nearest Color, и т.д. и т.п.). Какой из них лучше или хуже – сказать невозможно, потому что всё зависит от каждого конкретного случая, и оптимальное качество обычно подбирается опытным путем. В общих чертах можно сказать, что чем больше цветов в палитре, тем больше шумовых комбинаций можно из них составить, и тем лучше будет выглядеть результат дитеринга. И наоборот, если палитра вашей анимашки содержит небольшое количество цветов, то зачастую лучше дитеринг вовсе отключить, поскольку в такой ситуации он будет лишь мешать, создавая некрасивые разбросанные точки. Учтите, что в некоторых программах дитеринг по умолчанию включен, и чтобы его отключить, иногда приходится покопаться довольно глубоко в настройках.

Стоит также сказать, что применение дитеринга может здорово увеличивать размер файла, за счет того, что неоднородно закрашенные области хуже поддаются компрессии, чем однотонные. И вот мы плавно подошли к еще одному важному аспекту создания GIF-анимашек – оптимизации.

5. Оптимизация

Оптимизация файла GIF – это набор технических приемов, направленных на сокращение объема файла. Поскольку этот формат предназначен, прежде всего, для Интернета, размер файла всегда играет для него очень важную роль. Каждую гифку надо оптимизировать. Чем меньше «весит» анимашка, тем быстрее она загрузится, меньше будет нагрузка на сервер, меньший трафик у провайдеров - а значит дешевле цены на Интернет, и т.д., и т.п.

Посмотрите на следующий пример:



Никаких явных отличий между этими двумя картинками нет. Между тем, та, что слева, имеет объем 149.1 килобайт, а та, что справа – всего лишь 6.6 килобайт, то есть за счет оптимизации размер файла был сокращен более чем в 22 раза!

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

Сокращение количества кадров

Чем меньше количество кадров – тем меньше объем файла. Самой распространенной ошибкой новичков является повторение нескольких одинаковых кадров подряд. В GIF-анимации никогда не должно быть такого повторения – вместо этого нужно ставить один кадр с увеличенной задержкой.

Еще одна типичная ошибка – повторение первого кадра в конце цикличной анимашки. Казалось бы, если анимация должна повторяться, значит последний кадр должен быть точно такой же, как первый. Но тут кроется маленькая хитрость – последний кадр цикла, он на самом деле должен быть не последним, а предпоследним! А «последним» кадром цикличной анимашки является первый кадр, да и то условно - анимация ведь по кругу идет. Иначе при проигрывании будет повторение двух одинаковых кадров подряд. Надеюсь, я понятно объяснил.

Сокращение количества цветов

Чем меньше цветов – тем меньше объем файла. Помните, что многие эффекты, такие как сглаживание, размытие, и градиенты, создают множество дополнительных цветов, поэтому используйте их с осторожностью.

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

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

Оптимальное разрешение

Никогда не стоит злоупотреблять большими разрешениями картинки, если речь идет об анимированном гифе. Всегда старайтесь найти оптимальную ширину и высоту, ведь веб-анимашки вовсе не должны занимать целый экран монитора.

Обрезка неподвижных частей картинки

Большинство видео форматов имеют все кадры одинакового размера, и при показе очередного кадра он полностью замещает собой предыдущий. Но GIF хитер – он может как бы содержать в себе кадры разного размера, и показывать новый кадр, накладывая его поверх предыдущего. Таким образом, если на вашей анимашке есть большие неподвижные участки, то их можно показать только в первом кадре, а в остальных обрезать – такая возможность предоставляется в некоторых GIF-редакторах. Например, маленький прыгающий мячик на фоне большой неподвижной стены:




6. Программы для работы с GIF


Для работы с GIF-анимашками служат специализированные программы – GIF-редакторы. Как правило, они имеют небольшой размер, и продаются по недорогой цене. Здесь искушенный читатель может воскликнуть: «Зачем мне нужен какой-то небольшой GIF-редактор, когда у меня уже установлена крутая анимационная программа, которая может экспортировать в любые форматы, в том числе и GIF!». Нет, с этим никто не спорит – конечно, ни один GIF редактор не сравнится своими возможностями создания графики с мощными анимационными программами. Но дело в том, что мощные программы экспорт в GIF поддерживают лишь «постольку поскольку», не располагая инструментами подробного управления выходным файлом. Поэтому уважающий себя (и других) аниматор всё-таки обязательно должен иметь в своем арсенале GIF-редактор.

Самый оптимальный способ изготовления GIF-анимашек выглядит так: вначале анимация создается в какой-нибудь серьезной анимационной программе (2D или 3D), а затем экспортируется в серию картинок (секвенцию), и дорабатывается в GIF-редакторе.

GIF-редакторы представлены в огромном ассортименте, и здорово различаются набором функций и инструментов. Какой из них лучше? Да все по-своему хороши! Одни из них имеют уклон на инструменты рисования, другие – на работу с импортированной графикой, третьи – на средства оптимизации, и так далее. Выбирая себе GIF-редактор, нужно исходить, прежде всего, из своих собственных нужд и предпочтений.

7. Перспективы на будущее

Для замены формата GIF был разработан более продвинутый формат PNG (Portable Network Graphics). Этот формат сейчас активно наступает на многих фронтах, и это неудивительно – ведь он превосходит GIF по многим параметрам: великолепное качество картинки, отсутствие ограничения в 256 цветов, полная поддержка альфа-канала, и т.д. Но в этом формате есть одно большое «но» - PNG абсолютно не поддерживает анимацию. И хотя впоследствии стали вестись разработки анимированных вариаций PNG (MNG и APNG), но, к сожалению, никто из крутых производителей софта не торопится эти форматы активно поддерживать и продвигать. Поэтому о широком распространении анимированных PNG пока говорить очень и очень рано.

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

Вобщем, несмотря на все недостатки формата GIF, в области веб-анимашек ему равных нет, и в ближайшее время не предвидится. Ведь кроме недостатков, этот формат имеет и явные достоинства: простота использования, поддержка браузерами, малый объем занимаемой памяти (при надлежащем подходе), и бесплатность. Так что, если хотите сделать себе уникальную анимированную аватарку, послать друзьям анимированную открытку электронным письмом, или вставлять анимашки в сообщения на форумах – придется любить и жаловать GIF еще долго!

8. Любопытные факты


• Создатели формата GIF произносили его название как «джиф», но произношение «гиф» тоже получило широкое распространение, и поэтому два влиятельных словаря – Oxford English Dictionary и American Heritage Dictionary, признали оба варианта произношения правильными.

• Было время (до появления формата JPG), когда GIF являлся самым популярным форматом хранения фотографий в Интернете.

• Изначально GIF был платным форматом – то есть, например, для того, чтобы сделать программу для работы с ним, нужно было покупать дорогую лицензию. Сейчас сроки действия всех патентов на GIF истекли, и формат является бесплатным для всех. Но именно платность гифа в свое время подстегнула развитие формата PNG, как бесплатной и лучшей альтернативы.

• Палитра формата PNG может содержать гораздо больше цветов, чем гифовские 256, но она тоже не безразмерна, и имеет своё ограничение – оно составляет 281 474 977 000 000 цветов.








Полезные ссылки:

Wikipedia о GIF (на русском): [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]

Подробнее о дитеринге и его алгоритмах (Wikipedia, English): [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]

Хорошая статья по оптимизации GIF (на русском): [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]





Благодарности


За помощь в подготовке статьи, хочу поблагодарить наших форумчан:

[Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации] и [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации] - за ценные советы и моральную поддержку.

Спасибо!

Stan aka Vodka вне форума   Ответить с цитированием
Эти 31 пользователя(ей) сказали cпасибо за это полезное сообщение:
Показать/Скрыть список поблагодаривших
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.



Текущее время: 01:06. Часовой пояс GMT +5.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.