Skip to main content

Работа с изображениями и видео

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

Добавление медиа из медиатеки​

  1. В левой панели переключитесь на вкладку "Медиатека"
  2. Кликните на нужное изображение или видео из доступных в медиатеке
  3. Медиа автоматически добавится на холст
  4. Выберите его для настройки свойств через панель свойств справа
Добавление кликом

Для добавления медиа на холст достаточно одного клика по нему в медиатеке. Элемент появится в центре холста и будет автоматически выбрано для редактирования.

Загрузка новых медиафайлов​

Если вам нужно добавить своё изображение или видео:

  1. Перейдите во вкладку "Медиатека"
  2. Нажмите кнопку "Загрузить" (фиолетовая кнопка с иконкой загрузки)
  3. Откроется модальное окно "Загрузить медиа"
  4. В модальном окне вы можете:
    • Перетащить файл в зону с текстом "Перетащите файл или нажмите для выбора"
    • Или кликнуть в зону, чтобы открыть диалог выбора файла
  5. В поле "Название медиа" введите имя для файла (опционально)
  6. Нажмите кнопку "Загрузить" для завершения загрузки
  7. Дождитесь завершения загрузки
  8. Файл появится в медиатеке и будет доступен для использования

Поддерживаемые форматы:

  • Изображения: JPG, PNG, GIF, WebP
  • Видео: MP4, WebM, MOV
Оптимизация файлов

Для лучшей производительности:

  • Размер файла до 10 МБ (максимальный размер)
  • Изображения: PNG для прозрачности, JPG для фотографий
  • Видео: короткие ролики (до 30 секунд) для быстрой загрузки
  • Разрешение не более 1920×1080 для полного экрана

Предварительный просмотр стрима на холсте​

Для удобного расположения виджетов редактор позволяет отображать изображение со стрима прямо на холсте в качестве фона.

Кнопки захвата изображения со стрима​

В нижней панели редактора (под холстом) расположены кнопки для захвата изображения со стрима:

  • Кнопка захвата скриншота (📷) — захватывает текущий кадр стрима и подменяет им фон холста
  • Кнопка захвата видеопотока (🎥) — захватывает видеопоток в реальном времени и отображает его на холсте

Как использовать захват скриншота​

  1. Убедитесь, что стрим активен и виджет подключен к OBS
  2. Нажмите кнопку 📷 в нижней панели редактора
  3. Холст подменится на изображение текущего кадра со стрима
  4. Теперь вы можете видеть стрим в фоне и размещать виджеты поверх него
  5. Это позволяет точно позиционировать элементы относительно происходящего на стриме

Как использовать захват видеопотока​

  1. Убедитесь, что видеопоток активен
  2. Нажмите кнопку 🎥 в нижней панели редактора
  3. Холст подменится на видеопоток со стрима в реальном времени
  4. Вы будете видеть живое изображение стрима на фоне холста
  5. Размещайте виджеты в нужных местах, наблюдая за стримом в реальном времени
Удобное позиционирование

Функция захвата изображения со стрима позволяет модераторам точно размещать виджеты, видя реальную картинку стрима. Это особенно полезно когда нужно расположить текст или изображения так, чтобы они не закрывали важные части экрана стримера.

Важно

Захваченное изображение или видеопоток используются только как фон для редактора и не добавляются в медиатеку. Это временная подмена холста для удобства работы.

Работа с изображением на холсте​

Выбор изображения​

  • Кликните на изображение на холсте
  • Или выберите его из списка "Слои" в левой панели

Перемещение и изменение размера​

  • Перетаскивание: кликните и удерживайте изображение, затем переместите
  • Изменение размера: используйте угловые маркеры при выбранном изображении
    • Пропорциональное изменение (по умолчанию) — пропорции сохраняются
    • Свободное изменение — зажмите Shift во время перетаскивания углового маркера, чтобы изменять размер без сохранения пропорций
  • Точные значения: используйте панель "ТРАНСФОРМАЦИЯ" в правой панели для задания ширины и высоты отдельно

Поворот​

В разделе "ТРАНСФОРМАЦИЯ":

  • Измените значение "ROT" (Rotation) в градусах
  • Положительные значения — поворот по часовой стрелке
  • Отрицательные значения — поворот против часовой стрелки

Настройка свойств изображения​

Позиция и размер​

В разделе "ТРАНСФОРМАЦИЯ":

  • X, Y — координаты левого верхнего угла
  • W, H — ширина и высота в пикселях
  • Z — порядок отображения (больше — выше других элементов)

Прозрачность​

В разделе "ВНЕШНИЙ ВИД":

  • Используйте слайдер "Прозрачность" для создания эффекта наложения
  • 100% — полностью непрозрачное
  • 0% — полностью прозрачное (невидимое)

Видимость​

  • Переключатель "Видимый" позволяет временно скрыть изображение без удаления

Управление слоями​

Изображения, как и другие элементы, имеют свой Z-index (порядок отображения):

  • Элементы с большим значением Z отображаются поверх элементов с меньшим значением
  • Изменяйте Z в разделе "ТРАНСФОРМАЦИЯ", чтобы контролировать порядок наложения
  • Так же можно просто перетаскивать изображения в списке слоев в рамках одной папки
Пример

Если текст имеет Z: 1, а изображение Z: 0, текст будет отображаться поверх изображения.

Группировка в папки​

В списке "Слои" вы можете создавать папки для организации элементов:

  1. Создайте новую папку
  2. Перетащите изображения и другие элементы в папку
  3. Разверните/сверните папку для управления видимостью группы элементов

Работа с видео​

Видео (MP4, WebM, MOV) работают так же, как изображения, но имеют дополнительные особенности:

Автовоспроизведение​

  • Видео автоматически начинает воспроизводиться при показе на виджете
  • Видео зацикливается (воспроизводится по кругу)
  • В редакторе видео без звука (чтобы не мешать работе)

GIF-анимации​

  • GIF-файлы обрабатываются как обычные изображения
  • Автоматически воспроизводятся и зацикливаются
  • Не имеют звука
Звук видео

На виджете в OBS видео воспроизводится без звука (volume: 0 по умолчанию). Настройки громкости видео доступны через интерфейс редактора.