Что такое GIF баннер, зачем он нужен и как его создать?

По данным
Visually, медийная (баннерная) реклама повышает посещаемость целевого ресурса на 300%. Что же такое gif анимация, в чем ее ценность для интернет-маркетинга и как ее сделать за считанные минуты без навыков программирования?

Что такое gif баннер?

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

Сегодня GIF баннер активно используется в контекстно-медийной сети Google, рекламной сети Яндекс, активно внедряется в соцсетях, каждый день мы видим гифки в любимых мессенджерах или почтовой рассылке, и конечно же, на сайтах.

Как работает gif баннер?

Если говорить простым языком, то анимированный баннер — это череда обычных изображений, которые сменяют друга друга в определенной последовательности с определенными эффектами. И чем больше таких изображений, тем длинней сама гифка. При этом сделать ее бесконечно долгой, как фильм, нельзя. Все ресурсы, которые принимают gif баннеры, имеют четкие ограничения по весу такого файла и скорости их смены, а значит, по числу «встроенных» изображений. Сами gif анимации могут быть как зацикленные — с круговым проигрыванием, так и конечные — останавливаются после одного или нескольких проигрываний.

Непосредственно в рекламных, а не развлекательных целях, gif баннеры используют для:

• Продвижения бренда и повышения узнаваемости аудиторией. Чем чаще клиент видит логотип или предложение, тем больше вероятность, что он отдаст предпочтение именно этому бренду  при выборе услуги или продукта нужной категории.
• PR-акции. Скидки, выход нового продукта, рекламные кампании или челенджи — все через gif анимации. Буквально за несколько секунд читатель, сам того не понимая, вовлекается в воронку продаж.
• Презентации. Gif баннеры, особенно в рекламе в соцсетях, активно внедряют такие гиганты рынка как Chanel, Mitsubishi, Coca-Cola и многие другие. Это делают для того, чтобы продемонстрировать новую продукцию во всей ее красе.
• Стимулирования действий. Заглушки на сайтах в виде gif анимации, интерактивные кнопки, инструкции — все это можно реализовать быстро и в  одном файле.

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

Почему именно баннерная реклама?

Около 85% населения планеты — люди с визуальным восприятием и мышлением. По данным исследований Массачусетского технологического института, человек может обработать информацию с изображения в течение 13 миллисекунд, в то время как текст будет обрабатываться в 3,23 раза дольше. При этом человек может запомнить 25% визуальной информации, а звуковой (на слух) — всего 15%. Именно поэтому дисплейная реклама настолько эффективна. А если  создать еще и несколько изображений в рамках единого информационного потока, как например анимация онлайн, уровень восприятия можно увеличить в несколько раз.

Так, по данным
PromoDo, баннерная реклама занимает 5 место по популярности среди всех диджитал-инструментов в мире. А в странах СНГ — 3 место среди интерактивной рекламы: такой способ используют 68% маркетологов, если верить RUSSIA IAB. Поэтому сомневаться в эффективности такого визуального способа вовлечения аудитории не приходиться. А значит, стоит разобраться в нем глубже и применить на практике.

Как сделать гифку без навыков программирования?

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

В BannerBoo вы найдете изображения лучшего качества, самые крутые эффекты и рекомендации как создать gif онлайн всего в несколько кликов. При этом в конструкторе уже учтены все требования рекламных площадок Google, Яндекс, YouTube и социальных сетей, поэтому вам не нужно переходить с сайта на сайт в поисках крупицы полезной информации. 

1. Пройдите простой процесс регистрации, чтобы все варианты созданных анимаций хранились и были в любой момент доступны в вашем личном кабинете пользователя.
2. Выберите желаемый размер баннера, исходя из площадки, для его размещения. Все размеры уже есть в верхней панели.
3. С помощью перетаскивания разместите изображения со своего компьютера или просто выбирайте подходящие именно для вас клипарты в нашей галерее, где уже доступно более 1 млн вариаций.
4. Добавляйте текст, призывы к действию, эффекты — все, что сделает вашу анимацию более динамичной и экстраординарной.
5. Просматривайте результат, урезайте или добавляйте визуальные элементы, корректируйте скорость и цвета — все легко и интуитивно понятно.
6. Сохраняйте свои личные баннеры в качестве шаблонов на нашем облаке и работайте с ними в любое удобное время через личный кабинет.

Все просто и доступно.

Если вы только встаете на путь продвижения с помощью gif баннеров, в нашем каталоге есть более 7 000 шаблонов баннеров для разных ниш бизнеса. Вам будет достаточно лишь изменить текст или цвет.

Креативьте и продвигайтесь в сети успешно с помощью BannerBoo. Попробуйте создать вашу первую анимацию прямо сейчас, ведь это очень просто!

Как сделать анимированный gif-баннер в Canva и добавить его на блог Вордпресс?

Привет! Сегодня поделюсь, как можно быстренько сделать анимированный gif-баннер в сервисе Canva и как его тут же применить, разместив на своем Вордпресс блоге в сайдбаре.

Большинство своих баннеров я делаю именно в Канве и ранее записывала урок по созданию статического баннера и баннерной рекламе. А в этой статье рассмотрим именно двигающийся гиф-баннер.

Рассмотрим 2 варианта его реализации в сервисе Canva:

— добавление готовых анимированных элементов на баннер,
— вначале делаем обычный статический баннер нужного размера, затем придаем ему анимированный эффект.

По итогам, сохраняем баннер в формате gif, загружаем в медиафайлы на сайт Вордпресс и размещаем баннер со ссылкой в сайдбаре (боковой колонке) через специальный html-код и виджет.

Вот обо всем этот по порядку в статье.

А для тех, кто предпочитает наглядность, оставлю свой видеоурок по теме:

Создаем баннер по нужным размерам и добавляем на него анимированные элементы

Для этого нужно перейти и авторизоваться (новым пользователям зарегистрироваться) в сервисе canva.com.

При входе вам могут предложить протестировать версию PRO бесплатно 30 дней и ввести данные платежной карты. Но в большинстве случаев достаточно обычного бесплатного тарифа, поэтому данное предложение можно пропустить, закрыв крестиком.

На главной странице вверху нажимаем «Создать дизайн» — «Настраиваемые размеры».

Указываем желаемые размеры баннера – ширину и высоту. Я для сайдбара своего блога сделаю баннер размером 240х400 пикселей. Жмем «Создать дизайн».

И попадаем в редактор.

По центру у нас белый холст, сбоку слева – готовые шаблоны. За основу и в качестве идей можно взять их, редактируя под себя.

Кстати, здесь можно найти и уже готовые анимированные шаблоны, они помечены вот таким значком:

Также при наведении мышкой, если шаблон бесплатный, вы увидите пометку «беспл.», так как есть и платные варианты с водяным знаком.

Кроме того, можно с нуля наполнять свой холст, используя инструменты на панели слева – фон, текст, элементы и т.д.

То же самое – бесплатные элементы будут с пометкой «беспл. ».

Плюс есть возможность загружать свои картинки, в том числе анимированные (gif) и использовать их в баннере. Загрузка своих картинок производится в разделе «Загрузки».

Загруженная гифка отобразится в подразделе «Видео» — нажатием левой кнопкой мыши ее можно добавить на свой холст, перемещать и ползунками по краям менять размер.

Можно подключить и встроенную библиотеку гифок — Gify. Чтобы ее подключить, на панели слева нажимаем «Еще» — там где «Приложения и интеграциях» выбираем Giphy.

Я часто применяю комбинированный вариант – беру готовый шаблон за идею, затем меняю цветовое решение под цвета, которые используются на рекламируемой странице (в обложке продукта) и добавляю нужные мне элементы.

Для примера остановлюсь на таком шаблоне:

Баннер буду делать под свой бесплатный курс по привлечению трафика на страницу подписки. Вот этот:

В этих цветах и буду оформлять свой баннер.

Чтобы шаблон применился к холсту, кликаем на него левой кнопкой мыши.

Чтобы удалить лишние элементы на холсте, выделяем ненужное мышкой – кликаем по иконке корзины справа или жмем кнопку «Delete» на клавиатуре.

Чтобы отредактировать имеющийся текст, выделяем этот элемент и вписываем свой. Инструменты форматирования текста – шрифт, размер, цвет, эффекты и прочее доступны на панели вверху.

Если требуется добавить новый текст, используем одноименный инструмент на панели слева.

Иногда элементы на шаблоне сгруппированы, чтобы разъединить их и править по отдельности, нажимаем сбоку «Разгруппировать».

Чтобы изменить цвет фоновых элементов, выделяем мышкой и на панели вверху меняем цвет.

Кроме цвета, к основному фону холста можно применить заготовки из раздела «Фон».

Или даже видеофон из раздела «Видео». Чтобы применить, ухватите видео левой кнопкой мыши и перетащите на ваш фон.

Чтобы добавить анимированные элементы на баннер, можно перейти в раздел «Элементы» — «Стикеры» и подобрать подходящий вариант.

Либо, как уже писала выше, загрузить свою gif-картинку, подключить библиотеку гифок…

Находить изображения можно и в строке поиска по ключевым словам: по-русски или по-английски. Использовать библиотеку «Фото». А также раздел «Элементы» — там кроме анимированных изображений есть статические — линии, фигуры, градиенты, иллюстрации, значки и многое другое, что можно интересно обыграть на баннере.

В моем варианте будут сочетаться статические элементы и анимированная картинка из встроенной библиотеки Канвы.

Чтобы добавить элемент – я просто кликаю на него на панели слева, он помещается на холст, и дальше ползунками я регулирую его размер и перетаскиваю курсором в нужное место.

Чтобы изменить расположение элементов, к примеру, анимированный элемент я хочу переместить на задний план, выделяю его мышкой, жму справа вверху «Расположение» и выбираю «Назад».

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

Вот такой баннер в движении получился у меня:

Задаем анимированный эффект статическому баннеру

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

Я сделала вот такой простенький статичный баннер и хочу его немного анимировать. Для этого вверху нажимаю «Анимация».

И выбираю эффект (нажав на тот или иной вариант, можно посмотреть результат). Те эффекты, которые помечены желтой коронкой, доступны на платном PRO тарифе.

Бесплатно доступно не так много эффектов, но выбрать интересный можно + задать продолжительность показа (через какой промежуток, анимация будет повторяться). По умолчанию 5 секунд.

Чтобы задать время повторения анимации, кликаем по цифре и указываем свое значение – например, я поставлю 6,5 секунд.

Вот, как выглядит баннер с эффектом:

Как скачать баннер в gif-формате?

Когда наш баннер с анимацией готов, его нужно скачать в формате gif. Нажимаем справа «Скачать», выбираем формат. Еще раз жмем «Скачать». По умолчанию картинка сохраняется в папку с загрузками на компьютере.

Как разместить баннер на блоге Вордпресс?

Алгоритм по шагам:

1. Заходим в консоль сайта, загружаем баннер в медиафайлы и копируем на него ссылку:

2. Подготавливаем ссылку, которую хотим добавить в баннер. У меня это ссылка на страницу подписки с бесплатным курсом. Чтобы отслеживать подписки, я ставлю на страницу Яндекс. Метрику, настраиваю цели и делаю utm-метку. Подробнее об этом тут.

Если ссылка партнерская, то метку или спец. партнерский код можно настроить в партнерском кабинете.

Также можно сократить рекламную ссылку своим доменом в плагине-маскировщике ссылок (для учета кликов). Об одном таком русскоязычном плагине я писала здесь. Есть англоязычный бесплатный аналог – Pretty Links.

3. Далее нам понадобится вот такой код для вставки баннера:

<center><a href="Рекламируемая ссылка" target="_blank" rel="nofollow"><img src="URL картинки"/></a></center>

— вместо текста «Рекламируемая ссылка» между кавычками размещаем ссылку, которая ведет с баннера.
— вместо текста «URL картинки» – между кавычками размещаем ссылку на баннер, который предварительно загрузили в медиафайлы (см.пункт 1).

*удобно все манипуляции с кодом перед добавлением на сайт делать в обычном txt-блокноте или в блокноте Notepad++.

4. Теперь в консоли сайта Вордпресс заходим в раздел «Внешний вид» — «Виджеты», выбираем виджет «html-код» и перетягиваем его левой кнопкой мыши в сайдбар (боковую колонку). Вставляем в содержимое код нашего баннера и сохраняем.

Если в боковой колонке уже есть какие-то элементы – например, рубрики, поиск и т.д., то вы можете передвигать виджеты и разместить баннер в промежутке между тем или иным виджетом.

Важно: после добавления баннера – он не сразу может отобразиться на сайте. Причина – кеш браузера. Чтобы увидеть изменения – откройте ваш сайт в браузере из режима инкогнито. В Гугл Хроме – это делается нажатием на три вертикальные точки сбоку справа.

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

Буду рада, если информация вам пригодилась!

И задавайте вопросы, если что.

Виктория

Создание анимированных баннеров GIF с помощью Creatopy

Шаблоны

Настраиваемые шаблоны GIF

Выберите и настройте любой шаблон, статический или анимированный, с высококачественными фотографиями, видео, иллюстрациями, значками и другими элементами из нашей библиотеки , а также создавать анимированные GIF-баннеры, соответствующие бренду. Если вы выберете статический шаблон, вы можете превратить его в анимированную GIF-рекламу всего за несколько кликов с помощью Magic Animator.

Начать бесплатную пробную версию

дизайн и редактирование

Как сделать баннер GIF

Начать бесплатную пробную версию

• Выберите шаблон

  Просмотрите наши шаблоны и выберите статический или анимированный баннер GIF или создайте его с нуля, выбрав предопределенный размер из нашей библиотеки.

• Настройте свой баннер

  Отредактируйте любой баннер в соответствии с вашими потребностями или превратите статическую рекламу в анимированную рекламу несколькими щелчками мыши. Измените любой элемент и создайте привлекательную рекламу в формате GIF.

• Создание нескольких размеров

  Мгновенное создание баннеров различных размеров с помощью нашего инструмента изменения размера и одновременное редактирование всех объявлений GIF всякий раз, когда вам нужно внести изменения.

• Экспортируйте свои баннеры

  Загрузите анимированную рекламу в виде высококачественной рекламы в формате GIF и используйте ее в популярных рекламных сетях и социальных сетях.

Мне нравится, когда все члены нашей команды находятся в одном пространстве, где мы можем совместно работать над творческими активами. Хорошо, что мы можем импортировать активы нашего собственного бренда в платформу.

Эрик Джексон-Саркани, стратег по формированию спроса
—

Д2Л

Наборы дизайнов могут сэкономить ваше время, а пакетное создание с помощью CSV очень интересно. Быстро создавать рекламу и размещать ее в социальных сетях. Он объединяет таких партнеров, как Shutterstock.

Винсент Морин, соучредитель
—

Panja.io

Возможность создавать баннеры в разных форматах в мгновение ока, изменяя разрешение и перемещая объекты. Доступные шаблоны являются современными.

Джорджио Руссо
—

Байтовый проект

Предыдущий

Следующий

функции

Все в одном Создатель GIF-баннеров

Автоматизируйте создание рекламы, работайте вместе с членами вашей команды и настраивайте рекламу GIF до мельчайших деталей.

Начать бесплатную пробную версию

Генератор баннеров

Сократите творческий процесс и мгновенно создавайте рекламные GIF-файлы различных размеров с помощью генератора баннеров. Редактируйте все элементы на всех баннерах одновременно.

Стоковые видео

Найдите в библиотеке высококачественных видео и выберите то, которое подходит для вашего рекламного GIF. Используйте панель поиска и параметры фильтра, чтобы сузить область поиска.

Плавный монтаж видео

Анимация всех элементов баннера с помощью пресетов анимации. Отредактируйте их и свое видео, используя временную шкалу, чтобы настроить баннер с плавными переходами.

Соответствие бренду

Обеспечьте единообразие на всех платформах, загружая свои активы в набор брендов, доступный для всех членов вашей команды прямо из их рабочего пространства.

Предопределенные размеры баннеров

Каждый раз получайте правильные размеры для ваших анимированных GIF-файлов, начиная с предопределенного размера. Приведите свои онлайн-объявления в формате GIF в соответствие со всеми требованиями популярных рекламных платформ.

Показ рекламы

Доставляйте ваши GIF-объявления прямо в нужную рекламную сеть независимо от размера и формата файла. Вносите изменения в живую рекламу в режиме реального времени. Не требуется повторная загрузка.

из нашего блога

Вдохновение для дизайна

Примеры GIF для электронной почты

Узнайте, как выделить анимированные электронные письма в папке «Входящие», привлечь клиентов и мотивировать их на определенные действия, такие как заполнение формы, покупка продукта или посещение событие.

Читать статью

Изменение размера GIF-файлов

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

Читать статью

Электронный GIF-маркетинг

Узнайте о преимуществах анимированных элементов электронной почты, о том, как создавать анимированные GIF-файлы и вставлять их в электронные письма, а также о том, какой идеальный размер для GIF-подписи электронной почты.