Возникла задача создать гифки на определенную тему.
Дело в том, что баннеры и тизеры лучше всего работают анимированные. Продажа реального товара проще всего получается если покупатель визуально видит рекламируемые товары. Поэтому лучше всего делать такие баннеры из обзоров нужного товара. Благо в 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. Насколько я знаю, подобных сервисов в Интернете довольно так много. Похвастайтесь, если вдруг знаете что-то получше.
3. Ищем свою папку с подготовленными фото и кликаем левой кнопкой мыши на первую фотографию, зажимаем клавишу Shift, и кликаем по последней, тогда они выделяются все. Жмем ОТКРЫТЬ.
4. В вашем фотошопе открываются все фотографии. Начинаем создавать слои, которые нам понадобятся для анимации или создания gif картинки . Я открыла специально широкую фотографию. И она будет 1-ым слоем.
Чтобы преобразовать фото в слой, кликаем по нему два раза левой кнопкой мыши.
5. Чтобы создать второй слой, нам нужно кликнуть по иконке, на которую показывает стрелка. На втором слое мы будем располагать другую фотографию.
6. Топаем в наши фотографии, которые открыты рядом с первой, и выбираем узкую фотографию. Напоминаю, что это необязательно… С одинаковыми фотографиями легче работать. Итак, находим нужную фотографию, идем в меню — выделение — выделить ВСЕ.
7. После этого вокруг картинки начнут бегать маленькие тире, это и есть выделение. Теперь идем в меню — редактирование — скопировать.
8. Возвращаемся к нашей первой фотографии, которая уже со слоями, идем в меню — редактирование — вставить. И наша узенькая фотка вставляется на новый слой. Но она не может оставаться такой узкой. Нам нужно добавить фон под нее. Для этого кликаем по иконке (1), перетаскиваем слой под узкое фото, затем пипеткой (2) подбираем любой понравившийся вам цвет, кликнув курсором по фото. Я выбрала светло-зеленый. И заливаем новый слой, для чего мы активизируем инструмент заливка (3) и потом кликаем левой кнопкой мыши по рабочему полю фотографии. Обратите внимание, что в этот момент активным должен быть новый прозрачный фон. Активные слои выделяются синим цветом. После ваших действий прозрачный слой окрасится.
9. Теперь нам надо объединить два слоя (узкую фотографию и фон). Наступаем левой кнопко мыши на первый слой. Зажимаем клавишу Shift и кликаем по второму слою. Они выделились синим цветом. Идем в меню — слои — объединить слои.
10. Получаем такую картинку.
11. Повторяем пункты 6 — 10 моего урока, чтобы создать слой с еще одной узкой фотографией. Он у меня слой 2. И создаем еще один новый прозрачный слой для размещения там последней широкой фотографии (слой 3).
12. Для этого выполняем пункты урока 6, 7, 8. Все. Готово. Слои для нашей gif картинки мы создали.
13. Можно начинать анимирование и с вашими слоями, но я решила создать подложку под нашу картинку. Для этого топаем в меню — изображение — размер холста. Увеличиваем наш холст на 50 пк по ширине и высоте. Жмем ОК.
14. У нас получилось вот так.
15. Создаем новый слой (у меня слой 4), перетаскивам его в самый низ под все фотографии, вы можете сделать подложку того же цвета, что и фон в ваших узких фотографиях. Я выбрала цвет подложки немного темнее.
Оформляете вашу подложку любым способом. Надеюсь, что вы знаете, как выставляются параметры слоя, но если нет, то это просто. Наступаете на нужный слой и кликаете по нему дважды левой кнопкой мыши и у вас открывается окно с параметрами вашего слоя, а там отдельно открываете каждый отдельный параметр и вы применяете или изменяете его настройки. Я применила эффект в параметрах слоя Внутренняя тень и Внутреннее свечение с параметром слоя Умножение… Цвет тени немного темнее тона подложки. Но здесь я не берусь навязывать вам мое мнение. У вас есть свое видение. Пробуйте, меняйте настройки. Это не страшно. Всегда можно вернуться к первоначальному результату, для чего идете в меню — редактирование — вернуться назад.
Кстати, на моей последней фотографии куст глицинии, ее много во Франции и время ее цветения конец апреля — начало мая. Этот куст я сфотографировала в саду у родителей моего друга. В моем болгарском дворе тоже есть кусты глицинии и думаю, что скоро она порадует нас своими цветами, похожими на сиреневые облака.
16. Настало время поставить свой логотип, особенно это важно, если ваша картинка будет располагаться на вашем сайте. Для обычных пользователей это можно не применять. Напомню, что я делала урок фотошопа о . Пробегусь вкратце: идем в меню — файл — поместить. Ищем свой файл PSD с подготовленным заранее логотипом, наступаем на него и кликаем по кнопке Поместить.
17. Перетаскиваем слой с логотипом на самый верх, как у меня. При необходимости увеличиваем логотип до нужного размера, для чего идем в меню — редактирование — масштабирование. С зажатой клавишей Shift растягиваем или уменьшаем логотип. Активируем инструмент «перемещение» (самый верхний инструмент со стрелкой и + в панели инструментов) и перемещаем логотип на нужное место.
Все подготовлено с созданию анимации.
17. В самом первом кадре анимации у вас должна быть открыта видимость со слоем подложки, первый слой с вашей фотографией (в моем случае слой 0) и логотип (позиция 1). Для хорошего просмотра вашей фотографии устанавливаем время задержки 5 сек (позиция 2). После определения времени задержки и установки его в первом кадре, все последующие кадры будут с заданным временем 1 кадра, т.е. 5 сек в моем случае. Для создания второго кадра жмем на иконку, показанную на позиции 3.
18. Во втором кадре меняем видимость слоя с первой картинки на вторую, так же, как показано на моем скрине.
Гиф-маркетинг - визуальный метод передачи информации и привлечения внимания. Это также простой способ выделиться на общем фоне в соцсетях.
В этой статье вы узнаете как создать анимированную GIF-картинку.
Из чего сделаны GIF-картинки
Гифы создают из серии изображений или видео. Объединяете несколько фотографий или видеокадров в анимированное изображение. Аудиодорожка при этом не сохраняется.
Гифки можно создавать на базе профессионального оборудования (например, Adobe After Effects) и на специализированных сайтах. Многие поддерживают интеграцию с Facebook и Twitter и предлагают забавные штуки (стикеры, например).
Инструменты для создания GIF
Giphy
Популярный, простой и бесплатный инструмент.
Чтобы создавать гифки, регистрироваться не обязательно. Но аккаунт позволяет сохранять результаты на ресурс и выкладывать в собственный канал вида www.giphy.com/channel/username .
Итак, проходите простую регистрацию. Затем жмете Create в правом верхнем углу.
- GIF Maker. Создать гифку из видео с YouTube или компьютера.
- Slideshow. Создать гифку из нескольких изображений.
- GIF Caption. Добавить титры и текст к гифке.
- GIF Editor. Добавить стикеры, фильтры и анимацию.
Первые два варианта создают гифку с нуля.
GIF из видео
Теперь установите время старта и длительность:
Примите условия соглашения и нажмите Create:
Вот что у нас получилось:
GIF из изображений
Нажмите Slideshow → Browse и загрузите изображения, которые хотите объединить. Максимальный размер - 100 МБ.
Выберите скорость переключения между кадрами:
Можно добавить титры, изменить порядок показа, убрать или добавить изображения, а также добавить теги. Теперь жмите Create Slideshow.
Вот что у нас получилось:
Гифку можно сразу выгрузить в Twitter, Facebook и Instagram. Но лучше предварительно загрузить ее, чтобы при выгрузке видеть анимацию, а не ссылку на нее.
За секунды поможет сделать смешное видео или картинку. Можно загрузить видео из Facebook или Instagram. Далее все просто: задайте время, длительность и скорость воспроизведения. К готовой гифке можно добавить титры или стикеры.
Подходит для сшивания фотографий и создания гифок из видео. Достаточно загрузить фотографии, установить длительность, скорость и время повтора. Правда, никаких дополнительных фишек.
Подходит для полупрофессионального создания анимированных картинок и видео. Инструмент платный, абонентская плата - от 29 долларов в месяц. Зато куча дополнительных эффектов.
Позволяет жонглировать скриншотами экрана: делать гифки и обмениваться ими. Тарифы - от $10 в месяц. Бесплатный пробный период - 14 дней.
Еще один простой инструмент для быстрой работы со скринкастами. Выберите область экрана - и через секунду гифка готова.
Программное обеспечение нужно устанавливать на компьютер.
Как использовать GIF
Скажите «Спасибо!»
Благотворительная организация Red Nose Day благодарит всех, кто участвовал в сборе средств для бедных.
«Спасибо! Мы собрали больше тысячи фунтов!»
Гифкой можно также поблагодарить за отзыв, покупку или загрузку приложения.
Покажите продукт
Например, вот такие аппетитные блинчики:
«Блины с начинкой - что может быть лучше этой весной?»
С помощью гиф-изображения можно также представить новинку или сообщить о скидке.
Покажите, как использовать продукт
Одна анимированная картинка заменит строки текста и сократит время работы.
Наполняйте блог и генерируйте трафик
Когда в ленте много красивых изображений, гифка поможет выделиться и приведет трафик на сайт или в блог.
General Electric показывает часть рабочего процесса по созданию суперэффективной экологичной турбины:
Можно сделать серию забавных гифок для обучающих курсов.
В сети популярны блоги с рецептами или советами в формате анимированных картинок.
Покажите характер бренда
Гифки персонализируют послание клиентам. Это забавный и простой способ взаимодействовать с аудиторией в соцсетях. Посмотрите, какие гифки придумали британские маркетологи и тьюторы Эндрю и Пит:
Giphy позволяет от имени компании регистрироваться, создавать и выкладывать гифки на внутренний канал. Эти гифки - часть поискового процесса во всех интегрированных в Giphy соцсетях и мессенджерах (Twitter, Facebook, WhatsApp, iMessage).
Используйте уникальные теги, чтобы ваши гифки легко находили.
Вдохновения и успехов!
Мир сходит с ума по гифкам. Они повсюду. И не только в соцсетях и на форумах, ими начали иллюстрировать научные статьи, их используют СМИ и даже компании размещают gif-анимацию на Лендингах. Для привлечения внимания, конечно. Наш мозг так устроен, что скорее заинтересуется тем, что движется, нежели статичной картинкой. Если вам тоже нужна гифка, то вам сюда – будем учиться их делать.
Поисковик выдает кучу сайтов, где можно создать gif-анимацию онлайн, но не все они работают корректно. Вот проверенные ресурсы.
1.Toolson.net. Годный и бесплатный сервис, чтобы создать gif онлайн. Если захотите больше возможностей – регистрируйтесь. Единственное, видео предварительно нужно скачать. Выбираете необходимый отрезок на видеозаписи и жмите сохранить – гифка готова. Добавьте надписи, поиграйте со шрифтом и стилями. Вот gif-анимация, созданная на этом ресурсе.
2.Giphy. Здесь даже ролики скачивать не нужно. Гифки создаются из видео, взятого с YouTube. Просто копируете ссылку на видео, вставляете ее в строку поиска и идет автоматическая загрузка. Когда видео загрузится, выберете нужный эпизод.
3.Photoshop. Помощник на все времена. С его помощью можно убрать из видеоролика логотипы сторонних ресурсов, добавить надписи, спецэффекты. Видео должно быть уже скачено и, что важно, не превышать пяти секунд. Открываете ролик (Файл – Импортировать – Кадры в слои ) и поехали. Творите!
Как создать гифку из фото, картинок
Ezgif . Простой в использовании сервис. Загружаете картинки, добавляете подписи и готово! Можно выбрать диапазон «задержки», по умолчанию стоит 20 миллисекунд, чтобы совсем быстро не мелькало, сделайте 50.
Как создать гифку на iPhone
GifsArt. Крутое бесплатное приложение. Вот инструкция.
1. Откройте приложение и выберете фото, картинку для создания gif-анимации.
2. Теперь нажмите на «Наклейки» и ищете что-нибудь стоящее. Много банальных наклеек, но есть и симпатичные.
3. Если ничего не подошло, вставьте анимацию из снега или капель дождя. Для этого выберете вкладку «Маски». Там найдете эффекты.
4. Когда добавите анимацию, нажимайте «Применить», отрегулируйте скорость движения.
Как создать гифку на Андроиде
PicsArt Animator. Удобная и бесплатная программка. Вместо наклеек здесь стикеры. Выбираете фон (например, город) и персонажей (людей, животных, птиц, самолеты, машины). Создавайте веселые картинки. Пробуйте!
Итак, подведем итоги, сервисов для создания гифок много, в основном они работают в режиме онлайн. Выбирайте тот, который больше понравится. Если нет времени на создание gif-анимации, держите пару сайтов, где можно скачать готовые гифки:
