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

 
Существует целое множество программ для создания анимированных картинок (это и Adobe Photoshop, и Beneton Movie GIF, и Maximys GIF Animator, и Free Video to GIF Converter), но после приобретения минимального опыта работы с ними хочется остановиться на Easy GIF Animator, благодаря его практически всеобъемлющему функционалу, лёгкости установки и простоте использования.
 
Несмотря на свою простоту Easy GIF Animator создаёт очень качественную анимацию при оптимальной степени сжатия. Работает с разными форматами видеофайлов. Есть возможность улучшения привлекательности за счёт добавления эффектов перехода между кадрами, анимированного текста. Можно добавлять различные изображения в кадр, а также управлять прозрачностью. Но, пожалуй, главной чертой является отличное преобразование видео в GIF, на уровне Photoshop.
 
Программа не бесплатная, но и не дорогая – в России стоимость её профессиональной версии составляет 200р. Есть пробный период, который исчисляется 20-ю запусками программы без запроса ключа. А может быть, этого времени и хватит, чтобы проделать всю нужную работу…
 

Начало работы

 
Итак, что же представляет собой Easy GIF Animator? После установки и запуска программы увидим следующее окно приветствия:
 
Приветственное окно
 
Чтобы создать новую анимацию, на вкладке File кликните Welcome и в открывшемся окне приветствия – команду Создать новую анимацию. Далее можно действовать тремя способами:
 
• Объединить набор статических изображений – для этого нажмите Insert Frame (Вставить изображение) на вкладке Frames, выберите и откройте необходимую картинку. Затем кадры можно изменить и настроить по-одному, используя встроенный редактор.

• Создавать каждый кадр с нуля. Для этого нужно использовать вкладки Frames и Selection и встроенный редактор изображений.

• Импортировать видеофайл. Чтобы создать анимацию из видеофайлов, выберите команду Create from Video (Импортировать из AVI) на вкладке Animation. Импортируется не только AVI, но и MPG, MOV, MP4.
Рассмотрим подробнее каждый из способов.
 

Создание анимации из набора изображений

 
Как создавать анимированные GIF изображения с помощью собственных картинок без использования мастера анимации?
 
Шаг 1 – Подготовка изображений
Подготовьте несколько файлов изображений, которые будете использовать для создания анимации. Лучше, чтобы все они имели одинаковый размер.
 
Шаг 2 – Создайте новую анимацию
На вкладке File выберите Создать новую анимацию. Если появится Мастер анимации, нажмите кнопку Отмена, чтобы его закрыть.
 
Шаг 3 – Добавьте свои картинки или фото
1. На вкладке Frames нажмите Insert Frame (Вставить изображение).
2. Выберите файлы изображений. Можно выбрать несколько файлов, удерживая клавишу CTRL.
3. Нажмите кнопку Open (Открыть).

Чтобы добавить необходимое количество изображений из разных папок, этот шаг можно повторять сколько угодно.
 
Шаг 4 – Настройка времени отображения кадров (продолжительности)
Свойства анимацииМожно указать, как долго будет отображаться каждый кадр. По умолчанию время отображения составляет 0.5 секунды. Можете изменить это значение для каждого кадра.
 
Для этого кликните на кадре, чтобы выбрать его. Затем на вкладке Свойства кадра внизу укажите необходимую задержку, выбирая её с шагом 1/100 секунды (например, 100 установит длительность отображения в одну секунду):
 
Шаг 5 – Предварительный просмотр анимации
Предварительный просмотр анимацииВ окне анимации перейдите на вкладку Просмотр. Откроется плеер GIF изображений.

Шаг 6 – Сохранение анимации
Чтобы сохранить изображение, на вкладке File выберите команду Save (Сохранить).

Для перемещения выбранного кадра(ов) можно использовать стрелки вверх и вниз на левой панели инструментов, а для удаления выбранного кадра на вкладке Frames нажмите кнопку Delete Frame (Удалить).
 

Создание анимации с нуля из своих собственных изображений

 
Зададимся, например, целью создать анимированное изображение в виде квадрата с чередующейся заливкой – красного и жёлтого цвета вроде этого:
 
Шаг 1 – Создайте новую анимацию
На вкладке File выберите Создать новую анимацию.
 
Шаг 2 — Добавьте новый пустой кадр
• На вкладке Frames выберите команду Insert Blank Frame (Вставить пустой кадр). Также можно использовать соответствующую кнопку на панели инструментов (когда наведётесь на кнопку – всплывёт соответствующая подсказка).
• Установите ширину и высоту кадра равными 500, цвет оставьте белым и нажмите кнопку ОК.

Нарисуйте красный квадратШаг 3 – Нарисуйте красный квадрат
• Измените цвет фона на красный – в окне анимации перейдите на вкладку Редактировать, кликните на правом нижнем квадрате выбора цвета, задайте красный цвет и нажмите ОК:

• Выберите инструмент Rectangle (Прямоугольник) и удерживая SHIFT проведите курсор по кадру, рисуя таким образом квадрат.
• Выберите способ заполнения Заливка с цветом, нажав соответствующую кнопку.
• Залейте квадрат красным цветом, выбрав инструмент Заполнение, а после кликнув в любом месте по квадрату правой кнопкой мыши. Если что-то не получается, всегда можно нажать кнопку со стрелкой Отменить или CTRL+Z.
 
Шаг 4 – Продублируйте кадр
На вкладке Frames нажмите кнопку Duplicate Frame (Дублировать кадр). Также можно использовать соответствующую кнопку на панели инструментов. Таким образом будет продублирован кадр, содержащий красный квадрат.
 
Сделайте второй квадрат жёлтымШаг 5 – Сделайте второй квадрат жёлтым
• Убедитесь, что в списке кадров выбран кадр #2.
• Установите зелёный основной цвет – кликните на левый верхний квадрат выбора цвета и выберите жёлтый цвет:

• Залейте квадрат жёлтым цветом – нажмите на кнопке инструмента Заполнение и кликните затем непосредственно внутри красного квадрата левой кнопкой мыши.
 
Шаг 6 – Просмотр результатов
Ваша анимация готова. Нажмите на вкладке Просмотр, чтобы просмотреть, как она выглядит. Для сохранения анимации на вкладке File выберите команду Save (Сохранить).
 

Создание анимации из видеофайла

 
Чтобы импортировать видео, из которого хотим сделать GIF анимацию, нужно на вкладке Animation нажать кнопку Create from Video (Импортировать из AVI). В диалоговом окне выберите нужный файл подходящего формата и нажмите Открыть. Появится диалоговое окно:
 
Создание анимации из видеофайлаВ этом окне слайдер сверху белой полоски определяет конец фрагмента, а нижний – начало. На случай, если вы захотите использовать не всё видео из файла, а только его часть. Выбранный фрагмент будет подсвечен синим цветом. Также в окне нужно указать степень «прореживания» видео, т.е. снижения частоты кадров. Если установить значение, например, 4 – будет выбран каждый 4-й кадр из видеофайла. После этого кликаем ОК и анимация готова.
 
Если размер кадра не устраивает вас по какой-либо причине, его можно обрезать, нажав кнопку Crop Edges на вкладке Animation. Отметим, что в соответствии с обозначенной областью будут обрезаны все кадры.
 

Редактирование анимации

 

Установка счётчика повторов
Откройте вкладку Свойства анимации. Если установлен переключатель Повторять бесконечно, анимация будет продолжаться беспрерывно. Если этого не нужно, установите переключатель Повторить и укажите необходимое количество циклов.
 
Установка цвета фона
Если когда вы хотите использовать прозрачность в анимации, то для того чтобы ваша прозрачная анимация хорошо смотрелась на определённом фоне, используйте свойство цвета фона. Лучше сначала выбрать цвет фона, а потом начинать рисовать анимацию. Например, если вы создаёте анимацию, которая будет опубликована на веб-сайте с чёрным фоном, то естественно будет более приемлемо установить цвет фона чёрным.
 
1. Откройте вкладку Свойства анимации.
2. Кликните на поле выбора цвета фона.
3. Появится диалоговое окно Color Palette. Выберите цвет, который нужно сделать цветом фона.

Можно изменять свойства анимации для одного кадра, можно для группы кадров.
 
Выбор кадров
Кадр можно выбрать одним кликом мыши. Чтобы выбрать несколько кадров:
1. Выберите первый кадр кликом мыши.
2. При нажатии на дополнительные кадры, удерживайте клавишу CTRL.
3. Для отмены выбора конкретного кадра кликните ещё раз, удерживая клавишу CTRL.

Можно выбрать все кадры, нажав CTRL+A. Однако нужно помнить, что редактор изображений позволяет редактировать только один кадр за один раз.
 
Добавление и удаление кадров
Чтобы вставить новые кадры изображения:
1. На вкладке Frames нажмите Insert Frame (Вставить изображение). Также можно использовать соответствующую кнопку на панели инструментов.
2. Выберите файлы изображений. Можно выбрать несколько файлов сразу
3. Нажмите кнопку Открыть.
 
Чтобы вставить пустой кадр, на вкладке Frames нажмите Insert Blank Frame (Вставить пустой кадр). Также можно использовать соответствующую кнопку на панели инструментов.
 
Для удаления кадров анимации:
1. Выберите кадр(ы), которые вы хотите удалить.
2. На вкладке Frames нажмите Delete Frame (Удалить).
 
Изменение порядка кадров
Чтобы изменить порядок кадров:
1. Выберите кадр(ы) для перемещения.
2. На вкладке Frames нажмите Move Up (Переместить вверх) или Move Down (Переместить вниз).

Можно использовать кнопки со стрелками вверх или вниз на панели инструментов слева.
 
Установка задержки кадра (продолжительность)
Чтобы установить скорость смены кадров:
1. Выберите кадр(ы) анимации, задержку (продолжительность) которого нужно изменить.
2. Откройте вкладку Свойства кадра.
3. Введите задержку (длительность) в поле Задержка. Время должно быть указано в 1/100 секунды с шагом (50 = 0.5 сек, 100 = 1 сек и так далее).
 
Установка прозрачности
Для установки прозрачных областей:
1. Выберите кадр(ы) анимации, для которого нужен прозрачный фон.
2. На вкладке Свойства кадра кликните на кнопке Установить прозрачность.
3. Кликните по цвету, который вы хотите заменить прозрачным фоном в выбранном кадре (кадрах).
 
Прозрачность также можно образовать с помощью инструментов ластик и цветозаменитель в редакторе изображений.
 
Теперь остановимся на редактировании кадров. Эту возможность обеспечивает встроенный графический редактор, который позволяет рисовать и редактировать изображения в кадрах.
Для редактирования существующего кадра выберите кадр и используйте инструменты для редактирования изображений, чтобы изменить его. Чтобы нарисовать новый кадр, на вкладке Frames выберите команду Insert Blank Frame (Вставить пустой кадр) и используйте инструменты рисования.
 
Выбор толщины линии
Чтобы выбрать толщину линии:
1. Выберите любой инструмент редактора изображений, который использует толщину линии.
2. Выберите толщину линии в поле выбора.
 
Выбор способа заполнения
Способ (или стиль) заполнения определяет, будет ли залита и как нарисованная замкнутая фигура.

Чтобы выбрать стиль заполнения:
1. Выберите любой инструмент редактора изображений, который использует стиль заполнения.
2. Нажмите на одну из кнопок выбора стиля заполнения:
◦ Без заливки – фигура не заполняется.
◦ Заливка с цветом – фигура заполняется цветом фона.
◦ Сплошная заливка – фигура заполняется основным цветом.
 
Выбор сглаживания линии
Для некоторых инструментов доступны установки сглаживания. Этот параметр определяет, как гладко будут выглядеть линии. Плавные линии смотрятся лучше, но увеличивают размер файла.
 
Чтобы включить / выключить гладкость линии:
1. Выберите любой инструмент редактора изображений для рисования (например, линия, прямоугольник, кисть и т.д.)
2. Чтобы включить гладкость, установите флажок Сглаживать.
3. Чтобы отключить гладкость, снимите флажок Сглаживать.
 
Предпросмотр анимации
Чтобы просмотреть результат, перейдите на вкладку Просмотр. Можно просмотреть анимацию GIF непосредственно в веб-браузере, чтобы увидеть, как это выглядит на веб-странице с заданным цветом фона.
 
Предпросмотр анимацииДля предварительного просмотра анимации в веб-браузере:
1. На вкладке Home нажмите кнопку Preview in Browser (Просмотр в браузере).
2. В диалоговом окне Просмотр в браузере выберите цвет фона веб-страницы.
3. Нажмите кнопку ОК.

Диалоговое окно просмотра в веб-браузере выглядит следующим образом:
 

Использование дополнительных инструментов

 
Оптимизация анимации
Easy GIF Animator автоматически оптимизирует файлы изображений, поэтому вам не придётся предпринимать каких-либо дополнительных усилий, чтобы уменьшить размер файлов, при этом можно управлять процессом оптимизации вручную. Для этого:
1. На вкладке File выберите команду Save Optimized (Оптимизировать).
2. В диалоговом окне настройте параметры оптимизации и по завершении нажмите ОК.
 
Создание эффектов изображения
Для создания эффекта перехода между двумя кадрами:
1. Выберите начальный кадр.
2. На вкладке Home нажмите кнопку Transition Effect (Создать эффект изображения).
3. В диалоговом окне Создать эффект перехода выберите тип эффекта и задайте настройки.
4. Нажмите кнопку ОК.
 
Создание анимированного текста
Чтобы создать эффект движущегося текста:
1. Выберите кадр, в который вы хотите добавить текст.
2. На вкладке Home нажмите кнопку Animated Text (Создать анимированный текст).
3. В открывшемся диалоговом окне Создать анимированный текст выберите тип эффекта и задайте настройки.
4. Нажмите кнопку ОК.
 
Добавление фонового звука
Чтобы вместе с анимацией использовать звук, например, для создания звуковой открытки, её нужно сохранить в формате SWF Flash, потому что формат изображения GIF не поддерживает аудио. Созданный файл анимации со звуком – это не файл изображения, это Flash файл. Для его создания:
1. На вкладке File выберите команду Export & Send > Export to Flash (Экспорт во Flash).
2. Следуйте инструкциям на экране, когда будет предложено добавить звук.
3. В конце работы мастера будет создан файл анимации и HTML код.
4. Сгенерированный файл анимации и HTML код можно использовать для публикации в Интернете.
 

Ограничения формата GIF

 
Каждая GIF картинка имеет внутреннюю цветовую палитру. Эта цветовая палитра может содержать до 256 цветов. В GIF анимации можно иметь одну палитру для всей анимации или отдельные палитры для каждого кадра. Каждый палитра увеличивает размер файла анимации.
 
По умолчанию цветовые палитры из отдельных кадров объединяются в одной палитре. Этот метод позволяет значительно уменьшить размер файла анимации, и в большинстве случаев это также обеспечивает хорошее качество изображения. Иногда, однако, когда каждый кадр в анимации содержит очень разные цвета, лучше не соединять отдельные палитры кадров в одну. В противном случае могут наблюдаться значительные искажения цветов. Если это произошло, то попробуйте установить флажок Не объединять палитры на вкладке Свойства анимации.
 
Обратите внимание, что даже после реализации вышеизложенного способа, ваши GIF изображения могут по-прежнему выглядеть немного зернистыми. Это связано с ограничениями формата изображения, который может вместить только 256 цветов в кадре изображения. Это не имеет ничего общего с возможностями программы Easy GIF Animator.
Приятного творчества!

Автор: Алексей Касьянов