Одна гифка вместо тысячи слов. Знакомо? Gif-анимация может добавить огня email-рассылке и эмоции лонгриду на вашем сайте. Ещё гифки удобно держать на случай важных переговоров. За последние годы они стали универсальным способом выразить мнение в интернете или проиллюстрировать какой-то факт.
В этом тексте расскажем, как сделать гифку из видео, дадим ссылки на удобные сервисы и несколько советов, как эффективно пользоваться gif-анимацией.
Для начала: чтобы гифка быстро загружалась и не тормозила сайт
Гифки веселее, чем статичные картинки. Они оживляют текст и часто успешно заменяют собой видео. Гифкой может быть короткая инструкция в формате how it works или, например, демонстрация работы программы, рецепт и лайфхак.
Gif-анимация по большей части короче видео и там нет звука, а значит, она легче. Когда на страницах сайта нет тяжёлого медиа-контента, он быстрее загружается. В свою очередь, резвая загрузка web-страниц улучшает индексацию сайта в Google и Яндексе.
Что мы говорим медленным сайтам
Чтобы гифки не тормозили ваш сайт, соблюдайте несколько правил.
Гифка не должна весить больше 3 Mb. Идеально, когда не больше 1 Mb. Если ваша gif-анимация больше, есть несколько способов облегчить её.
- Разбейте длинную гифку на части. Лучше несколько коротких файлов, чем одна громоздкая анимация.
- Если вы конвертируете в гифку видео, можно сжать исходный файл MP4. Для этого есть множество бесплатных сайтов, например, этот или этот.
- Проследите, чтобы видео, которое станет гифкой, было коротким и ёмким. Чем исходное видео длиннее, тем тяжелее будет файл gif.
На сайте должна работать Lazy loading. «Ленивая загрузка» — это технология, которая оперативно подгружает картинки и текст в видимой части сайта. Весь остальной контент она подгружает позже, пока человек скроллит страницу. Lazy loading необходима вам, если на сайте много страниц с медиаконтентом: картинками, гифками или видео.
Как сделать гифку из видео через онлайн-сервисы
Сотни готовых гифок можно скачать на множестве сайтов. Если вам нужно сделать свою, для этого тоже достаточно сервисов. Механика на всех них примерно одинаковая, вы можете пользоваться любым. Приводим ниже несколько популярных инструментов, с помощью которых вы накреативите кучу отличных гифок для любых целей и поймёте, как сделать гифку из видео.
Canva
В этом популярном интернет-редакторе не только делают простые дизайны, там также есть функции для генерации gif-файлов. Для анимации можно пользоваться шаблонами из базы сайта или своими картинками и видеороликами, добавленными на сайт.
Чтобы оживить статичный макет, добавляем к нему эффекты из меню «Анимация». Если используете видео, просто загрузите его на сайт и перетащите в шаблон. Затем нажмите «Скачать» и выберите тип файла GIF.
Анимируем готовый шаблон в Canva
Плюсы:
- простой интерфейс;
- много возможностей для редактирования в бесплатной версии;
- можно добавлять файлы из любого источника;
- готовую гифку можно скачать или выгрузить в виде кода;
- на готовой гифке нет водяного знака.
Минусы:
- сжать файл и изменить его размер можно только в премиум-аккаунте.
Giphy
Огромная база и поисковая система по коллекции gif-файлов, которую каждый день пополняют пользователи. На сайте есть онлайн-редактор, где легко создать гифку. Как исходники можно использовать картинки, фото, видео, другие гифки и контент по ссылке, например, с YouTube.
Вначале загружаем исходные файлы, выбираем нужный интервал (если вы режете видео) и длительность. Гифку можно обработать — наложить фильтр, стикеры или рисунок и сделать надпись. Итоговый файл загружается в коллекцию сайта. Его можно сохранить на компьютер в формате gif через клик правой кнопкой и «Сохранить как рисунок». Либо встроить на свой сайт с помощью html-кода.
Создаём гифку из видео
Плюсы:
- простой интерфейс;
- сервис бесплатный;
- можно добавлять файлы из любого источника;
- готовую гифку можно скачать или выгрузить в виде кода;
- на готовой гифке нет водяного знака.
Минусы:
- нельзя изменить размер гифки (соотношение сторон);
- ограничение по длительности 15 секунд.
Gifpal
Бесплатный сайт для генерации и редактирования gif-анимации с минимумом настроек. Для изготовления гифки можно взять свои картинки или видео, записанное камерой ноутбука или смартфона.
Перед загрузкой исходных файлов нужно выбрать размер итогового файла (соотношение сторон). Затем закачать фото, настроить скорость смены кадров и их очерёдность. Готовый файл просто скачать на своё устройство.
Простая гифка из двух изображений
Плюсы:
- простой интерфейс;
- сервис бесплатный;
- готовую гифку просто скачать;
- можно выбрать размер гифки заранее.
Минусы:
- гифки можно делать исключительно из изображений или видео с камеры устройства;
- на готовой гифке есть водяной знак.
Gifovina
Сайт, который, как и предыдущий, помогает создавать гифки из изображений и фото. На сайте есть настройки для добавления на gif-анимацию фигур, надписей и создания простых видеоэффектов.
Чтобы сделать gif-файл, загружаем все фотографии с помощью кнопки «Добавить кадры». Затем настраиваем в правом меню размер гифки, длительность кадров и эффекты анимации. Готовую гифку скачиваем на компьютер.
Делаем анимацию из фотографий
Плюсы:
- простой интерфейс;
- сервис бесплатный;
- готовую гифку просто скачать;
- можно выбрать размер гифки заранее;
- на готовой гифке нет водяного знака.
Минусы:
- гифки можно делать исключительно из изображений;
- мало настроек для редактирования гифок.
Gifs.com
Онлайн-ресурс для работы с анимированными gif-файлами из видео с YouTube, Facebook, Vimeo и других видеохостингов. Его особенность в том, что на него даже не обязательно заходить для начала работы.
Сначала выбираем исходное видео, например, на YouTube. Затем вписываем в адрес страницы сайта «gif» перед «youtube», чтобы получилось так: «https://www.gifyoutube.com/», и нажимаем Enter. Нас автоматически перебрасывает на сайт Gifs.com, сразу на страницу для редактирования нашего видео.
В левом меню сайта много настроек: обрезать видео под нужный размер, наложить стикеры и анимированные эффекты, сделать надпись, поменять цветовую гамму, яркость или сделать размытие. При сохранении можно настроить видимость вашей гифки — для всех или приватная. Итоговую анимацию можно скачать в оригинальном или сжатом виде или встроить на свой сайт с помощью ссылки.
На Gifs.com также есть опции для редактирования видео из Instagram (социальная сеть запрещена в РФ) и Vine.
Обработка видео с YouTube на Gifs.com
Стоимость платной версии: от 1,99 $/мес.
Плюсы:
- простой интерфейс;
- есть бесплатная версия;
- можно добавлять файлы с YouTube и Vimeo;
- готовую гифку просто скачать;
- много возможностей для редактирования;
- гифку можно скачать в сжатом размере.
Минусы:
- на готовой гифке есть водяной знак;
- нельзя добавить видео с компьютера.
Как сделать гифку из картинок в Photoshop
Если у вас есть хотя бы базовые навыки работы в Adobe Photoshop, то вы можете достаточно быстро сделать gif-анимацию прямо там. Расскажем, как создать гифку в этой программе.
- Создаём новый файл с любым разрешением, цветовую модель выбираем RGB.
- Добавляем все картинки, которые станут основой для будущей гифки. У каждой картинки будет собственный слой.
- Удаляем фон и обрезаем холст под размер картинки.
Источник: YouTube-канал Atlantis
- Кликаем на «Шкалу времени» в меню «Окно». Появится панель внизу.
- Внизу появится «Создать анимацию кадра», нажимаем на эту кнопку. Выбираем время проигрывания для кадров, например, 0,5 сек.
Источник: YouTube-канал Atlantis
- Сохраняем гифку с помощью пункта меню «Сохранить для Web». Готово.
Плюсы:
- можно добавлять картинки и видео;
- много возможностей для редактирования;
- на готовой гифке нет водяного знака;
- можно выбрать любой размер файла.
Минусы:
- интерфейс Photoshop не такой простой как у web-сервисов для гифок;
- нужно иметь соответствующий софт.
Photoshop позволяет также делать гифки из видеороликов. Для этого нужно выполнить несколько шагов.
- Выбрать в меню «Файл» пункт «Импортировать кадры видео в слои».
- В появившемся окне выделяем нужный фрагмент видео. Ставим галочку «Сделать покадровую анимацию».
- Затем повторяем действия из алгоритма работы с картинками: включаем панель «Шкала времени» в «Окне», настраиваем длительность кадров, убираем ненужные кадры и сохраняем анимацию через «Сохранить для Web».
Если вы понимаете, что создавать анимацию вам интересно и хотите развиваться в этой области, возможно, стоит рассмотреть профессию моушн-дизайнера.
Где искать готовые гифки
Сотни пользователей ежедневно загружают в сеть свои гифки, найти нужную анимацию можно на любую тему. Главное, знать, где искать. Напоминаем, что поиск гифок в коллекциях будет эффективнее, если вбивать в поисковую строку темы на английском языке.
- Giphy — не только редактор, но и богатая база gif-анимации на любую тему.
- Reaction Gifs.com — есть поиск по темам, эмоциям и содержанию;
- ВКонтакте — множество гифок в архиве соцсети.
- 9GAG — хранилище не только мемов, но и гифок.
- Gfycat — ещё одна большая база гифок.
- Tenor — хранилище gif-анимации, есть также в виде приложения.
- Imgur — гифки и мемы на любой случай.
Также гифки можно искать в Google, прямо через поисковик. Для этого начните поиск по картинкам, нажмите «Инструменты», затем «Тип» и выберите «GIF».
Когда лучше использовать картинку, а не гифку
Иногда гифки мешают восприятию контента. Например, если вам нужно проиллюстрировать какой-то факт графиком или диаграммой, лучше использовать статичную картинку. Так пользователь сможет увеличить изображение и рассмотреть детали. Если у вашей статьи или рассылки серьёзный, деловой тон, тоже будьте аккуратны с использованием gif-анимации, она может быть неуместна.
В каких-то случаях не обойтись без видеоролика со звуком. Допустим, вы делаете для клиентов туториал по использованию вашей программы, гифкой тут не обойдёшься.
Для остальных случаев есть множество сайтов, где можно сделать свою гифку или скачать готовую. Пробуйте разные варианты, делитесь эмоциями и вовлекайте вашу аудиторию с помощью разнообразного контента.
