Редактор: Обзор основных элементов редактора
Схема интерфейса редактора
В данном разделе расскажем про основные блоки панелей инструментов:
- верхнюю панель инструментов;
- левое меню добавления объектов;
- холст;
- правое меню настройки объектов и списка слайдов;
- нижнюю панель инструментов.

Верхняя панель инструментов
На этой панели находятся основные инструменты настройки работы, такие, как “название креатива”, его размер, выбор формата анимация/статика. Кнопки сохранить, скачать и поделиться. Здесь же найдете колокольчик оповещений, настройку личного кабинета и кнопку “Выход”.
Для удобства на верхнем тулбаре, в самом центре, есть кнопки “Отменить”, “Повторить”, “Скопировать”, “Вставить”.
Для удобства на верхнем тулбаре, в самом центре, есть кнопки “Отменить”, “Повторить”, “Скопировать”, “Вставить”.

Левое вертикальное меню добавления объектов
Здесь находятся наши библиотеки объектов. И именно здесь вы можете загрузить свои фотографии, видео, шрифты, аудио и другие объекты для работы над креативом.

Холст
Холст - это основная область для работы. Сюда добавляются объекты из левого вертикального меню и редактируются непосредственно в поле холста, или с помощью правого меню.

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

Нижняя панель инструментов
Если работать в режиме анимации, то нижнее меню будет содержать полосу прокрутки видеоролика и шкалу регулировки громкости. Ниже, в правой стороне тулбара, расположен ползунок для масштабирования холста и кнопка переключения в режим презентации.

Верхняя панель инструментов
В данном разделе мы расскажем о верхней панели инструментов редактора SUPA, для удобства мы условно разделим ее на три части.
Левая часть содержит дополнительное меню и поле с названием вашего креатива.
Инструменты центральной части позволяют изменить размер холста, отменить или повторить действие, скопировать и вставить, а еще - выбрать формат вашего креатива (видео или изображение).
Справа вы найдете кнопку для сохранения креатива, колокольчик оповещений, настройки вашего профиля и команды, кнопку выхода из программы.
Левая часть содержит дополнительное меню и поле с названием вашего креатива.
Инструменты центральной части позволяют изменить размер холста, отменить или повторить действие, скопировать и вставить, а еще - выбрать формат вашего креатива (видео или изображение).
Справа вы найдете кнопку для сохранения креатива, колокольчик оповещений, настройки вашего профиля и команды, кнопку выхода из программы.

Дополнительное меню
При нажатии на три полоски в верхнем левом углу открывается дополнительное меню, с помощью которого можно вернуться в раздел “Мои креативы”, а также использовать дополнительные инструменты и опции.

Разберем подробно дополнительное меню:
- Мои креативы. Открывается раздел с креативами, созданными вами ранее. Подробное описание этого раздела - здесь.
- Шаблоны. При выборе этого пункта, вы попадете в раздел Создать, где идет выбор первичных характеристик нужного вам креатива.
- Обучение. Здесь можно посмотреть подробный видеокурс по нашему редактору и детально изучить все возможности. Еще - откроется доступ к нашему сообществу в ВК, где мы регулярно выкладываем посты с новыми уроками и скринкастами.
- Инструменты. В этом разделе находится плагин для Figma. Если ваш макет подготовлен в графическом редакторе Figma, теперь его можно просто перенести в SUPA.
- Лендинг. Здесь можно создавать лендинги и мультиссылки, при нажатии на кнопку - откроется дополнительное меню с опциями: предпросмотр, опубликовать, шаблоны лендингов и обучающий урок.
- Авторам шаблонов. Если вы создаете классные ролики и хотите поделиться ими с другими пользователями SUPA, то обязательно загляните в этот раздел.
- Добавить. Через дополнительное меню можно быстро добавить текст, фигуры, линии и стрелки. Альтернатива: для вставки текста используйте клавишу “Т”, прямоугольника — клавишу “R”, круга — “C”, а линии — “L”.

- Скачать креатив. При нажатии открывается панель для настройки скачивания вашего креатива.
- Направляющие. Для точного размещения объектов на холсте или для проведения ровных линий можно использовать направляющие. Дополнительное меню предлагает три варианта на выбор: “Холст”, “Холст и объекты” или выключить направляющие.
- История. Открывается панель с историей сохранений вашего креатива.
- Поделиться. При нажатии открывается панель с доступом к вашему креативу. Как поделиться, выбрать права или скопировать ссылку, смотрите - здесь.
- Копировать выделенное. Эта функция в дополнительном меню позволяет копировать выделенный объект или группу объектов. Альтернатива - универсальная команда, сочетание горячих клавиш Ctrl + C для Windows и Command (⌘) + C для macOS.
- Вставить. Используем для вставки вырезанного или скопированного. Альтернатива - универсальная команда, сочетание горячих клавиш Ctrl + V для Windows и Command (⌘) + V для macOS.
- Вырезать. При нажатии вырезается выбранный объект в буфер обмена. Альтернатива - универсальная команда, сочетание горячих клавиш Ctrl + X для Windows и Command (⌘) + X для macOS.
- Отменить действие. Используем, чтобы быстро отменить действие, вернуться к предыдущему. Также можно нажать сочетание горячих клавиш Ctrl + Z для Windows и Command (⌘) + Z для macOS, или использовать кнопку отмены в центре верхней панели инструментов.
- Повторить. Жмем, если нужно повторить отмененное действие. Альтернатива - универсальная команда, сочетание горячих клавиш Ctrl + Shift + Z для Windows и Shift + Command (⌘) + Z для macOS. Кнопка “Повторить действие” также находится в центре верхней панели инструментов.
Название креатива
Чтобы присвоить название или переименовать креатив - нажмите на поле в верхней панели инструментов, рядом с дополнительным меню (три горизонтальных полоски).

Размер холста
Чтобы открыть полное меню для изменения размера холста, нужно нажать кнопку “Размер” в центре верхней панели. Меню откроется слева экрана, там будет список доступных вариантов изменения холста. Подробное описание меню смотрите - здесь.

Выбор видео/изображение
Для выбора формата видео - кликните на чекбокс возле слова “Анимация” в центральной части верхней панели тулбара.

Чтобы работать с изображением без анимации - кликните на чекбокс (уберите галочку). На экране появится окно с просьбой подтвердить ваши действия.

Сохранение креатива, “Скачать” и “Поделиться”
Чтобы сохранить ваш креатив - нужно нажать на кнопку “Сохранить” в правой части верхней панели инструментов. Изменения в креативе сохраняются автоматически, однако это можно сделать самостоятельно.
В SUPA записывается история версий и вы можете вернуть креатив к любой из них. Узнать, как это сделать, можно здесь.
В SUPA записывается история версий и вы можете вернуть креатив к любой из них. Узнать, как это сделать, можно здесь.

После первого сохранения креатива появятся опции “Скачать” и “Поделиться”.


Настройки профиля и команды
Чтобы попасть в свой профиль, нужно нажать на “шестеренку” в правой части верхней панели инструментов.

Откроется страница настроек, где можно изменить пароль и создать команду.

Меню добавления объектов
Слева расположилось "Меню добавления объектов". В этой области находятся разделы, которые содержат в себе готовые элементы для добавления на холст, а также раздел "Загрузить", в котором вы можете загрузить файлы с компьютера в редактор.

Холст
В этом разделе разберем основную область для работы - холст.
Основные настройки холста, такие, как размер и режим статика/анимация выполняются с помощью верхнего тулбара. Там же присваивается название креативу.
Добавляются объекты на холст из левого вертикального меню, а редактируются в правом или в поле самого холста.
Масштабирование холста и переключение в режим презентации - находятся на нижней панели инструментов справа. Если вы работаете с видео креативом, то в центре нижнего меню вы найдете полосу прокрутки видеоролика и шкалу громкости.
Основные настройки холста, такие, как размер и режим статика/анимация выполняются с помощью верхнего тулбара. Там же присваивается название креативу.
Добавляются объекты на холст из левого вертикального меню, а редактируются в правом или в поле самого холста.
Масштабирование холста и переключение в режим презентации - находятся на нижней панели инструментов справа. Если вы работаете с видео креативом, то в центре нижнего меню вы найдете полосу прокрутки видеоролика и шкалу громкости.

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

Нижняя панель инструментов
При работаете с видео креативом, в центре меню находится полоса прокрутки видеоролика и шкала громкости. Если холст в режиме изображения, то они отсутствуют.

В самом низу, в правой стороне, находятся инструменты изменения масштаба холста и кнопка переключения в режим презентации.

Подобрать подходящий масштаб для работы можно несколькими способами:
- двигать мышкой ползунок шкалы;
- выбрать нужный размер из предложенного списка;
- кликать левой кнопкой мыши на значки “+” или “-”;
- выбрать в списке функцию “Уместить холст”.
Быстрые действия
При выделении объекта рядом с ним появляется меню “Быстрые действия”. Это набор кнопок, которые предлагают вам быстрый и простой способ доступа к определенному набору действий.
Инструменты меню “Быстрые действия” меняются в зависимости от выбранного на холсте объекта.
Инструменты меню “Быстрые действия” меняются в зависимости от выбранного на холсте объекта.


В меню “Быстрые действия” есть правая крайняя кнопка с тремя точками — это “Все действия” — при нажатии на которую открывается контекстное меню выбранного объекта.
