Основы самостоятельного создания GIF анимации
Помните, как в школе на скучных уроках рисовали в блокнотах разные рожицы? А затем, быстро перелистывая страницы, заставляли эти рожицы анимировать. Так и со скучными сайтами, под завязку набитыми нудной, но очень нужной информацией. Вот если бы туда тоже добавить пару кривляющихся рожиц! Это вполне осуществимо, если использовать gif анимацию:
Анимация на основе GIF
Формат GIF (Graphics Interchange Format) разрабатывался специально для внутрисетевого обмена растровыми изображениями. В недалеком прошлом он был основным форматом для изображений, размещаемых в веб-пространстве. Основные характеристики формата GIF:
- Способность сохранять изображения в 256 цветовой гамме;
- Малый вес изображения – это идеально подходило для первоначальной стадии развития всемирной паутины, когда скорость соединения с интернетом была намного ниже сегодняшних стандартов;
- Графические форматы в GIF хранятся построчно, поддерживая лишь определенную цветовую палитру (256 цветов);
- При этом один из 256 оттенков может быть помечен как прозрачный;
- Поддержка анимированных объектов.
Последний пункт списка и послужил новым толчком для роста популярности этого графического формата.
Создание gif анимации по сравнению с более современной технологией flash имеет несколько преимуществ. Главным из них является меньший вес графического объекта. Поэтому новой областью применения gif анимации стало создание рекламных объектов для интернета.
Гиф анимация позволяет создавать один графический объект, состоящий из нескольких обычных изображений (кадров), расположенных в определенном порядке. Анимация происходит за счет их смены с заданной очередностью и периодичностью. При этом чаще всего применяют цикличное повторение кадров анимации.
Благодаря нескольким изображениям полностью снимаются ограничения на использование лишь 256 оттенков цвета. Это связано с тем, что каждый из рисунков может содержать свою палитру. Уменьшение общего веса анимированного объекта достигается также за счет использования прозрачности, когда происходит лишь частичное изменение следующего кадра относительно предыдущего.
Немного практики
Но все это теория, а хотелось бы на практике рассмотреть, как происходит создание анимации в формате GIF. Мы предвидели это, и подготовили маленький мастер-класс по созданию анимированного баннера.
Для демонстрации воспользуемся специализированным графическим редактором Easy GIF Animator. Как показывает опыт, большинство подобных программ имеют схожий пользовательский интерфейс и функционал. Поэтому показанный ниже порядок действий не будет сильно отличаться от того как сделать gif анимацию в других подобных графических редакторах.
Поехали:
- На стартовой странице программы нам предлагается выбрать тип задачи, который нужно решить. Мы воспользуемся «услугами» встроенного мастера по созданию баннера. Для этого нажимаем на пункт «Создание анимированного баннера»:
- На следующем шаге задаем размеры будущего баннера. Можно воспользоваться стандартными значениями, но мы введем свои параметры длины и ширины объекта:
- Затем мы настроили фон баннера. В качестве стиля заполнения выбрали градиент, установили его тип и основные цвета:
- В следующем окне мастера мы вводим текст для отображения, устанавливаем его размеры, шрифт и цвет. Из выпадающего списка выбираем эффект анимации в момент появления текста и его исчезновения. А также устанавливаем время всего периода. Обратите внимание, что таким образом можно настроить эффекты для нескольких фраз (до трех). Они располагаются на отдельных вкладках («Текст 1», «Текст 2»):
- До того как создать gif анимацию, осталось лишь сохранить файл баннера в нужном нам месте. Что и предлагается сделать в следующем окне:
- После закрытия мастера и сохранения баннера перед нами открывается рабочий интерфейс приложения. Обратите внимание, что слева наша анимация представлена покадрово. И каждый из кадров можно отредактировать отдельно:
Ссылка для скачивания архива с «полновесным» оригиналом будет приведена в конце статьи. А вот статическое превью того, что у нас получилось:
Как сделать анимацию из видео
С основами процесса мы немного разобрались. Теперь постараемся научиться тому, как сделать gif анимацию из видео.
Суть данной процедуры заключается в том, что для начала нужно «вытащить» из видео отдельные картинки. То есть разложить его на кадры. Конечно, можно делать это вручную с помощью сохранения нужного кадра в медиа плеере (благо, многие из них это умеют).
Но лучше воспользоваться специальной программой для извлечения видеокадров Free Video to JPG Converter. Как можно судить из ее названия, она сохраняет кадры видео в изображения в формате JPG.
Интерфейс приложения прост для понимания. Поэтому мы не будем останавливаться на его подробном описании:
После обработки видео утилита сохранит кадры в указанном вами месте. Подгонку всех изображений для будущей анимации нужно будет осуществить вручную с помощью любого графического редактора. Лучше всего, если это будет Photoshop.
На следующем этапе мы снова переходим в Easy GIF Animator. С помощью инструмента «Вставить изображение» добавляем в качестве кадра снимок из видео. После этого нужно настроить задержку для каждого анимированного кадра. А затем сохранить полученную GIF анимацию в виде файла:
Облегчить весь этот процесс можно, если воспользоваться встроенным «Мастером анимации». Он доступен в программе через меню «Файл»:
Теперь продемонстрируем, что в итоге получилось у нас. Надеемся, ваше творение окажется не хуже, а даже лучше представленного ниже:
Отличительной особенностью программы Easy GIF Animator является ее направленность именно на сферу веб-разработки. Приложение позволяет не только создавать анимированные баннеры, но и генерировать для них простой hml код для вставки. Эта функция доступна через пункт основного меню «Инструменты»:
Надеемся, что после такого обширного экскурса вы познали всю мощь создания gif анимации.
Если нет, то попробуйте собственноручно сделать какой-нибудь прикольный баннер или маленькую анимированную кнопку и разместить у себя на сайте. Восторженные отзывы посетителей вам будут обеспечены!