Ручная сборка нескольких HTML5-ресайзов обычно не вызывает проблем. Два, три или пять форматов можно сделать без серьёзных потерь по времени. Но когда кампания включает десятки размеров и несколько площадок размещения, трудозатраты кратно возрастают.
В этой статье разберём, как создать сет анимированных HTML5-ресайзов без знания кода — от мастер-макета до выгрузки готовых баннеров под программатик-площадки в deaz.io. Следуя шагам из этого гайда, вы сможете собирать сотни HTML5-баннеров так же легко и быстро, как обычную статику.
Начните с мастер-макета
Создание HTML5-сета начинается с мастер-макета. В нём задаётся композиция будущего баннера. В deaz.io мастер-макет можно создать разными способами, в зависимости от привычного процесса команды.
1. Конструктор deaz.io
Если вы хотите начать с чистого листа, мастер-макет можно собрать во внутреннем конструкторе. Вам не нужно заранее знать все размеры и требования площадок. Достаточно нажать кнопку Create — New Ad и выбрать формат из библиотеки с более чем 190 размерами, найти нужный через поиск или задать параметры вручную.
Как только вы выберете желаемый размер, вы окажетесь в рабочей области с множеством инструментов для создания баннера. Вы можете добавлять изображения, Lottie-анимации, иллюстрации, фирменные шрифты, а также пользоваться всеми ассетами, которые уже есть в библиотеке deaz.io.
2. Загрузка готового макета
Если дизайн уже подготовлен в другом графическом редакторе, мастер-макет можно просто загрузить в deaz.io. Такой сценарий хорошо подходит командам, которые не хотят менять привычный процесс и предпочитают работать с Figma или Photoshop.
Фреймы из Figma и PSD-файлы импортируются со всеми слоями, поэтому макет можно редактировать внутри deaz.io — менять шрифты, текст, любые элементы баннера.
Добавьте анимацию
После того как мастер-макет готов, вы можете добавить анимацию в пару кликов. В deaz.io доступны готовые пресеты, а если требуется более точная настройка, можно работать с таймлайном: менять порядок слоёв, корректировать длительность и эффекты, управлять тем, как элементы появляются и исчезают.
Ключевой момент в том, что анимация настраивается один раз, на уровне мастер-макета. Дальше она используется при генерации всего HTML5-сета и адаптируется под разные размеры вместе с макетом, а не пересобирается вручную для каждого формата.
Выберите размеры и создайте сет
На этом этапе из одного баннера начинает складываться полноценный сет. Когда макет и анимация готовы, можно сгенерировать все необходимые размеры и подготовить HTML5-креативы для разных площадок.
В deaz.io это делается через инструмент Resize. Размеры можно задать вручную, добавляя нужные форматы по одному, или выбрать готовый шаблон под конкретную площадку, например, сразу набор для Яндекс Директ.
После выбора размеров запускается генерация сета. Перед этим система предлагает настроить ориентации — горизонтальную, вертикальную и квадратную, а также добавить узкие форматы. На их основе система автоматически сформирует все остальные размеры.
Обязательно сохраните получившийся сет. Его можно открыть и при необходимости вручную доработать отдельные баннеры, не пересобирая всё с нуля.
Вот и все — простой способ избежать трудоемкой сборки анимированных HTML5-ресайзов. Остался только один шаг, и вы сможете выгрузить свой сет под нужные рекламные площадки.
Выгрузите HTML5-баннеры под программатик-платформы
Когда сет готов и сохранён, остаётся выгрузить баннеры для размещения. Для этого нажмите кнопку Export и выберите формат HTML5. В deaz.io доступны пресеты экспорта для 30+ программатик-платформ, с уже настроенными параметрами под технические требования конкретных систем.
Перед выгрузкой можно заранее оценить вес баннеров с помощью функции Calculate, чтобы убедиться, что они укладываются в ограничения рекламных площадок. На этом же этапе при необходимости задаётся кликабельная ссылка: она автоматически применяется ко всем баннерам в сете. Также можно конвертировать шрифты в SVG, чтобы избежать проблем с отображением на стороне площадки.
Знание кода совершенно не нужно — deaz.io создаст готовые к размещению HTML5-архивы автоматически.
Заключение
Надеемся, этот гайд помог показать, что работа с анимированными HTML5-сетами не обязательно должна быть утомительной и сложной. В deaz.io этот путь можно пройти без знания кода и ручной сборки десятков форматов.
