Как сделать крутую гифку
Руководство по гифкам: где искать, как создавать и как использовать в соцсетях
Время чтения: 6 минут Нет времени читать? Нет времени?
Мир сходит с ума по гифкам. Они повсюду. Мало того, что гифками забиты соцсети, так ими уже иллюстрируют научные статьи и серьезную аналитику. Мы не можем остановить это безумие, так что давайте его возглавим.
Как использовать гифки
Гифки годны не только на то, чтобы пожирать ваше время. Есть у них и более разумное применение.
А еще они закольцованы, и это бывает забавно.
Кстати, для записи видео с экрана я использовала бесплатную программу iSpring Free Cam. А видео превратила в гифку при помощи сервиса Ezgif.com. Все это заняло чуть больше пяти минут.
Как самому создать гифку
Об этом на «Текстерре» уже есть подробная статья: «Как создать гифку: 7 простых способов» и мне нечего к ней добавить.
Где искать готовые гифки
Дурной тон
Гифки и соцсети
«ВКонтакте»
Как загрузить. Чтобы прикрепить гифку к посту, загрузите ее как документ, а не как картинку или видео, иначе она не будет воспроизводиться.
Как скачать. Об этом было написано выше, но повторюсь, если вы не заметили. Нажмите на гифку правой кнопкой мыши – Открыть ссылку в новой вкладке – Сохранить картинку как.
Как загрузить. Эта соцсеть упорно сопротивляется нашествию гифок. Загрузить их туда можно только по ссылке (и то не со всех ресурсов). Если у вас нет ссылки на любимую гифку, то загрузите ее сначала на сервис GIPHY, как показано ниже.
Как скачать. Только в формате MP4. В браузере Google Chrome нажмите на гифку правой кнопкой мыши – Просмотреть код. Скопируйте ссылку и из нее уже сохраните видео.
Преобразовать MP4 в GIF может условно-бесплатный сервис Convertio:
Как загрузить. К сожалению, «Инстаграм» гифки не поддерживает совсем. Их туда можно загрузить, только предварительно переведя в формат MP4. Сделать это может тот же сервис GIPHY. Действуйте так же, как при загрузке в «Фейсбук», но в конце нажмите значок Instagram и введите свой e-mail, куда придет готовый файл.
Как загрузить. «Твиттер» зато вообще не чинит препятствий. Гифки туда загружаются просто как фотографии.
Как скачать. Тем же методом, что и с «Фейсбука».
«Одноклассники»
Как загрузить. Просто как фото.
Как скачать. Тем же методом, что и с «Фейсбука».
Напоследок. Немного об авторском праве
Перед обычными картинками у гифок есть еще одно преимущество – они бесплатные. С другой стороны, закон совершенно однозначно запрещает публичное воспроизведение видео целиком или его части без согласия автора.
И хотя в научных целях можно цитировать любые произведения, вам вряд ли удастся доказать, что вы запостили во «ВКонтакте» гифку с Джоном Траволтой исключительно во благо науки.
С третьей стороны, мне не удалось найти случаев, когда кто-нибудь на полном серьезе судился бы из-за авторских прав на гифку.
Мораль: решение, использовать чужие гифки или нет, как обычно остается на вашей совести.
Как сделать гифку из фото или видео самостоятельно
Создание гифок — модный тренд современности. На просторах интернета всё сложнее найти сайт, на котором не встречалось бы анимированных изображений. Такая популярность гифок понятна: с их помощью можно легко оживить любой текст.
Спрос рождает предложение, а потому сегодня для создания gif- анимации не нужно быть специалистом. Существует немало специальных сервисов, которые позволят эффективно использовать гифки даже новичкам.
Для тех, кто, возможно, не в курсе, напомним, что gif – формат сохранения изображений, который придаёт им эффект движения, за счет частой смены картинок. Можно получить gif из фото или видео.
Зачем гифки коммерческим сайтам, соцсетям
Необходимость создать gif анимацию возникает с различными целями:
Как сделать гифку
Разберём вопрос как сделать gif анимацию более подробно. Для этого нужно сделать всего два основных шага:
О нюансах различных вариантов создания гифок подробнее поговорим ниже.
Из видео с YouTube
Самый простой способ (для него даже не нужно ничего скачивать):
Эффективный маркетинг с Calltouch
Из загруженного видео
Если видео уже сохранено на вашем компьютере, ответ на вопрос «как сделать гифку» отличается большим разнообразием. Например, для этой цели можно использовать Adobe Photoshop.
Алгоритм создания гифки в Фотошопе будет выглядеть следующим образом:
Из записи экрана
Как сделать гифку, не скачивая файл, а просто преобразовать её в режиме просмотра? И это тоже возможно.
Например, для решения данной задачи можно воспользоваться сервисом Licecap. Программу необходимо установить на свой компьютер абсолютно бесплатно и сразу получить доступ к полному
Таким способом можно работать не только с браузерами, но также текстовыми и графическими редакторами.
Из картинок, фото
Если вы хотите привлечь к иллюстрациям в тексте максимум внимания, стоит знать, как сделать гифку из фотографии. Таким образом можно добавить к ней надписи и другие эффекты.
Для создания гифки можно использовать, например, сервис Gifovina. Достаточно выбрать нужные эффекты для наложения на фото и сохранить получившуюся гифку на свой компьютер.
Лучшие сервисы для создания гифок
Бродя по сети с вопросом «как сделать gif» можно найти гораздо больше программ для создания гифок, чем упомянуто в этой статье. Даже просто перечислить их все не получится — количество слишком велико. Приведём ещё несколько проверенных программ, которые помогут вам в нужном деле создания гифок.
Canva
Этот онлайн-инструмент отлично подходит для работы с фото. В нём есть собственная большая коллекция забавных надписей, эффектов и прочих нужностей. Для тех, кто хочет гифку максимально быстро и без ущерба для качества, подойдут готовые шаблоны. Здесь уже всё продумано — просто измените фото и текст надписи. Всего в несколько действий идеальная гифка готова.
Из минусов можно отметить, что значительная часть эффектов доступна только в платной версии Pro. Если планируете заниматься гифками регулярно, а функционал сервиса подходит под задачи, стоит подумать о её приобретении.
Giphy GIF Maker
Внешний вид сервиса
Этот сервис отлично работает с видео с YouTube. Его даже не нужно сохранять — достаточно вставить ссылку в соответствующую строку в программе. Обрезать ролик, выбрав нужный отрезок можно прямо в программе, а результат работы увидеть тут же на небольшом экране.
Поле для вставки ссылки
К получившейся гифке можно добавить надписи, стикеры или фильтры и другие эффекты из галереи программы. Гифку необходимо сохранить на свой компьютер или вставить на сайт с помощью HTML- кода.
Convertio
Это интересный и довольно необычный способ получения желаемой гифки. Достаточно просто конвертировать видео в gif с помощью данного онлайн-конвертера. Чтобы процесс был ещё проще, можно установить расширение для Chrome. Получившуюся в процессе преобразования гифку останется только сохранить в нужную папку на компьютере.
Опции расширения Convertio
Варианты конвертации видео в Convertio
Простота программы несёт в себе и ряд недостатков. Добавить эффекты и надписи к гифке, а также отредактировать уже готовый файл не получится. Однако если нужно получить простую гифку быстро, это приложение незаменимо.
Конвертация видео в gif онлайн в Convertio
Заключение
Задачу создания gif-анимации можно решать разнообразными способами. В любом случае гифки не требуют каких-то специальных знаний и навыков, достаточно просто выбрать подходящий сервис.
Специальные программы позволяют добавлять анимированные эффекты к фото, преобразовывать в гифки видео или создавать с помощью этого формата простые, но эффектные презентации. Таким образом, украсить свой контент эффектной гифкой «в тему» сегодня может каждый.
Как сделать гифку из фото и видео: обзор 11+ бесплатных онлайн-инструментов
Сложно представить интернет без такого формата как GIF-анимация — в народе просто гифка. Анимированные картинки нужны не только для развлечения, привлечения внимания к посту или более длительного удержания на странице — гифками также удобно иллюстрировать инструкции и руководства.
Давайте разберемся, как можно сделать GIF быстро, бесплатно, онлайн — без дорогостоящего/сложного программного обеспечения вроде Adobe Photoshop, Movavi, After Effects или Camtasia Studio.
Создание гифок — лишь малая часть работы с контентом. Чтобы максимально прокачаться в интернет-маркетинге — SEO, PPC, CPA, создании сайтов — приходите учиться в Cybermarketing.
Ресурсы для работы с видео
Gifs — специализированный инструмент для создания гифок из видео. Чтобы начать работу, просто вставьте URL страницы с нужным роликом YouTube, Vimeo, Vine, Instagram или Facebook.
Ограничения: продолжительность максимум 15 секунд, размер до 150 МБ. Кстати, сохранить можно не только в GIF, но и в WebM, MP4.
Процесс работы с Gifs на примере YouTube-ролика
Giphy Gif Maker
Gif Maker от Giphy — крупнейшего ресурса с анимированными картинками — поможет сделать вам гифку «легко, быстро и весело». Умеет работать и с фото, и с видео, в том числе загруженными на YouTube и Vimeo.
Дизайн удобный, а процесс простой:
Вот с чего начинается создание гифки в Giphy
Сервис полностью бесплатный, платных тарифов нет.
Supa — сервис создания коротких видео для соцсетей. Платная версия поддерживает прямой экспорт в GIF.
Бесплатная версия сохраняет только видео в MP4 и только с ватермаркой. Чтобы снять ограничения, нужна подписка от 590 рублей в месяц.
Ezgif
Ezgif — онлайн-инструмент не с таким красивым дизайном, как предыдущие, но с достаточным функционалом. Что здесь можно:
Так выглядит Ezgif — конвертер видео в GIF-анимацию
Инструмент полностью бесплатный (видимо, проект нормально зарабатывает на рекламе).
Решения, чтобы создать GIF из фото
Canva
Canva — мощный графический онлайн-редактор, где легко делать дизайн даже непрофессионалам. Можете работать с ним как в браузере, так и в мобильном приложении.
Сразу после регистрации получаете доступ к огромной библиотеке готовых фотографий, иллюстраций, векторных изображений, шрифтов, фигур и значков, а также — шаблонам для GIF-анимации. Вы можете, например:
А это пример обучающей гифки
Gifovina
Gifovina — онлайн-инструмент для создания GIF (слайд-шоу) из картинок. Можно добавить фото с компьютера или веб-камеры, загрузить из интернета по ссылке.
Редактор — простой: только геометрические фигуры, плюс настройка размера шрифта, цветов линий, текста, заливки. Справа от редактора — блок, где можно указать размер, режим подгонки, длительность кадров и эффектов (если нужны).
Создаем простейшую гифку в Gifovina
Сервис бесплатный, никаких платных опций.
Imgflip
Imgflip — достаточно простой онлайн-сервис, который умеет делать GIF и из фото, и из видео.
Вы можете загрузить картинки с компьютера или из интернета, затем:
Так работает Imgflip
Gifmaker.me
Gifmaker — простой инструмент для создания анимированных картинок и слайд-шоу. Здесь нет редактора: можно только загрузить фото, настроить размер и скорость анимации. Кстати, таким же образом получится объединить две гифки.
Процесс работы с Gifmaker
Инструмент полностью бесплатен.
Вспомогательные инструменты для гифмейкеров
Convertio
Convertio — многофункциональный конвертер файлов, который в том числе может преобразовать видео в GIF. В отличие от специализированных решений, конвертация — единственная функция. Нельзя:
Регистрация не требуется. Просто выберите файл — например, MP4 — и укажите формат, который нужен — в нашем случае GIF. Для удобства работы в Chrome можете установить расширение.
Начало работы с Convertio
Brush Ninja
Brush Ninja — онлайн-сервис по созданию GIF для тех, кто хочет и умеет рисовать вручную.
Редактор удобный и красивый. Из инструментов — карандаш, геометрические фигуры, кисти, текст. Также вы можете перемещать, переворачивать, увеличивать и уменьшать нарисованные объекты.
В качестве фона можно добавить некоторые фото из галереи, но загружать произвольные картинки нельзя. Автор обещает добавить такую функцию в следующей версии.
Инструмент бесплатный, но вы можете поддержать разработчика на Patreon (возможно, так быстрее появится такая нужная функция, как загрузка любых фото).
I Love IMG
I Love IMG — удобное решение для сжатия гифок. Можно загрузить файлы с компьютера, Dropbox или Google Drive. Поддерживает загрузку нескольких файлов, не требует регистрации и знания настроек. Инструмент уменьшает размер автоматически.
ILoveIMG — минимум действий до результата
Все работает бесплатно, если загружать файлы до 130 МБ. Нужно больше, до 200 — зарегистрируйтесь. Хотите работать с файлами до 1 ГБ — покупайте подписку за 350 рублей в месяц.
Если для сжатия гифки нужны более серьезные настройки, попробуйте ResizeImage.
P. S. Программы для записи GIF-анимации с экрана
Licecap
Licecap — программа с открытым исходным кодом для записи видео с экрана прямо в GIF (и еще в собственный формат LCF). Поддерживает Mac OS и Windows.
Так выглядит окно Licecap
Gifcam
Gifcam — достаточно функциональное ПО для создания гифок с экрана. Стандартные возможности: регулирование окна захвата, настройка FPS, скрытие курсора. Особенности:
Так работает задержка Gifcam, которая дает меньше веса выходному файлу
Программа полностью бесплатная, однако авторы всегда будут рады донатам.
Recordit
Recordit — ПО под Mac/Win для быстрой записи скринкастов в GIF-формате. В отличие от Licecap, нет даже минимальных настроек — можно только выбрать, показывать курсор или нет.
Задаете размер окна захвата, нажимаете на Record, а потом на Stop. Запись загрузится в облако, потом GIF-файл можно открыть и сохранить на компьютер.
Процесс выбора окна захвата
Этот инструмент тоже бесплатный.
Впрочем, можно использовать другие инструменты, например, хром-расширения Loom и Awesome Screenshot. Но так как они сохраняют только видеоформат (MP4, WebM), просто придется работать в связке с каким-нибудь конвертером файлов.
P. P. S. Мобильные приложения, чтобы делать гифки
ImgPlay
ImgPlay — приложение для создания гиф-анимации из видео или нескольких фото, также оно может редактировать готовые GIF. Есть и для iOS, и для Android.
Бесплатная версия сохраняет GIF только с водяным знаком. PRO за 129 рублей уберет ватермарку и рекламу, а также откроет доступ к дополнительным фильтрам.
Gif Камера
Gif Камера — Android-приложение, чтобы делать гифки с камеры. Функции:
В процессе редактирования отснятой гифки
Как сделать крутую GIF-анимацию: 7 советов
Гифки — не просто источник веселья. Они играют серьёзную роль в маркетинге и образовании. Мы в InVision использовали гифки вместо анимаций, сделанных средствами кода даже на нашей главной странице.
Это привело к тому, что нас начали спрашивать: «Как вы делаете эти гифки?», и мы решили, что пришло время раскрыть карты.
Разработка гифок
Секретный соус
Открою тайну: все мои гиф-анимации были сделаны из видео файлов. Обычно я делаю их в программе для редактирования видео на Mac OS X ScreenFlow, в корой я работаю и с нашими продуктовыми видео. Она достаточно проста, чтобы быстро освоиться, но содержит довольно полезные инструменты анимации. После того, как я экспортирую анимацию в формате видео файла, я импортирую его в Photoshop через Файл > импортировать > кадры видео в виде слоев (File > Import > Video Frames As Layers).
Рекомендация: Если ScreenFlow или After Effects вам недоступны, вы можете создать анимацию в Keynote и экспортировать её в формате видео.
Меньше цветов, больше дела
Хотите получить классные гифки? Будьте весьма разборчивы в вопросе выбора количества цветов. Цвет имеет огромное значение для размера вашего финального файла. Использование меньшего количества цветов позволит вам делать более длинные и вовлекающие GIF-анимации при относительно небольшом размере файла (для меня небольшой означает меньше, чем 1 Мб).
По возможности применяйте размытие движения (motion blur)
При помощи ScreenFlow и After Effects можно экспортировать видео с эффектом motion blur. Он не только придаст вашей GIF более профессиональный вид, но и упростит вам процесс уменьшения размера файла в Photoshop.
Будьте (немного) ленивы
Только подумайте, сколько других самых разных деталей я мог добавить в свою гифку в начале этого поста. Подсказки с именами, клик курсором на плюсе, hover-эффекты и многое другое. Но всё это не является необходимым для понимания увиденного. Показывайте только то, что нужно — вы ограничены во времени и размере файла.
Экспортирование GIF
Вместо того, чтобы сразу хвататься за последующие рекомендации, сначала попробуйте экспортировать вашу гифку. Если она разумного размера — поздравляю, отличная работа! Вы всё делаете верно! Если нет — попробуйте следующие действия.
Удалите дублирующиеся кадры
Скорее всего, ваша гифка содержит моменты, когда она замирает и не двигается. Если приглядеться, можно увидеть, что эти моменты содержат повторяющиеся кадры длительностью 0.3 секунды. Если таких кадров 10 — удалите 9 из них и увеличьте время оставшегося кадра — например, до 1 секунды.
Если ситуация не улучшилась, импортируйте ваше видео заново, в этот раз выбрав опцию Limit To Every 2 Frames. Это должно помочь существенно сократить размер файла.
Рекомендация: Это не жёсткое правило, но если ваша анимация состоит из более чем 150 кадров, при попытках уменьшить размер файла могут возникнуть проблемы.
Меньше цветов
При сохранении гифки в Photoshop справа от параметра Colors будет выпадающее меню. Поэкспериментируйте со значениями, попробуйте минимальное число цветов, но так, чтобы не испортить весь GIF файл.
Настройте параметр Lossy* (потери)
Честно говоря, я даже не знаю, что это за настройка. Но точно могу сказать, что если выставить её в промежутке 1-10, то это избавит вас от лишних килобайтов без потери качества.
*Lossy («Потери») — допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить размер файла изображения
Ничто из этого не сработало! Помогите!
Если ничто из уже описанного не помогло уменьшить размер файла, задумайтесь: может быть, вы решаете свою задачу неверными средствами? Может быть, вы требуете слишком много от GIF-анимации и есть более подходящий способ достичь цель? Может быть, стоит разбить файл на две гифки? Как и большинство продуктов, гифки лучше фокусировать на чём-то одном.
Бонус-видео: супер-быстрое создание GIF-анимации.
Скачайте видео-файл, с помощью которого я сделал GIF-анимацию для этого поста! (Чтобы открыть его, вам понадобится программа ScreenFlow 5).
Рекомендация: Используйте GIF-анимации в прототипах.
Что я пропустил?
Оригинал статьи — пост на Medium дизайнера InVisionApp Andy Orsow. Энди так же готовит запуск стартап-видеокурса по созданию вовлекающих, профессионально и интересно сделанных продуктовых видео.
Об авторе
Ева Медведева журналист в области IT технологий.
Понравилась статья? Подписывайтесь на RSS канал и Email рассылку и получите скидку 10% на сайт. Чтобы подписаться, введите ваш адрес электронной почты ниже: