Как сделать оверлей для стрима: размеры и ошибки

Коротко: оверлей — это графический слой, который накладывается поверх игры и камеры в OBS: рамка для вебки, экраны начала и паузы, элементы чата и алерты. Его проектируют в размер базового холста OBS (обычно 1920x1080) и организуют по сценам с отдельными элементами. В этом руководстве ты узнаешь, что входит в хороший оверлей, как собрать его в OBS так, чтобы он не деформировался, и какие ошибки встречаются чаще всего.

Что такое оверлей и зачем он нужен

Когда человек заходит на твой эфир, первое, что он видит, — твоя сцена: игра, камера и всё, что их окружает. Оверлей — это визуальная «рамка». Он выполняет три функции:

• Айдентика: чтобы канал узнавали по одному кадру.
• Порядок: становится ясно, где камера, где игра и где появляются алерты.
• Контекст: может показывать последнего фолловера, счётчик или сообщение «скоро вернусь».

Оверлей и алерты — не одно и то же: оверлей — это постоянное оформление твоих сцен, а алерты — уведомления, которые срабатывают по событиям. Про алерты мы рассказываем в руководстве по алертам.

Что входит в полный оверлей

Пакет оверлея обычно собирается как семья сцен в одном стиле:

Элемент	Для чего нужен
Стартовая сцена («starting soon»)	Экран, пока ты ждёшь, когда соберутся зрители
Игровая сцена	Рамка для веб-камеры, границы и свободная зона для игры
Сцена только для разговора	Крупная камера для Just Chatting или общения
Сцена паузы («BRB»)	Сообщение, что ты скоро вернёшься
Завершающая сцена	Прощание, соцсети и следующий эфир
Рамка веб-камеры и детали	Рамка вокруг камеры в твоей палитре
Элементы чата и событий	Окно чата, список событий или подписи с последним фолловером

По руководству OBS по алертам, самые распространённые динамические элементы — это алерты, список событий, окно чата, отдельные подписи с информацией (последний фолловер, последний подписчик) и «стакан», который наполняется иконками событий.

В каком размере делать

Платформы не задают размер оверлея: решает базовый холст OBS. По общему руководству OBS, холст — это пространство, где ты размещаешь источники, и обычно он совпадает с разрешением монитора или игры. Поэтому правило простое:

1. Проектируй каждую сцену в тот же размер, что и твой базовый холст. Если холст 1920x1080, делай 1920x1080.
2. Держи холст неизменным. Менять его позже значит заново расставлять все источники. Если нужно вести эфир в меньшем разрешении, снижай только выходное разрешение, а не холст.
3. Помни о потолке платформы. Kick допускает до 1920x1080 и 60 fps, а рекомендации Twitch доходят до 1080p60. Оверлей в 4K тебе не пригодится, если ты ведёшь эфир в 1080p.

Если оверлей — веб-страница (источник «Браузер»)

Многие анимированные оверлеи и все алерты работают через источник типа Браузер (Browser Source). Согласно официальной документации OBS:

• Размер по умолчанию — 800x600, поэтому его нужно вручную подогнать под размер твоего оверлея (например, 1920x1080).
• CSS по умолчанию делает фон прозрачным и убирает отступы и полосы прокрутки.
• Можно включить «Выключать источник, когда он не виден» (Shutdown source when not visible), чтобы страница выгружалась, когда её нет на экране, и «Обновлять браузер при активации сцены», чтобы она перезапускалась при каждой смене сцены.

Изображения и прозрачность

Для статичных элементов (рамки, границы, тексты) используй изображение с прозрачным фоном, занимающее весь холст. Тогда, будучи добавленным как источник-изображение, оно займёт всю сцену, а «пустое» пропустит игру или камеру снизу.

Размеры твоего канала тоже важны

Оверлей живёт внутри эфира, но у канала есть визуальные элементы и вне OBS. На Twitch, например, официальная справка по настройке канала указывает:

• Рекомендуемый баннер профиля: 1200x480 px; сосредоточь рисунок слева, потому что страница масштабируется под окно каждого человека.
• Информационные панели: изображения шириной не более 320 px (и высотой 300 px), менее 2,9 МБ.
• Фото профиля: JPEG, PNG или GIF до 10 МБ.

Если в оверлее, панелях и баннере одинаковые цвета, шрифты и логотип, канал выглядит как единый бренд. О том, как этого добиться, мы пишем в руководстве по брендингу.

Как собрать в OBS шаг за шагом

1. Зафиксируй базовый холст в «Настройки» > «Видео» (например, 1920x1080).
2. Создай сцену для каждой ситуации: старт, игра, разговор, пауза и завершение.
3. Сначала добавь фоновые источники (игра, камера), а поверх — изображение оверлея с прозрачностью.
4. Растяни рамку веб-камеры до размера прямоугольника в оверлее; при необходимости обрежь фильтром «Кадрирование/Заполнение» (Crop/Pad).
5. Добавь источники «Браузер» (алерты, чат, подписи) на самый верх, чтобы их не закрывала ни одна картинка.
6. Проведи короткий тестовый эфир или запись и проверь, что ничего не закрывает элементы игры.

Полную настройку OBS, включая CBR и битрейт, ты найдёшь в руководстве по OBS.

Частые ошибки

• Закрыть интерфейс игры. Прежде чем рисовать большие границы, посмотри в своей игре, где мини-карта, здоровье и важные тексты.
• Крошечная вебка или рамки, которые не совпадают. Если рамка не совпадает с камерой, выглядит неряшливо. Измерь прямоугольник и подгони камеру под него.
• Слишком много элементов сразу. С каждым счётчиком и дополнительным окном картинка загрязняется, и теряется фокус на тебе и на игре.
• Слишком мелкий текст. На телефоне буква в 12 px нечитаема. Используй мало слов и крупные размеры.
• Дублирующиеся алерты. Если скопировать источник алертов в несколько сцен и ещё оставить один внутри оверлея, алерт сработает дважды. Оставь один.
• Смешивать стили. Неоновая рамка с минималистичными панелями и эмоутами в другом стиле создаёт ощущение наспех собранного канала.

Оверлеи, сделанные для твоего канала

В Epik можно заказать оверлей отдельно по 20 $ за каждый. Пакет Boost включает логотип, 3 оверлея, 3 панели и 1 баннер (для одной платформы), а пакет Epik добавляет оверлеи, рамки, панели, баннеры, эмоуты, значки подписчиков, алерты, TTS и настройку OBS для нескольких платформ. Всё оплачивается полностью через PayPal, а мы начинаем с твоего брифа.