Как создать анимированный баннер GIF для сайта онлайн

Создание баннера HTML5 с нуля в Google Web Designer

Чтобы создать баннер с нуля, при запуске программы выбираем «Создать файл».

1-8-1024x792.png

А если мы уже открыли другой файл с баннером, то необходимо кликнуть на «Файл» (левый верхний угол) и выбрать «Создать».

1-9-1024x801.png

Вводим название для будущего файла и выбираем его расположение.

Далее начинается работа с чистого листа. В первую очередь заходим в «Свойства».

 Здесь задаем размеры будущего баннера.

Затем переходим в «Библиотеку» и добавляем составные части будущего баннера: элементы и наброски, из которых будет состоять все изображение. Для примера, который указан ниже, все составные части можно скачать из папки:

https://drive.google.com/drive/folders/1Ts3QnqzGXYQi-rwbCEmb7IH6c2i93GAO?usp=sharing

Web Designer поддерживает изображения, видео и аудиофайлы.

Добавить объект можно просто, перетянув его из библиотеки.

Теперь объекты можно перемещать и изменять их размеры — для этого выделите нужный элемент и в свойствах задайте размеры.

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

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

После завершения расстановки кадров можно посмотреть итоговую работу, кликнув на «Смотреть».

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

Выбираем «Мышь — сlick».

Затем открываем вкладку «Объявление Google — Переход».

Кликаем на gwd-ad.

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

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

Аналогично можно посмотреть заданные стили CSS.

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

Чтобы скачать итоговый вариант, кликаем на «Опубликовать — Локально».

Выбираем путь для сохранения.

Созданный баннер можно скачать в zip-архиве с Google Диска:

https://drive.google.com/file/d/1BETheW3T9XHOq8w51WjqYuL4UMCUZNIF/view

А увидеть — по ссылке (отключите блокировщик рекламы, чтобы баннер отобразился).

О работе с шаблонами в Google Web Designer

Google предлагает больше десяти шаблонов под разные задачи, форматы и рекламные системы:

  • App Install — шаблон для привлечения установок приложений;
  • Banner for Display & Video 360 — формат практически для любого типа устройств;
  • Banner for Google Ads and AdMob — баннер для Google Ads и AdMob;
  • Data Driven for Display & Video 360 — формат, показывающий преимущества бренда;
  • Demonstration — креатив с интерактивными элементами;
  • Dynamic remarketing for Google Ads — специальный формат для динамического ремаркетинга в Google Ads;
  • Expandable — объявление с двумя размерами: исходным и увеличенным; исходный подходит для рекламного места стандартного баннера, а больший — выходит за его границы, раскрывается автоматически или после нажатия или прокручивания. Такой формат показывает один большой баннер и несколько маленьких, подойдет для продвижения акции: можно указать несколько товаров, участвующих в ней;
  • Floating — формат только для показа на десктопах;
  • In-stream video — показывает видео вместо стандартного баннера;
  • Interstitial & in-app — межстраничные объявления, которые всплывают над страницей на десктопе и занимают весь экран на мобильном устройстве;
  • Lightbox — универсальный формат, подходит как для видео, так и для изображений, продвигающих товары;
  • Parallax for Display & Video 360 — формат красивых объявлений с несколькими слоями, имитирующих объемную картинку, показывается на мобильных устройствах;
  • Rising star — формат с интерактивным эффектом;
  • Swirl for Display & Video — креативный формат с использованием 3D-моделей.
1-4-1-1024x653.png

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

1-5-1024x657.png

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

Теперь можно приступать к редактированию шаблона.

PosterMyWall

Уровень с нуля
Для кого подходит дизайнерам, видеографам, фрилансерам
За период по тарифам от 0 до 319,95 $/год
Преимущества безопасность данных, широкий набор инструментов, мультиязычность, тематический блог, обучающие ролики
Ссылка на сервис полная информация

Подробнее о сервисе

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

Выделим основные преимущества:

  1. Бесплатное скачивание для соцсетей.
  2. 275+ тыс. шаблонов.
  3. Более 1 млн. стоковых изображений, видеоклипов и графических элементов.
  4. Неограниченные загрузки эскизов с размерами для социальных сетей.
  5. Дополнительные возможности на платных тарифах.

Создаете анимации для размещения в Instagram? Автоматизируйте публикацию контента с помощью сервисов отложенного постинга, используйте функции публикации по времени, предпросмотра, а также следите за статистикой!

PixTeller

Уровень с нуля
Для кого подходит дизайнерам, видеографам, фрилансерам
За период по тарифам от 9 до 19 $/мес.
Преимущества есть пробный период, широкий набор инструментов, есть бот-помощник, тематический блог, видеоинструкции
Ссылка на сервис полная информация

Подробнее о сервисе

PixTeller — это простой в использовании онлайн-редактор изображений и анимаций. В нём можно создавать плакаты, анимированные gif, логотипы, фотоколлажи, флаеры и простые видео. Для каждого формата предлагается большое количество стильных шаблонов и эскизов.

Выделим основные преимущества:

  1. 100+ тыс. шаблонов.
  2. 5+ тыс. анимаций.
  3. 1,5+ млн. фотографий.
  4. Градиентные цвета.
  5. Временная шкала.
  6. Неограниченное количество графических изображений.
  7. Экспорт в форматах PNG, JPG, PDF.
  8. Пользовательские шрифты.
  9. Прозрачные фоны в PNG.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий