gif анимация

Создание gif анимации.

Очень много вопросов приходит, чья суть вертится вокруг да около технологии создания анимации в web. Собственно, никакой технологии тут и нет. Под качественной анимацией понимается тяжкая и дотошная работа web-мастера над картинкой, подобно тому, как художник вырисовывает каждое движение в мультфильме. Естественно, с помошью уже навороченных фильтров в наше время можно и из одной картинки сделать анимацию, путем "наворачивания" на нее стандартных фильтров в анимационной программе, но качественной анимацией мы это называть не будем. Анимация, на то она и анимация, чтобы прорисовывать каждое движение и склеивать все воедино. Вот собственно и вся суть и создание gif анимации.

То есть, если разложить все по пунктикам и разжевать: Сначала создается базовая картинка, возможно с мелкими элементами графики, которые впоследствии планируется "оживить". Картинка сохраняется. Далее, меняется один из ее элементов, причем желательно плавно и в небольшом радиусе. Опять сохраняется. И так получается некоторая последовательность картинок, которую впоследствии надо скрепить специальной програмой-аниматором. Обзор популярных программ-аниматоров тоже есть на Dvk Url Club. Ну теперь, как я понимаю вы потребуете примеров :)

Пример первый.

Довольно простенький пример, тем не менее довольно эффектный, согласитесь. Эффектность заключается просто в изменении прозрачности отдельных надписей. Базой служит картинка со 100% процентными непрозрачностями слоев. Далее, путем изменения прозрачности каждой надписи и сохранения промежуточных картинок получена совокупность картинок, которая была склеена воедино. Такой способ применяется довольно часто и имеет большой успех, несмотря на то, что анимации как таковой тут и нет, по большому счету :) Вес: 9,5 килобайта. Количество кадров: 12.

Второй примерчик.

Как видите, примеры я решил показывать на своих баннерных работах :) Итак. В этом типе баннера использована уже иная задумка. Создано статическое изображение, поверх которого наложено сердце. Сердце трансформируется, а промежуточные положения сохраняются в файлах. Таким образом, получается довольно незамысловатое прыгающее сердечко. В отличие от первого примера сдесь не применялся принцип изменения прозрачности, тут я руководствовался прямой трансформацией элемента картинки. Размер баннера: 9,5 килобайт. Количество кадров: 4

И третий пример.

Третий пример включает в себя и трансформацию и изменение прозрачности одновременно. Чем качественнее и внимательнее вы будете работать над элементами анимируемой картинки, тем эффектней она будет смотреться. Размер файла: 6 кб. Количество кадров: 12.

Вот собственно и все положения, которые надо знать при создании анимации. Я постарался ограничиться тремя примерами. На самом же деле ограничений тут нет никаких, в смысле на фантазию. Конечно же не стоит "взахлеб" фантазировать, чтобы потом ваше творение из ста кадров загружалось бедным посетителем полчаса. Тут уже вступает в силу отношение эффектность/размер. Важно не только создать нечто оригинальное и динамичное, но и уложиться в килобайтные лимиты. В общем оригинальных вам анимашек :)

Создаем gif анимацию. (на примере Ulead Gif Animator)

В этот раз я постараюсь избавить новичков, которые собираются освоить анимационные "премудрости", от многих вопросов, касающихся самого алгоритма создания анимации на примере программы Ulead Gif Animator. Проще говоря - "куда надо тыркнуть мышкой, чтобы склеить несколько файлов". Обзор этой программы, а так же некоторых других ищите в разделе [Web-мастеру / Оптимизация графики и HTML] на этом же сайте.

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


Обратите внимание на то, что каждый из шести кадров занимает в среднем по 1,2-1,4 кб. Тогда как итоговый "склееный" результат занял 2,8 кб.

Итак. Кадры готовы. Теперь - пора их склеивать.Открываем наш Ulead Gif Animator. Во время написания статьи мною использовалась версия 2.0. Время бежит - всё стареет и морально и физически, поэтому не стоит закрывать сразу же окно в отчаянии, что вы не научитесь анимировать, если ваша версия выше. Это - единый продукт и "фирменные" черты в большинстве случаев остаются. Тем самым разницу в версиях, не пользуясь дополнительными наворотами, можно и не почуствовать. Тыркаем мышкой по кнопке "Animation Wizard". В ответ программа предложит открыть желаемые кадры. Их можно добавлять как поодиночке, так и все сразу. Во втором случае достаточно просто отмечать нужные кадры мышкой, удерживая Ctrl.

После добавления всех кадров высветится их список и визуальное представление каждого выделенного кадра. Для каждого из них можно устанавливать "время длительности показа", измеряющегоя в сотых долях секунды. Как это делать - разобраться может каждый человек. Если и здесь возникают вопросы - лучше к компьютеру вообще не подходить :) Теперь в меню File выбираем одну из опций: "Optimization Wizard" или "Optimize with presets". В первом случае вам будет предложено урезать цветовую палитру до необходимого числа цветов, а во втором случае автоматика сделает все за вас (благодаря "зашитим" настройкам). Остается сохранить результат и оценивать его.

Как видите, сложного в этом ничего нет. Методика эта универсальна для многих программ - аниматоров, так как набор потребительских функций везде примерно равноценен. По этому случаю не стоит расстраиваться, если вы "заюзали" не продукт от Ulead. Разбирайтесь, творите, склеивайте и гордитесь :)