google web designer обучение

18.12.202326.07.2023 admin 0 Comments

Как создать анимированные баннеры в Google Web Designer

С помощью бесплатного сервиса Google Web Designer можно создать анимированные HTML5-баннеры для рекламы даже без опыта в дизайне. Чем хороши анимированные объявления и как с помощью Web Designer создать такой баннер для КМС с нуля, рассказал автор блога SeoPulses Ильхом Чакканбаев.

Google Web Designer — это бесплатный инструмент от компании Google, позволяющий создавать баннеры стандарта HTML5 и CSS3. Сегодня я расскажу, как начать работать в Google Web Designer и создать там первый свой баннер для рекламы в КМС.

Что такое HTML5-баннеры

HTML5 баннеры — это анимированные баннеры, которые используются во многих рекламных системах, в том числе Яндекс.Директ, Google Ads, «ВКонтакте» или Facebook. Их основные преимущества:

адаптированы под все браузеры: благодаря использованию HTML-разметки могут показываться во всех браузерах;

подходят для любого типа устройства;

относительно малый вес: в отличие от Flash HTML5-баннеры весят заметно меньше, поэтому при их загрузке страницы не тормозят и не грузятся долго;

в них легко интегрировать несколько кнопок или элементов;

будут поддерживаться в дальнейшем: практически все компании, разрабатывающие браузеры (в частности Google, Mozilla, Apple и другие) отказываются от Flash-технологии и переходят на HTML5.

Пример HTML5-баннера

Начало работы

Чтобы использовать Google Web Designer, необходимо сначала скачать его с сайта.

После скачивания и установки приложения на компьютер можно:

создать новый баннер с чистого листа;

создать баннер по шаблону.

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

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

App Install — шаблон для привлечения установок приложений;

Banner for Google Ads and AdMob — баннер для Google Ads и AdMob;

Demonstration — креатив с интерактивными элементами;

Dynamic remarketing for Google Ads — специальный формат для динамического ремаркетинга в Google Ads;

Expandable — объявление с двумя размерами: исходным и увеличенным; исходный подходит для рекламного места стандартного баннера, а больший — выходит за его границы, раскрывается автоматически или после нажатия или прокручивания. Такой формат показывает один большой баннер и несколько маленьких, подойдет для продвижения акции: можно указать несколько товаров, участвующих в ней;

Floating — формат только для показа на десктопах;

In-stream video — показывает видео вместо стандартного баннера;

Lightbox — универсальный формат, подходит как для видео, так и для изображений, продвигающих товары;

Rising star — формат с интерактивным эффектом;

Swirl for Display & Video — креативный формат с использованием 3D-моделей.

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Google Web Designer: пошаговая инструкция по созданию HTML5 баннеров

Google Web Designer — это бесплатный софт для веб-дизайнеров, позволяющая создавать баннеры и страницы в стандарте HTML5 и CSS3.

Что такое HTML5 баннеры?

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

Пример HTML5 баннера (из пошаговой инструкции)

Шаблоны в Google Web Designer

При создании баннера будет предложено:

Среди доступных шаблонов:

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

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

При нажатии на кнопку «Предпросмотр» появляется возможность подобрать другой размер для данного шаблона и при необходимости открыть пример в браузере (например, Google Chrome).

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

Инструкция по созданию баннеров HTML5 в Google Web Designer

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

Мы будем использоваться баннер 300*600 пикселей, для чего потребуется в блоке «Свойства» изменить соответствующие поля.

После в блоке «Библиотека объектов» загрузим все составные части для нашего проекта это:

Для этого кликаем правой клавишей мыши и выбираем «Добавить объект».

После загружаем все необходимые части.

Далее расставляем составные части по нужным местам (при необходимости изменяя их размеры, через «Свойства»).

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

В итоге получаем такой баннер.

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