Как быстро изменить анимационную GIF картинку

Как изменить анимационную GIF картинку без «Photoshop»Приветствую Вас на dvpress.ru Из этой статьи, Вы узнаете, как можно быстро изменить анимационную GIF картинку, плюс добавить к ней разные эффекты. Что именно можно сделать с анимацией, т. е. с анимационной картинкой? Да все, что угодно! Картинку можно изменить до неузнаваемости 🙂

Решил я сегодня написать об анимации не просто так. С анимацией приходится работать не только мультипликаторам, или дизайнерам, но и блоггерам, и веб-мастерам.

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

Ведь редактировать можно не только поздравительные открытки с  цветочками, но иногда нужно отредактировать обычный GIF баннер.

Возьмем простой пример. Вы зарегистрировались в партнерской программе, зашли в промо материалы, нашли анимационный баннер для своего блога, но размер его великоват.

Есть два варианта, чтобы изменить его размер:

  1. Изменить размер баннера с помощью HTML
  2. Изменить его размер с помощью графического редактора, например, Фотошоп, или какой-то другой программы.

Можно конечно задать размеры в HTML width="460" height="80 и подогнать размер баннера, который Вам нужен, но так делать на сайте не рекомендуется.

Баннер большого размера может много весить, и нагружать страницу сайта, а от того, что Вы уменьшите его размер с помощью HTML, вес его меньше не станет.

Еще часто встречается, что анимация баннера так велика, что и не успеваешь прочесть, что на нем написано. Приходится ждать повтора.

Я Вам предлагаю воспользоваться онлайн редактором, который называется «Ezgif.com», где можно не только изменять размер анимационных картинок, но и оптимизировать их, т. е. уменьшать их вес.

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

Инструменты онлайн редактора «Ezgif.com»

Для быстрого редактирования GIF изображений, лучше воспользоваться онлайн редактором, чем Фотошоп. Ведь многие люди и понятия не имеют, как с Фотошоп работать, а здесь можно за считанные минуты отредактировать любое GIF изображение

Онлайн редактор выглядит так:

Редактора «Ezgif.com» для редактирования анимационных GIF картинок

Редактора «Ezgif.com» для редактирования анимационных GIF картинок

 

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

Возможности онлайн редактора:

  1. Обрезка изображения
  2. Изменение размера
  3. Оптимизация изображения
  4. Добавление эффектов
  5. Изменение скорости анимации
  6. Разборка анимации на кадры (фрагменты)
  7. Добавление текста
  8. Наложение другого изображения

Казалось бы, с виду простенький редактор, а какой мощный.

Давайте теперь рассмотрим все перечисленные инструменты отдельно.

Crop (Обрезка изображения): простой онлайн инструмент для обрезки анимационных картинок.

Загрузите картинку, а потом с помощью мыши выделите нужную часть изображения, которую хотите обрезать. Нажмите затем «Crop it» и все готово.

После того, как Вы загрузите изображение, под этой картинкой появляется информация о нем: размер в КБ, габариты картинки, и сколько кадров она содержит.

При обрезании картинки, можно задать размер вручную. Для этого под изображение нужно в поля «Left», «Top», «Width» и «Height» ввести нужные значения.

Resize (Изменение размера изображения): с помощью этого инструмента, можно изменить размер картинки или обрезать ее. После уменьшения, картинка остается такого же качества, и скорость анимации не изменяется.

В полях «New width» и «New height» нужно задать новый размер изображения, или можно просто указать процент (Percentage), а затем нажать «Resize it!». Картинка будет уменьшена на процент, который Вы указали

С помощью этого инструмента, Вы можете быстро и легко менять размер GIF изображений. При увеличении размера картинки, качество будет теряться.

Если картинка после изменения стала как-то плохо отображать анимацию, тогда можно попробовать задать другой размер

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

Оптимизация имеет множество методов, но можно подобрать оптимальный вариант, чтобы качество картинки оставалось хорошим. Подробнее об оптимизации читайте на сайте.

Effects (эффекты, изменение цвета изображения): с помощью этого инструмента, можно зеркально переворачивать изображение по горизонтали и вертикали.

Также изображение можно повернуть под определенным углом, если задать степень в поле «Rotate». Изображению можно назначить другой цвет, сделать его черно-белым, или придать какой-то другой оттенок.

Speed (изменение скорости GIF анимации): этот инструмент предназначен для изменения скорости анимации.

Если вы хотите изменить скорость анимации пропорционально текущей, тогда используйте процентное соотношение «% of curent speed», а чтобы задать задержку между кадрами, нужно использовать метод «hundrediths of second between frames». Параметр «hundrediths of second between frames» задает время задержки между кадрами в сотых секундах (1/100)

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

Все кадры анимационной картинки можно скачать на компьютер. Для этого надо кликнуть по кадру правой кнопкой мыши, а затем в контекстном меню выбрать «сохранить изображение как...». Также все кадры можно скачать одним zip-архивом кликнув по «Download frames as ZIP»

Write (добавить текст): этот инструмент позволяет добавлять текста к GIF анимации. Вы можете добавить текст ко всей GIF картинке, или к отдельным ее кадрам. Текст на картинке можно перемещать с помощью мыши.

Overlay (наложение другого изображения): этот инструмент позволяет на GIF изображение наложить другую картинку, и желательно, чтобы она была формата PNG или GIF.

Используя этот инструмент, можно к изображению добавлять декоративные рамки, какие-то элементы, а к баннеру можно добавить кнопку «купить», или «скачать». :).

Save (сохранение картинки на компьютер): чтобы сохранить отредактированное изображение на компьютер, нажмите кнопку «Save».

Кроме самого редактора, на сайте еще можно оптимизировать PNG картинки, а также видео преобразовывать в GIV анимацию.

Посмотрите видео, как быстро изменить анимационную GIF картинку.

 

3 Comments

  1. Елки-палки!!! Это как раз то что мне было нужно! Я не мог себе даже представить, что существует подобный сервис, так еще и бесплатный. Ох как вовремя ты написал этот обзор, так как я всеръез уже задумался обращаться к фрилансерам или к знакомым, которые разбираются в фотошопе.
    Спасибо огромное!

    • Рад, Игорь, что статья была написана вовремя! Давно хотел написать об изменении анимационных картинок, да забыл совсем. Недавно у себя в закладках нашел этот сервис.

  2. Замечательная статья и сайт! Огромное Вам спасибо! 🙂

    Людмила

Leave a Reply

Яндекс.Метрика