Как редакторам и авторам просто создавать гифки и другую анимацию

Мне задают вопрос из зала: «Залип на твоём портфолио. Где учился пилить адовые гифки, какими инструментами пользуешься?» Вопрос об анимации задают не в первый раз, поэтому расскажу. Сразу предупреждаю, что инструменты неидеальные, всегда можно делать круче и быстрее. Но мне хватает для задач, и ладно.

Как делаю гифки

Раз. Волшебное кодовое слово «gif» на ютюбе

Понравился мне котейка в рекламе минералки. Ставлю в строке браузера слово gif, жму энтер и попадаю в сервис по созданию гиф-анимации — Gifs.

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

Главный минус — программа часто просит денег за всякие «премиум фичи», ну и добавляет свою вотермарку на ВАШ ПРОДУКТ!

Делаю гифку сервиса, которая делает гифки

Два. Расширение для гугла — MakeGIF Video Capture.

Захотелось мне вырвать на память танец парней в видео. Я жму иконку расширения в правом нижнем углу, выбираю «Начать гифку», настраиваю параметры и «Стартую». В нужный момент жму «Готово».

Минусов у расширения не заметил, кроме того, что оно ограничено браузером, потому что часто нужно анимировать что-то вне браузера.

После можно ускорить или замедлить гифку, инвертировать и добавить надпись. Готово

Три. Программа на компьютер — LICEcap.

Это простенькая программка на компьютер. Скачать можно бесплатно для винды и мака на официальном сайте.

Дополнение от 21 февраля Так уж вышло, что пока я писал другую статью, то открыл для себя программу по работе с гифками — GIF Brewery 3. На по всем параметрам выигрывает у LICEcap.

Дальше всё ограничено только вашей фантазией. Можно записывать рисовальные процессы, действия в программах, видео, работу с текстом и графику, собственное лицо и прочее прочее прочее. Расскажу о трёх фишках, которые я реализовывал с помощью LICEcap.

1. Кнопка на сайт, внутри которой набирается текст

Как работает кнопка, можно посмотреть на сайте «Любакс»

Чтобы провернуть такое, я создал ячейку таблицы в гугл документах. У ячейки убрал границы и залил тем же цветом, что и будущая кнопка на сайте. Выбрал размер записываемой области в LICEcap и записал, как набираю нужные слова.

Такое можно накодить, но не все умеют кодить

2. Сменяющиеся картинки

Тоже на сайте «Любакс»

Купил мечтающую швею на фотостоке. В Фотошопе вырезал комиксный баббл, будто швея мечтает. В презентациях гугла наделал слайдов, в каждый из которых добавил одежду. Слайды раскрасил и запустил слайд-шоу. Слайд-шоу записал с помощью LICEcap. В Редимаге вставил мечтающую швею, а позади вставил гифку.

Помните, дети: нужно делать, а не мечтать!

3. Сюжетные гифки

Тема обширная, поэтому написал отдельную статью: Как редакторам делать сюжетные гифки и зачем они нужны. Если кратко, то: придумайте сюжет → выберите отрывок из фильма → смонтируйте его → добавьте титры → сделайте гифку.

Выходит что-то подобное. Гифка для новостного сайта о блокчейне FFC Media. Элла Памфилова предложила провести ребрендинг слова «блокчейн».

Что делать, если нужно отредактировать гифку

Чтобы отредактировать гифку, я использую сервис Gifgifs. А точнее одну боковую панель.

Я всегда уменьшаю вес гифки без потери качества с помощью GIF optimizer и отрезаю лишние поля с помощью GIF crop. Остальное по вкусу.

Всё тоже самое можно делать на сайте Iloveimg или просто сжимать гифки на сайте Gifcompressor — разницы в результатах не замечал.

Иногда нужно конвертировать гифку в видео, например, чтобы добавить в инстаграм. Я конвертирую в MP4 на сайте Gif-2-mp4.

Что делать, если лень самому возиться с гифками

Есть два отличных варианта для лентяев ;)

  1. Giphy — использовал предательски мало, хотя гифок там миллионы и миллионы. Плюс на сайте есть свой редактор гифок, которым я успешно не пользовался.
  1. Giphy GIF Search — бот в Телеграме, который поможет подобрать гифку для любой ситуации.
Например, удобно общаться с супругой

Анимация в Редимаге, как инструмент для визуальных эффектов

В Школе редакторов я делал все страницы в Редимаге. Помимо того, что в этом конструкторе удобно верстать страницы, там ещё есть чудо-блок Animation. С помощью него можно крутить, увеличивать/уменьшать, двигать предметы, а также делать их прозрачными и наоборот. Я активно использовал его в своих работах.

Слева от Земли и справа от дома стоят белые прямоугольники. Благодаря им не видно, как батарейки движутся сквозь Землю и здание.
За час можно разобраться
Заставил Трампа истерить. Для этого использовал функцию анимации — Scale. Она увеличивает или уменьшает масштаб предмета. Уменьшил на 5 пикселей масштаб и приказал повторять это действие через каждую 0,1 секунду. А чтобы было плавнее, приказал шевелиться в одну сторону, а потом в обратную
Сшил платье. Здесь долго рассказывать, но тоже использовал и Scale и Move для каждого куска ткани.

Анимация в Фотошопе

Когда я делал курсовую для школы редакторов, захотелось сделать анимацию для главного экрана. С помощью инструментов Редимага ничего не вышло, а специальные программы для анимации осваивать не хотелось. На помощь пришёл Фотошоп. Я вообще не знал, что он умеет работать с анимацией, но он умеет.

  1. Первая строчка — отморозки. Всего отморозков пять и у каждого по 12 анимаций. Так много, чтобы они плавно появлялись и исчезали. Увеличивал и уменьшал параметр «Прозрачность».
  2. Вторая строка — подписи над отморозками. Пять разных надписей появляются резко и исчезают резко тоже с помощью параметра «Прозрачность».
  3. Третья строчка — облако газа из баллончика. Струя газа состоит из четырёх анимаций: нормальный размер + три растянутых через CMD+T состояния.
  4. Четвёртая строчка — дама. Она статична. Но это только на картинке. В жизни она активная и ходит на йогу.
Если нужно что-то анимировать, то вот этого русского видео на ютюбе хватит, чтобы научиться

Основные моменты из статьи

  1. Программ и сервисов для создания гифок в интернете море — выбирайте, что удобнее вам.
  2. Мой набор для создания гифок: LICEcap, Gifs, Расширение для гугла.
  3. Любую гифку обязательно нужно сжать и покропить: Gifgifs, Iloveimg, Gifcompressor.
  4. Любую гифку на любой вкус можно подобрать на Giphy.
  5. Giphy GIF Search — бот для поиска гифок с телеге.
  6. Иногда удобно баловаться анимацией в Редимаге или в Фотошопе.
  7. И НИКОГДА, ЗАКЛИНАЮ НИ-КОГ-ДА, НЕ ВСТАВЛЯЙТЕ ГИФКИ В СТАТЬЮ ПРОСТО ТАК!!! Этим грешит, например, блог Текстерры, в котором каждая вторая статья напичкана неинформативными мемами и гифками.

P. S. Я ещё вещаю о кино в телеге — подписывайся ;)

Кадр из фильма Пон Джун-Хо «Паразиты»
Поделиться
Отправить
Запинить
 822   4 мес  
3 комментария
Владимир Лебедь 4 мес

Спасибо, кто заглянул и дочитал до конца :)

Кристина Волошина 4 мес

Спасибо за классный материал :)

Владимир Лебедев 4 мес

Спасибо, Кристина, рад стараться :)

Дарья Барретт 4 мес

Круто, Вов!)

Владимир Лебедев 4 мес

Ееееееее, спасибо, Дарья!

Популярное