Создание баннера в Alight Motion начинается с правильного выбора разрешения проекта: если задать холст 1080×1920 вместо нужного горизонтального формата, готовый баннер придётся пересобирать заново, потому что анимация ключевых кадров привязана к пропорциям сцены. Поэтому первое действие при открытии приложения — не импорт картинок, а настройка параметров проекта под площадку, где баннер будет показываться.
В этом руководстве разберём весь цикл работы: от создания проекта и подготовки слоёв до анимации, эффектов и экспорта. Материал подходит для версий Alight Motion на Android и iOS — интерфейс в них практически идентичен, хотя расположение отдельных кнопок может немного отличаться в зависимости от версии приложения.
Создание проекта и настройка холста
Откройте приложение и нажмите кнопку + на главном экране. Появится окно создания проекта, где задаются три ключевых параметра: разрешение, частота кадров и фон. Для баннера в сторис подойдёт вертикальный формат 1080×1920, для шапки сообщества или рекламного блока — горизонтальный 1920×1080 либо квадрат 1080×1080.
Частоту кадров для простых баннеров обычно оставляют 30 fps — этого достаточно для плавной анимации текста и картинок. Фон лучше сразу выбрать однотонным или градиентным: прозрачный фон усложняет контроль композиции на этапе сборки. Длительность проекта для баннера обычно держат в пределах 5–15 секунд — этого хватает, чтобы показать оффер и призыв к действию.
⚠️ Внимание: изменить разрешение проекта после начала работы можно, но пропорции элементов при этом «поплывут» — текст и изображения придётся выравнивать заново. Определитесь с форматом до добавления слоёв.
Подготовка и импорт материалов
Прежде чем собирать баннер, подготовьте исходники: логотип, фоновое изображение, картинки товара. Импорт выполняется через кнопку + на таймлайне → пункт Медиа (Image & Video). Файлы добавляются из галереи устройства, поэтому заранее сохраните их в отдельную папку, чтобы не искать среди сотен фотографий.
Для изображений с прозрачным фоном используйте формат PNG — Alight Motion корректно сохраняет альфа-канал, и логотип ляжет на фон без белой рамки. JPEG подойдёт только для полноэкранных фонов, где прозрачность не нужна.
- 🖼️ Фон — крупное изображение в разрешении не ниже холста проекта
- 🏷️ Логотип — PNG с прозрачным фоном
- 📦 Фото продукта — желательно вырезанное по контуру
- 🔤 Шрифтовые пары — заголовочный и текстовый, не более двух на баннер
Работа со слоями: основа композиции
Alight Motion построен на слоях, как профессиональные редакторы: каждый элемент баннера — отдельный слой на таймлайне. Порядок слоёв определяет перекрытие: верхний слой закрывает нижние. Типичная структура баннера снизу вверх выглядит так: фон → декоративные фигуры → изображение продукта → текст → логотип.
Чтобы добавить текст, нажмите + → Текст и введите содержимое. Размер, шрифт, цвет и межбуквенный интервал настраиваются в панели свойств слоя. Для фигур (плашки под текст, круги, полосы) используйте пункт Фигуры — векторные элементы можно свободно масштабировать без потери качества.
Длинное нажатие на слой позволяет переименовать его. Когда в проекте больше пяти-шести слоёв, подписи вроде «заголовок», «плашка», «лого» заметно ускоряют навигацию и уменьшают риск анимировать не тот элемент.
Анимация: ключевые кадры и движение
Анимация в Alight Motion строится на ключевых кадрах: вы задаёте состояние объекта в начальный и конечный моменты, а программа просчитывает промежуточные положения. Чтобы создать анимацию, выделите слой, откройте раздел Перемещение и трансформация (Move & Transform) и нажмите иконку ромба — появится первый ключевой кадр.
Дальше переместите курсор таймлайна вперёд, измените позицию, масштаб или прозрачность объекта — второй ключевой кадр добавится автоматически. Классическая схема появления элементов баннера: сначала «выезжает» фоновая плашка, затем с задержкой в полсекунды появляется заголовок, следом — описание и кнопка призыва к действию.
☑️ Базовая анимация баннера
За характер движения отвечают кривые скорости (easing). Линейное движение выглядит механически; для баннеров лучше подходят плавное ускорение в начале и замедление в конце. Настройка находится в разделе кривых между ключевыми кадрами — точные названия пресетов зависят от версии приложения.
⚠️ Внимание: не анимируйте все элементы одновременно и одним способом. Когда весь баннер «летит» сразу, зритель не успевает считать иерархию — сначала главное, потом второстепенное.
Эффекты и оформление
Раздел Эффекты (Effects) открывается по кнопке на выделенном слое. Для баннеров чаще всего применяют тени, свечение, размытие фона и цветокоррекцию. Эффекты добавляются стеком: один слой может нести несколько эффектов, и их порядок влияет на результат.
Тень под текстом повышает читаемость на пёстром фоне — это самый практичный эффект для баннеров. Размытие (Blur) удобно для приглушения слишком детализированного фонового фото. Свечение используйте дозированно: оно хорошо работает на кнопке призыва к действию, но перегруженный свечением баннер выглядит дёшево.
| Эффект | Назначение в баннере | Куда применять |
|---|---|---|
| Тень (Drop Shadow) | Отделение текста от фона | Заголовки, кнопки |
| Размытие (Blur) | Приглушение фона | Фоновое изображение |
| Свечение (Glow) | Акцент на элементе | Логотип, призыв к действию |
| Градиент | Оформление плашек и фона | Фигуры, фон |
| Цветокоррекция | Единый тон картинок | Фото продукта |
Как сделать бегущую строку или бесконечное движение
Создайте текстовый слой, вынесите его за край холста, поставьте ключевой кадр, затем переместите курсор в конец таймлайна и протащите текст за противоположный край. При линейной кривой скорости получится равномерная бегущая строка. Для бесшовного цикла продублируйте текст и расположите копии вплотную друг за другом.
Экспорт готового баннера
Когда анимация готова, нажмите иконку экспорта (стрелка вверх) в правом верхнем углу. Доступные форматы: MP4-видео, GIF и последовательность изображений. Для соцсетей и рекламных кабинетов обычно нужен MP4, для мессенджеров и простых вставок — GIF, но учтите, что GIF не хранит звук и заметно теряет в качестве цвета.
При экспорте проверьте разрешение и частоту кадров — они должны совпадать с настройками проекта. В бесплатной версии Alight Motion на экспортируемый файл может накладываться водяной знак; это ограничение лицензии, а не ошибка проекта. Перед экспортом обязательно просмотрите весь баннер целиком на предпросмотре — рассинхрон анимаций заметен именно при полном проигрывании, а не по отдельным слоям.
Типичные ошибки новичков
Самая частая проблема — перегруженность. Новички добавляют на баннер пять-шесть анимированных элементов, три шрифта и гору эффектов, и в итоге за 5 секунд показа зритель не успевает понять смысл. Правило простое: один баннер — одна мысль, один акцент, один призыв.
Вторая ошибка — мелкий текст. Баннер смотрят с экрана смартфона, часто на ходу. Если заголовок не читается при беглом взгляде на превью таймлайна, его не прочитают и в ленте. Третья типичная проблема — отсутствие безопасных отступов: текст, прижатый к краям холста, может обрезаться интерфейсом площадки, где размещается баннер.
Частые вопросы
Можно ли делать баннеры в бесплатной версии Alight Motion?
Да, базовые функции — слои, текст, фигуры, ключевые кадры, часть эффектов — доступны бесплатно. Ограничения касаются части премиальных эффектов и шрифтов, а экспорт может сопровождаться водяным знаком. Набор ограничений зависит от актуальной версии приложения.
В каком формате экспортировать баннер для соцсетей?
Оптимальный вариант — MP4: он поддерживается практически всеми площадками, сохраняет плавность анимации и качество цвета. GIF подойдёт только там, где видео не поддерживается, но качество будет заметно ниже.
Почему анимация дёргается на предпросмотре?
Чаще всего дело не в проекте, а в производительности устройства: предпросмотр просчитывает эффекты в реальном времени. Снизьте качество предпросмотра в настройках плеера проекта или проверьте результат после экспорта — в готовом файле движение обычно плавное.
Как добавить свой шрифт в Alight Motion?
В текстовом слое откройте список шрифтов и найдите опцию импорта — приложение позволяет загрузить файлы шрифтов с устройства. Форматы и точный путь кнопки импорта могут отличаться в зависимости от версии, поэтому при затруднениях сверьтесь со справкой приложения.
Сколько слоёв можно использовать в одном баннере?
Жёсткого практического лимита для простых баннеров обычно не возникает — хватает с запасом. Однако чем больше слоёв с эффектами, тем тяжелее проект для устройства: растёт время предпросмотра и экспорта. Для баннера достаточно 5–10 продуманных слоёв.