Библиотека Интернет Индустрии I2R.ru

Сама идея многофреймовой анимации в GIF известна с тех пор, как появился этот самый GIF, вернее, его разновидность GIF89 (Чуете, уже прозевали юбилей, жалко, был хороший повод :o). Никаких особых хитростей и нововведений мною лично так же не придумано, просто отработана методика, позволяющая делать такие вещи очень быстро.

Особых проблем с созданием анимированных картинок никогда ни у кого не было. Основная проблема - это размер файла, который складывается из суммы размеров каждого фрейма плюс текстовое описание и некий такой же текстовый мусор. Программы типа Ulead Web Razor (прошу извинить за неточность, я ею не пользуюсь) имея массу встроенных эфектов для создания анимированных переходов, создают просто ряд последовательных картинок, из которых и складывается внушительный (не вебовский) размер общего файла, и никакие оптимизаторы палитр не помогают ужать его до нормального уровня в 15-30 Кб. Поэтому приходится искать другие пути реализации идеи.

Этапы создания симпатичного малоразмерного, но многофреймового GIFа.

1. Общий дизайн.
Разрабатывается общая композиция с учетом фона и анимационной части.

2. Создание этой самой анимационной части путем размещения фрагментов каждого кадра в отдельном слое.

3. Расписывается время и способ срабатывания каждого фрейма.

4. Окончательная оптимизация всего файла в формате GIF.

В качестве наглядного примера давайте создадим баннер для нового сайта студии Арт-Дизайн (и вам наглядно, и мне приятное с полезным...). Именно по этой технологии создан "Мудрый Око", глядящий на вас из левого верхнего угла почти каждой страницы этого сайта. Для работы нам сильно пригодятся Photoshop 5 или 5.5 и входящий в его состав Image Ready 2. Для пользователей шопов более ранних версий понадобится какой-нибудь Gif-Animator типа Microsoft или Ulead.

1. Общий дизайн.

Откуда берутся графические элементы для баннера, вы поймете, поглядев на сам сайт.

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

Если вы составите несколько сценариев, то на базе одного общего решения у вас получится несколько разных баннеров. К тому же вы сразу можете определить примерный размер будущего анимационного баннера. В данном случае при палитре в 32 цвета размер простого варианта составляет 4,8 кб, следовательно, размер итогового со всеми фреймами и текстовыми описаниями-наворотами составит 6-7 кб, что для такого баннера вполне нормально.

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

533 байта

622 байта

1,259 кб

2,467 кб

3,606 кб

4,555 кб

4,725 кб

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

Прежде всего шрифты. При размере менее 12 пунктов есть смысл отключить антиалисинг. Это вполне естественное действие, ибо даже винды показывают вам шрифты несглаженными, а при мелком размере "рубчатый" край сглаживается особенностями нашего зрения. Зато вы сможете лишиться еще нескольких ненужных байтов на каждом знаке. И то же самое вы можете проделать на символьных элементах (стрелках, линейках и т.п.) Шрифтовые фрагменты без антиалисинга я предпочитаю выполнять в MS Paint стандартной поставки Windows.

Для полного счастья не помешает и предварительная оптимизация цветной картинки, если таковая предполагает быть на вашем баннере. Заодно узнаете и степень оптимизации вашего баннера (минимально дозволенное количество цветов, не делающее из картинки нечто...).

jpg - 1,683 kb	gif - 4 color 686 b	gif - 8 color 964 b	gif - 16 color 1,266 kb	gif - 32 color 1,594 kb	gif - 64 color 2,064 kb

В данном случае для решения дальнейшей судьбы этой бабочки следует остановиться на 16 цветах или 32 цветах (это сильно зависит от насыщенности вашего баннера другими элементами, так же влияющими на общий "вес". В примере с моим баннером можно применить и все 64 цвета, так как общий размер баннера достаточно скромен. (Да я и не собирался вставлять в него бабочку, так, для примера :o)

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

При загрузке файла в Image Ready вы получаете практически тот же самый интерфейс, что и в Adobe Photoshop. Более того, все эти операции, что мы производили до того, вы можете выполнить сразу в Image Ready. В палитре слоев следует сразу растасовать слои в том порядке, в коем изображения из них будут появляться в нашем баннере. Палитра слоев Image Ready не имеет ограничения в 100 штук, как в Photoshop, поэтому количество фреймов может быть достаточно велико (ну больше 100 - это точно).

Верхнее окно
1. Кнопка переключения на оригинал (файл PSD или другой)
2. Кнопка переключения на оптимизированный вариант, в палитре оптимизации вы выбираете формат и степень сжатия (количество цветов)
3-4. Кнопки альтернативных вариантов оптимизации

Нижнее окно (управление параметрами анимации)
5. Установка длительности проигрывания фрейма.
6. Кнопки управления "проигрывателем" анимации.
7. Кнопка создания нового фрейма (она для нас будет важна).

Ну давайте сначала сделаем обычный анимационный малофреймовый баннер.

Загружаем слоеный PSD - файл-заготовку в Image Ready, включаем две нужные нам палитры (палитра слоев и палитра анимации), делаем все слои, за исключением первого, невидимыми (отключаем "глазик" в палитре слоев). Далее наши действия просто как очистить апельсин от шкурки.

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

После того, как вы заполнили все кадры (и расписали время игры), картинку нужно оптимизировать и сохранить как GIF. Для этого нажимаете кнопку 2 (optimized) и в палитре оптимизации выбираете нужное количество цветов (для нашего баннера это будет 16). В status строке окна нашего баннера вы можете видеть информацию о размере оригинала и размере оптимизированного файла (там же вы можете получить другую не менее интересную инфо). А потом нужно только сохранить файл как GIF и проверить его работу в броузерах. Если все сделано правильно, то результат должен быть примерно таким:

5,134 кб

Для мигания стрелки нужно просто каждый раз при создании нового слоя отключать и включать "глазик" слоя стрелки. Замечу, что эта процедура (отключение слоя в след. кадре) прибавляет !!! (а не убавляет, как можно подумать) вес файла. Дело в том, что предыдущая белая стрелочка просто закрывается стрелкой-пикселами под цвет ниже лежащего видимого слоя (в данном случае - простого красного фона). Если фон будет сложным (картинка или сложный орнамент), то и перекрытие (прибавление) будет столь же весомым. То есть мигание на простом фоне куда легче по весу мигания на фоне сложного изображения.

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

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

Продолжение статьи