Визуальный редактор рекламных материалов

Введение

Визуальный редактор рекламных материалов предназначен для создания, рекламных материалов нескольких форматов. Все перечисленные ниже форматы можно создавать в одном или нескольких размерах, связанных между собой общими визуальными элементами.
  1. Изображение. Статические графические креативы.
  2. HTML5. Статические или динамические креативы, состоящие из нескольких изображений, видео, HTML и CSS кода.
  3. Видео. Динамические видео креативы создаваемые на основе HTML5 креативов и их анимаций.
Визуальный редактор имеет привычный интерфейс, напоминающий известные графические и видеоредакторы, при этом, содержит только важные функции для создания рекламных материалов.

Пошаговая инструкция

1. На шаге 4 создания рекламной кампании, под загрузкой материала, находим кнопку «Создать материал».
2. В открывшемся модальном окне, вы можете выбрать готовый шаблон или создать свой. Давайте попробуем создать рекламный материал на примере готового шаблона.
3. Наведите курсор на понравившийся шаблон и выберите его.
4. Вы попадете в раздел редактирования рекламного материала.
5. Для начала, поставим картинку заместо синего фрейма. Для этого в верхнем меню нужно нажать кнопку «Вставить» или «Изображение».
6. Выберите изображение из предложенных вариантов или загрузите свое.
При загрузке своего изображения вам необходимо иметь подтверждающий документ на использование изображения в коммерческих целях (коммерческая лицензия из фотобанка, договор с моделью, если вы снимали контент самостоятельно). Использование QR кодов также необходимо документально подтверждать — это требования рекламных конструкций, на которых будет происходить размещение.
7. Изображение появляется в небольшом размере, которое необходимо растянуть под ваши задачи. Если Вам необходимо чтобы изображение появилось в тех же пропорциях — тяните изображение за угол.
8. Изображение можно также менять другим способом. В левом меню под изображением нажимаем на вкладку «Прямоугольник», далее смотрим на правое меню и спускаемся вниз.
9. Находим раздел «Заливка» и нажимаем на «Изменить изображение».
10. Выбираем новое изображение, если это необходимо, и нажимаем «Заполнить слой». Если все устроило, то можем переходить к редактированию текста.
11. Вы можете менять текст как вам это необходимо. Просто прокликайте до слоя текста и сможете его менять. После того как вы закончили работать с макетом, необходимо его отправить на модерацию. Как это сделать – мы описали в следующих пунктах.
12. Есть возможность анимации в рекламных материалах. Для этого нажимаем на вкладку «Анимация»
13. Выбираем объект, к которому хотим сделать анимацию, например на слой «Изображение». Далее выбираем с какой секунды применить анимацию путем передвижения синий полоски.
Например, сдвинем на 1 секунду. Это значит, что изображение появится именно с этой секунды. Чтобы проиграть анимацию, нажмите в верхней панели на кнопку Play.
14. Чтобы объект появлялся или исчезал в движении или с каким-то другим эффектом, нажмите в левой панели в разделе «Показать» или «Скрыть» на иконку плюсика, чтобы добавить эффект. Нажимаем на появившееся поле и выбираем из списка тот эффект, которым хотим применить, например «Right slide + opacity». Это значит, что изображение будет появляться из прозрачности, с выездом справа налево. Нажмите еще раз Play, чтобы увидеть как это выглядит в движении.
Обратите внимание, что креатив сохраняется автоматически каждую секунду при наличии доступа в интернет, так что ручное сохранение не требуется.
15. Если креатив готов, то можете экспортировать его в вашу рекламную кампанию. Для этого, в левом верхнем углу раскрываем меню, выбираем кнопку «Выход и экспорт», файл автоматически разместиться на платформе Admarket. Возможности скачать файл к себе на компьютер не предусмотрено.

Дополнительные инструкции

  1. Добавление нового слоя. Слои — это составные части креатива. Для примера обычный баннер может содержать Фон, Главный визуал, Заголовок, Текст и Кнопку. Слои добавляются в верхней полосе визуального редактора, а полный набор можно увидеть и добавить при нажатии «+ Вставить» в верхней полосе. В левом меню редактора можно увидеть добавленный слой. Иногда он включает в себя несколько вложенных (группа слоев, компонент), а иногда он одиночный (элемент). Группу слоев в левом меню можно развернуть, нажав на стрелку «Вправо».
  2. Размещение слоя на нужной позиции. Центральная область редактора называется «Артборд». Добавленные слои отображаются на Артборде, а выбранные выделяются синей рамкой. При помощи перетаскивания мышкой или стрелок на клавиатуре можно менять позицию слоя. Если схватиться за квадрат в углах выделения, можно изменить размеры слоя.
  3. Выберите какие слои «спереди», а какие «сзади». Визуальный редактор позволяет перемещать слои не только по осям X и Y, но и по Z координате, то есть «ближе» и «дальше» от наблюдателя. Чем выше слой в перечне в левом меню, тем он выше остальных, то есть ближе к наблюдателю. Схватитесь за слой в левом меню и начните перетаскивать его вверх или вниз. Темная полоса подскажет в какую точку слой будет помещен после отпускания кнопки мыши. Таким же образом можно помещать слой в группу или вытаскивать его из них.
  4. Настройте точную позицию и размер слоя. При выбранном в левом меню слое правое меню отображает его свойства. Свойства отличаются для разных типов слоев, но у всех есть общие, такие как Позиция, Размеры и Название. Для указания точной позиции и размеров укажите значение в пикселях в полях X,Y,Ш,В. Обратите внимание, что позиция слоя считается от верхнего левого угла его родительского слоя, а если он сам находится в корне - то от верхнего левого угла текущего размера.
  5. Настройте свойства слоев «Текст», «Прямоугольник» или «Эллипс». Элементарных слоев совсем немного: Текст, Прямоугольник и Эллипс. В правом меню у текстового слоя есть блок «Текст», в котором можно выбрать или загрузить шрифт, изменить размеры шрифта, межстрочного или межбуквенного интервала, характеристики начертания (жирный, курсив, подчеркнутый итд), и характеристики выравнивания. У Прямоугольника и Эллипса же нет своего особого блока в правом меню.
  6. Настройте стили выбранного слоя. В блоке «Стили» правого меню можно придать «прозрачность» текущему слою, повернуть его или сделать скруглёнными все или некоторые его края.
  7. Выберите Заливку для слоя. В блоке «Заливка» правого меню можно заполнить выбранный слой Цветом, Градиентом (линейным, радиальным или угловым). Более того, слои можно заполнить Изображением или Видео.
  8. Измените Обводку слоя. В блоке «Обводка» правого меню можно указать толщину обводки, ее стиль (сплошная или пунктирная), ее цвет и уровень прозрачности.
  9. Добавьте Эффекты слою. В блоке «Эффекты» вы сможете добавить текущему слою Тень, Размытие или Размытие фона. После добавления эффекта можно изменить его параметры и степень влияния на слой в настройках выбранного эффекта.
  10. Примените настройки слоя к другим размерам. После указания размеров, позиций стилей и эффектов для определённого слоя, в других размерах данного баннера эти характеристики автоматически не применяются. Это сделано для того, чтобы каждый размер можно было настроить индивидуально. Однако, иногда бывает удобно быстро скопировать настройки текущего слоя, а также его дочерних слоев в другие размеры. Выберите слой в левом меню, нажмите на кнопку «Применить к размерам» сверху правого меню. Выберите размеры получатели копии свойств, сами свойства и нажмите перенести. В нижнем меню, при переходе на вкладку нужного размера вы увидите как действие повлияло на внешний вид размера креатива.
  11. Отмените внесенные изменения. В случае если внесенное изменение было ошибочным, используйте сочетание клавиш ctrl-z (cmd-z для Mac) или стрелки на плавающей панели действий снизу Артборда.
  12. Измените масштаб. Иногда креатив может быть слишком маленьким или большим для текущего размера экрана. Используйте клавиш ctrl-прокрутка мыши (cmd-прокрутка для Mac) или иконку лупы на плавающей панели действий снизу Артборда.
  13. Быстро переключитесь на дочерний слой. Часто возникает необходимость быстро сфокусироваться на слое внутри какой-то группы. Простой клик на Артборде приводит к выделению самого слоя группы, а не слоя внутри нее. Для того, чтобы быстро войти в дочерний слой, сделайте двойной клик на объекте.
  14. Исправьте текст. При выбранном в левом меню текстовом слое исправление текста осуществляется путем двойного клика по нему на Артборде.
  15. Войдите в режим настроек Анимаций. В левом меню, сверху, есть переключатель режимов работы с редактором. Выберите режим Анимации, чтобы увидеть функции управления, связанные с динамическим появлением элементов.
  16. Установите общую длительность креатива. Каждый креатив обладает какой-либо длительностью, будь то 0 секунд для статичного баннера или 5 секунд для баннера обладающего продолжительностью, сценами и событиями. В левом меню, под списком слоев, есть поле в «Общая длительность», в котором указывается время в секундах. В некоторых случаях сервис использующий визуальный редактор может ограничить возможные значения этого поля, вплоть до запрета создания длящихся креативов.
  17. Укажите момент начала отображения/скрытия слоя. В режиме «Анимации», выберите один из слоев в левом меню и перетащите ползунки на верхнем центральном блоке на нужные позиции. Этот блок называется Таймлайн и его содержимое прокручивается вместе с перечнем слоев в левом меню. Момент отображения или скрытия также можно настроить в блоке Время левого меню.
  18. Настройте анимацию для показа или скрытия слоя. Находясь в режиме «Анимации», выберите один из слоев, и снизу, в левом меню, добавьте анимацию в разделе Показать или Скрыть. Из выпадающего списка выберите одну из анимаций. Справа от выбранной анимации можно указать длительность работы этой анимации. Для одного слоя можно указать более одной анимации показа и скрытия. Для более точных настроек анимации справа, в верхней полосе есть элемент позволяющий изменять «масштаб» делений таймлайна.
  19. Проигрывание созданного креатива. Чтобы посмотреть на итоговый результат применения анимаций, слева, в верхней полосе интерфейса предусмотрены элементы управления: перемотка, запуск и остановка, а также зацикливание. Зацикливание лишь помогает в работе с анимациями и никак не влияет на полученный в результате креатив.
  20. Завершение работы. Сверху слева экрана есть логотип со стрелкой вниз, он открывает меню с разными возможностями, в числе которых есть опция сохранения и выхода.
  21. Каждый рекламный баннер может иметь один или несколько размеров (ресайзов). Для этого нажмите кнопку «+» в нижней полосе визуального редактора, выберите один из имеющихся или укажите свой. Теперь будущим компонентам креатива будет куда добавляться. В некоторых случаях сервис использующий визуальный редактор может ограничить возможность добавления размеров. В нижней полосе также можно переключать режим отображения между размерами доступными в данном креативе.
  22. Сохранение креатива. Креатив сохраняется автоматически каждую секунду работы с визуальным редактором при наличии доступа в интернет, так что ручное сохранение не предусмотрено.