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