Возникла задача создать гифки на определенную тему.
Дело в том, что баннеры и тизеры лучше всего работают анимированные. Продажа реального товара проще всего получается если покупатель визуально видит рекламируемые товары. Поэтому лучше всего делать такие баннеры из обзоров нужного товара. Благо в Youtube наверняка найдется не один десяток обзоров на нужный вам товар.
Самый простейший и удобный способ сделать собственные гифки для рекламных целей — это сгенерировать их из видео.
Кстати, это могут быть необязательно рекламные материалы. Очень хорошо работают анимированные GIF-изображения и в оформлении обычных статей. Ведь люди «залипают» в хорошие и интересные гифки. А значит дольше находятся на странице и изучают ее. Что напрямую влияет на , а значит и на
Кстати, это отличный способ оформить статью уникальными изображениями. Простых способов достать в интернете которые не так уж и много. Вот несколько из них: . А использование гифок — это отличная и интересная практика, которая положительно влияент на восприятие контента читателем.
Как легко сделать GIF изображение для рекламы, баннеров и тизеров?
Просто идем в youtube, ищем подходящий ролик, просматриваем, выбираем несколько секунд видео, где показывает нужные нам кадры.
Теперь понадобится сервис. Таких сервисов много, но какие-то из них очень неудобные, какие-то платные. Я перепробовал с пяток разных сервисов, и нашел наиболее удобный, который позволяет выбрать нужный фрагмент с точностью до десятых долей секунды. И таким образом создать четкую анимацию, без лишних кадров. Многие сервисы дают выбрать фрагмент только с помощью ползунков, которыми довольно сложно отрегулировать начало и длительность фрагмента с такой точностью
Сервисы из топа Google показали не самые лучшие инструменты для этого. На первый я вообще не смог загрузить видеоролик, а на втором не смог точно указать нужный фрагмент ползунком.
Сервис для создания GIF из видео
Указываем нужный фрагмент. Очень удобно, что можно сделать предпросмотр и выбрать нужные кадры с точностью до десятых долей секунды. После предпросмотра анимированного изображения можно изменить границы. И так делать сколько угодно итераций.
Сервис простой и удобный, работает быстро.
Но это еще не все. Ведь не всегда нам подойдет весь фрагмент из видео. Часто нужно его дополнительно обработать — добавить какие-то эффекты, надписи или обрезать GIF. Да те же черные границы, или срезать ватермарк самого сервиса. Данный сервис это не умеет. Благо, есть много других. И опять надо выбирать среди них. Поэтому идем в другой сервис, который позволяет это делать удобно.
Как обрезать GIF или добавить текст к нему?
Для этого наиболее удобным оказался сервис ezgif.com и его функция обрезки GIF — crop
Здесь просто мышкой выделяем нужную часть анимированной картинки и жмем Crop IT. И опять, нам доступен предпросмотр. Если вариант не устраивает — можно изменить границы. В итоге можно вырезать анимированный баннер любого подходящего формата.
Наложить надпись на GIF-анимацию
Создание Gif из видео с помощью расширения для браузера Google Chrome
Небольшой мануальчик про то, как можно создать gif-анимацию онлайн, без установки программ. Установить придется только одно маленькое расширения для нашего любимого Google Chrome. А видео для создания гифок будем брать с видеохостинга YouTube.com. Предупреждение: Всех тех, кто при виде названия браузера Chrome начал плеваться, просьба отойти от экрана - статья не для вас.
Для чего все это нужно? Можно просто побаловаться, можно вставлять эти самые гифки к себе в блог, а можно наполнять ими свою страничку в соц сети. Я ради интереса недавно создала gif-анимацию из видео про кошачьи проделки и выложила в тематическую группу на Google+. Результат - картинка набрала около 400 плюсиков и более 80 перепостов менее чем за двое суток.
Люди любят такой контент, почему бы этим не воспользоваться? Если вы блогер и пишете статьи, в которых одними рассказами не отделаешься, а нужно что-то показать, то вы можете снять видео или сделать скринкаст, выложить на Ютуб и сделать гифки из частей видео. Все это дело можно встроить при помощи кода, так что за место на хостинге можно не переживать. Но лучше обо все по порядку.
Как всегда, я люблю немного потянуть резину. Давайте уже начну что ли. Сразу скажу, тестировала я это расширение только с видео YouTube, хотя, по утверждению создателей полезного довеска для браузера, с Vimeo все тоже должно работать. Но вы уж это сами проверяйте если хотите.
Тогда давайте приступим к созданию гиф-анимации.
Сделать это действительно очень просто. Но для начала вам потребуется кое с чем согласиться. Не пугайтесь, вам нужно всего лишь зайти на страницу http://www.youtube.com/html5
и согласиться участвовать в тестировании HTML5-плеера. Если вас что-то не устроит, то в дальнейшем вы всегда сможете зайти и отказаться.
После этой нехитрой манипуляции вам останется скачать расширение для браузера Chrome (оно называется MakeGIF Video Capture) и найти подходящее видео. Вы можете выбрать абсолютно любое видео на YouTube - не важно ваше оно или нет. Выбрали? Тогда нажмите на воспроизведение, а затем нажмите на кнопку расширения в оминбоксе. К сожалению это расширение не может похвастать богатыми настройками и эффектами. Максимум что вам удастся сделать - это настроить качество анимации, максимальное количество кадров (до 1000) и размер картинки. Также вы можете вставить какой-либо простенький текст, а также заставить анимацию проигрываться задом наперед (зачастую так гораздо смешнее и интереснее).
Итак, выбираете нужный момент в видео и нажимаете на старт. В процессе можно нажать на паузу и опустить ненужное. Когда момент, который вы решили запечатлеть, подошел к концу, нажмете на стоп. И не беда, если попадутся лишние кадры. Вы сможете их попросту вырезать.
Если анимация готова, то можно загрузить ее к себе на компьютер или же отправить на онлайн-сервис MakeGif.com. Второй вариант гораздо привлекательнее, потому что для вас открываются дополнительные возможности. Какие? Сейчас расскажу.
Таким образом, при помощи расширения MakeGIF Video Capture и сайта MakeGif.com вы получаете сразу два полезных в работе инструмента для создания gif-анимации онлайн, без установки программ на свой PC. Насколько я знаю, подобных сервисов в Интернете довольно так много. Похвастайтесь, если вдруг знаете что-то получше.
Сейчас на просторах Интернета набрали большую популярность так называемые гифки или gif-анимации. Это забавные несколько секундные мини-фильмы без звука. Гиф – это растровый графический формат (Graphics Interchange Format ) представляет собой покадрово изменяющиеся изображения. Анимация может быть цикличной , то есть после последнего кадра опять идти первый.
Наибольшее распространение они получили у пользователей социальных сетей. Их используют для выражения эмоций или просто, чтобы развеселить собеседников. Рассмотрим несколько наиболее удобных способов создания гифок.
Используем Giphy GIF Maker
Легко позволит Вам это произвести утилита Giphy GIF Maker. С её помощью можно максимально быстро
из небольшого видео сделать гифку.
Сюда можно не только загрузить свой видеофрагмент с компьютера, но и ссылаться на ресурс с этим видео. Также поддерживает прямые ссылки с ютуба.
После загрузки фрагмента
или целого видео выбираете начало, длительность и конец ролика. Можно добавить текст в кадр в любом месте экрана.
Затем какое-то время (в зависимости от длительности гифки) программа преобразует видеофрагмент в Гиф, Вы сможете загрузить свою анимацию или получить код для вставки на другой ресурс.
Создаем гиф с помощью Imgflip
Imgflip – простой, но при этом очень функциональный
генератор GIF. Опять же можно использовать как фрагменты
видео с компьютера, так и ссылки на различные сервисы, в том числе ютуб
.
Потребуется лишь залить файл с компьютера или вставить ссылку на нужное Вам видео (Video To GIF). Также в этой программе можно создать ролик, используя несколько чередующихся картинок (Images to GIF).
Используем photoshop
Photoshop также позволяет создавать GIF изображения. Для этого выполняем следующие шаги:
Gif анимация из части экрана
Гифку можно создать, используя захват экрана, так называемы стринкаст . Весьма полезно и необходимо в некоторых случаях
Программа Licecap
Удобно и легко это сделать, используя широкий функционал программы.
Позволяет сохранять запись с экрана в гиф, можно делать паузы, добавлять подписи в виде текста. Можно настроить частоту кадров, использовать «горячие» клавиши , сжимать видео без потери качества.
Создаем гифку с помощью Gifcam
Отличный инструмент для захвата видео и получения GIF картинок.
Множество настроек позволят качественно отрегулировать режим записи. Итоговый размер минимален. Есть функции оптимизации света и другие профессиональные настройки . Эта программа сложнее предыдущей, но качество произведенной анимации будет заметно выше.
Создание ролики из картинок
Из множества разнообразия утилит для создания роликов из картинок порекомендуем Ezgif и Gifovina.
Как использовать Ezgif
Англоязычный интерфейс, при этом интуитивно понятный для пользователя.
Последовательно загружаем картинки , добавляем текст к гифке, настраиваем визуальные эффекты . Минусом программы является отсутствие возможности добавить логотип.
Создаем гиф с помощью Gifovina
Принцип работы программы Гифовина похож на предыдущую, но она русифицирована, позволяет добавлять гораздо больше видеоэффектов.
Зачем вообще может понадобиться сделать гифку из видео?
Почему просто не использовать видео?
Видео — тяжелое. Видеоролик будет весить несколько Мб, а аналогичная гифка в 10-100 раз меньше.
Да, интернет-каналы толстеют, но ведь есть еще и мобильный интернет, есть медленные компьютеры и прочее.
У GIF-анимации есть 2 функции…
Для чего используют GIF?
Я вижу 2 функции. Первая — показать какой-то процесс наглядно.
Вот, например, моя гифка, показывающая как работает программа Punto Switcher:
Можно было долго описывать, как работает программа, но гораздо проще засунуть такую вот гифку. И всем все понятно. Ее вес — всего 29 Кб.
Кстати, второй вариант — сделать крутой скриншот со стрелками. О том, как это делать я писал .
Вторая функция — просто ФАН (развлечение, шутка и т. д.).
Когда в статье нужно показать какую-то эмоцию лучше средства, чем GIF-анимация не найти.
Например, эта гифка отлично показывает злость (499 кб):
а это — скуку (392 кб):
а вот задумчивость (385 кб):
Вставив такую картинку в статью вы сразу сполна передадите вашу эмоцию. Разве не здорово?
Но как найти подходящую гифку онлайн?
Например, я с его помощью смастерил за 5 минут такую гифку из видео на YouTube. Размер -всего 390 Кб:
Ее можно использовать, когда нужно показать, например, излишний формализм и гламур в абсолютно неподходящих для этого обстоятельствах.
О том, как я сделал эту анимацию, а также о том, как вообще уменьшать размеры GIF — моя пошаговая инструкция .
Вариант 2. Гифка со съемки экрана
Если вы хотите записать гифку с каким-то процессом (например, чтобы послать коллеге наглядное пособие), то вы можете просто снять скринкаст любой программой.
Я же для этого пользуюсь удобным программой-комбайном ShareX (ссылка).
Она, конечно, позволяет снять и видео с экрана, но может и сразу создать гифку из всего процесса.
Не гифом единым. Coub!
Картинка — хорошо. Но иногда со звуком все еще лучше. Гифка со звуком — это Coub.
В Интернете полно смешных кубов.
Моя любимая — «Ну и пожалуйста! Не очень то и хотелось!»
А вот про наших народных умельцев, которые дадут жару любому Масачусетскому технологическому:
А этот куб про дороги России. Мы такие сцены видим каждую весну, к сожалению:
Лесной стриптиз. Ни разу не был на стриптизе, теперь знаю, как это бывает:
Ну, а в этом состоянии, я уверен, каждый бывает в пятницу вечером.
Файлы в формате GIF повсюду. Некогда скромные анимированные изображения теперь являются неофициальным языком интернета. GIF анимация — это самый быстрый способ выразить эмоции в Twitter, а ещё мы можем тратить часы на её просмотр пролистывая ленту новостей в VK, Facebook или Одноклассниках.
Существует достаточно большое количество сайтов, на которых можно найти уже готовые гифки на самые различные тематики. Но ничто не сравнится с GIF анимацией, которая сделана своими собственными руками. Думаете, что это сложный процесс? Вы ошибаетесь, это довольно просто. Быстро создать GIF анимацию можно в графическом редакторе Photoshop, конвертируя уже существующее видео, либо используя серию статических изображений. Давайте рассмотрим подробнее, как это делается.
Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.
Как создать GIF анимацию из видео
Для начала необходимо запустить Photoshop, перейти в «Файл» > «Импортировать» > «Кадры видео в слои» и выбрать необходимую видеозапись.
В открывшемся диалоговом окне можно будет выполнить импорт всей видеозаписи, либо выбрать только её определённую часть. Если вы выберете второй вариант, перетащите ручки под окном предварительного просмотра, чтобы установить начальную и конечную точки. Часть видеозаписи, находящаяся между этими ручками, будет импортирована.
Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) — это простой способ уменьшить размер, не слишком сильно влияя на качество.
Убедитесь, что установлена галочка в окошке «Создать покадровую анимацию», затем нажмите «OK». Начнется процесс импортирования видеозаписи. Это может занять некоторое время, в зависимости от размера клипа. После завершения импорта откроется рабочая область, в которой каждый кадр видеозаписи будет размещен на собственном слое.
В нижней части экрана находится палитра шкала времени. Она показывает все кадры, из которых будет состоять ваша GIF анимация.
Вы можете добавлять и удалять кадры по своему усмотрению, или редактировать любой из существующих слоев так же, как редактируете слои на любом другом изображении. Для предварительного просмотра вашей GIF-анимации просто нажмите кнопку «Воспроизвести» внизу шкалы времени.
В итоге должно получиться что-то вроде этого:
Создание GIF анимации из серии статических изображений
Если у вас нет видеозаписи для использования её в качестве основы для вашей GIF анимации, вы сможете создать её вручную из серии статических изображений. Это немного сложнее, особенно если вы хотите сделать что-то крутое, но основной процесс прост.
Вы создаёте свой GIF из одного файла изображения, содержащего несколько слоев. Каждый слой – это отдельный кадр вашей будущей анимации. Существует два способа начать работу:
- Если вы уже создали изображения для своей анимации, импортируйте их, выбрав «Файл» > «Сценарии» > «Загрузить файлы в стек…». Нажмите «Обзор» и выберите свои изображения, затем нажмите «ОК». Каждое изображение будет помещено на отдельный слой внутри одного и того же файла.
- Если вы еще не создали изображения, сделайте это сейчас. Помните, что каждое отдельное изображение — это часть будущей анимации.
Теперь вы готовы начать создавать анимацию.
Анимирование статических изображений
Вот как это работает. Когда вы вручную создаете кадр анимации, в него включается каждый видимый слой. Слои, которые отключены, не будут участвовать в создаваемом кадре.
Для создания первого кадра сделайте самый первый слой видимым, а все остальные отключите. Затем, создавая второй кадр, сделайте второй слой видимым, а затем третий слой в третьем кадре и так далее. Когда вы начнете, всё станет понятнее.
Для начала создания анимации откройте шкалу времени, если она у вас не открылась автоматически. Для этого в верхней панели нажмите «Окно» и в открывшемся меню выберите «Шкала времени». В центре раскрывшейся панели нажмите «Создать анимацию кадра». Это действие приведёт к созданию первого кадра вашей анимации. В палитре «Слои» скройте слои, которые не должны быть частью кадра.
Теперь нажмите кнопку «Новый кадр», которая будет дублировать предыдущий кадр. Еще раз скройте лишние слои, а те, которые должны участвовать в кадре, сделайте видимыми.
Повторяйте этот процесс, пока не добавите все необходимые для анимации кадры.
Завершение
В завершение, установите время отображения каждого кадра. Выделите первый кадр, а затем щелкните по последнему с зажатой кнопкой «Shift», для того чтобы выделить их все. Теперь щелкните стрелку вниз под одним из кадров и выберите задержку. Отсутствие задержки означает, что анимация будет работать быстро, в то время как установленное количество секунд заставит кадры оставаться на экране в течение заданного периода времени.
Наконец, установите параметры цикла, которые вы найдете в нижней части панели «Шкала времени». Этот параметр отвечает за то, сколько раз будет воспроизводиться ваша анимация. В большинстве случаев вы будете выбирать вариант «Всегда».
Теперь нажмите кнопку «Воспроизвести» в нижней части экрана, чтобы просмотреть получившуюся анимацию. Вы должны увидеть что-то вроде этого:
Вы можете редактировать кадры, просто выбирая их и меняя видимость слоёв (вы также можете изменить непрозрачность или сделать другие более сложные настройки). Добавьте дополнительные слои, если они вам нужны, или нажмите значок корзины, чтобы удалить их.
Когда вы будете довольны получившимся результатом, можете переходить к разделу «Сохранение анимации», либо читайте дальше, чтобы улучшить получившуюся анимацию.
Усовершенствование анимации путём добавления промежуточных кадров
Photoshop поддерживает мощную анимационную функцию создания промежуточных кадров. Это позволяет создавать более плавные анимации, автоматически генерируя переходные кадры между двумя существующими кадрами. В этом примере я собираюсь обойти все кадры, чтобы придать звездному небу эффект мерцания.
Для начала выберите первый кадр и нажмите кнопку «Создание промежуточных кадров» панели инструментов в нижней части шкалы времени.
В открывшемся диалоговом окне установите пункт «Промежуточные кадры» в значение «Следующий кадр», а для пункта «Добавить кадров» укажите значение по своему усмотрению. Более высокое значение означает более плавный, но медленный переход. Нажмите «OK», чтобы создать промежуточные кадры.
Теперь повторите этот процесс для других исходных кадров, которые вы добавили. Когда доберётесь до последнего, установите «Промежуточные кадры» в значение «Первый кадр». Это поможет создать плавный переход к началу цикла вашей анимации.
Нажмите кнопку воспроизведения, чтобы просмотреть эффект.
Сохранение анимации
Когда вы закончите, сначала сохраните файл в формате «.PSD». Это сохранит всю информацию о слоях и анимации для того, чтобы вы смогли позже отредактировать вашу анимацию, если потребуется. После этого можно переходить непосредственно к сохранению.
Для сохранения созданной анимации перейдите в «Файл» > «Экспортировать» > «Сохранить для Web (старая версия)…». В открывшемся окне выберите формат GIF, а в поле «Цвета» укажите 256. Для того, чтобы уменьшить общий размер файла, уменьшите размер в поле «Размер изображения».
Вы cможете увидеть, размер анимации в левом нижнем углу окна предварительного просмотра. Если он слишком большой, перетащите ползунок «Потери» вправо. Это повлияет на качество, но значительно уменьшит размер файла.
По сути «гифка» — это изображение, которое объединяет в себе анимацию и рисунок. Главной особенностью гифки является то, что она очень проста в создании. Сегодня мы расскажем Вам о таком явлении Интернета, как гифки и расскажем как их делать.
Как вести себя если вас окружают хамы
Что форма носа может сказать о вашей личности?
Как сделать «гифку» из фотографии?
Как мы писали, создание «гифки» — простой процесс. Сегодня используют специальные онлайн сервисы для создания «гифок». Мы расскажем Вам, как сделать «гифку» из фотографии использовав онлайн сервис:
Для чего крошечный карман на джинсах?
В какой позе лучше спать
Что произойдет если прекратить часто мыть волосы
- найдите в Интернете онлайн сервисы «гиф»-анимации (например: gifovina.ru или minimultik.ru).
- найдите картинки, которые Вы будете использовать для создания «гифки»
- скопируйте эти файлы к себе на компьютер
- выберите желаемые размер будущей анимации («большой», «аватар» и др.)
- выберите скорость, с какой будут сменяться кадры
- нажмите кнопку «продолжить» (или «continue»).
Сегодня «ВКонтакте» самая популярная социальная сеть на просторах стран СНГ. Возможности которые предоставляет «ВКонтакте», давно уже вышли за рамки обычного общения с помощью сети Интернет: можно играть в игры, смотреть видео, слушать музыку и многое другое. Сейчас вы узнаете, как проводить различные манипуляции с гифками Вконтакте.
Если есть готовая «гифка»
«Гифки» можно найти на просторах сети Интернет. Если у Вас есть готовая гифка, или которую Вы создали, ее можно вставить в «Вконтакте». Вам будет нужно:
- скопировать или запомнить ссылку на «гифку»
- вставить или ввести ссылку на «гифку» в окошко на Вашей стене.
- после чего нажать на кнопку «Отправить»
Сохраняем «гифку»
Если Вы нашли в Интернете или на страницах друзей в «Вконтакте» интересные гифки, Вы можете их сохранить для себя и использовать в нужное время. Вам будет нужно:
- создать раздел «Документы» на Вашей странице
- если раздел уже создан, перейдите в него и нажмите на кнопку «добавить документ».
- если это «гифка» со страницы юзера «Вконтакте», нажмите на «плюсик», который находится на «гифке» и следуйте дальнейшим инструкциям.
- если Вы захотите использовать «гифку», Вам будет нужно найти ее в своих документах и прикрепить к сообщению или к стене.
Видео уроки
