Оверлей для OBS: как добавить на стрим и где взять готовые

Оверлей для OBS — это графика, которая накладывается на картинку стрима: рамка с местом под игру и веб-камеру, заставки начала и перерыва, оповещения о подписках и донатах. На этой странице — как добавить оверлей в OBS Studio шаг за шагом (картинка, анимация, оповещения через Browser Source, порядок слоёв) и где взять готовые оверлеи: сервисы, страницы которых мы открыли и проверили.

Инструкция составлена по базе знаний проекта OBS, сервисы сверены по их собственным страницам на 30 сентября 2026 года. Страницы базы знаний OBS датированы 2021 и 2022 годами, а на главной странице проекта указана версия 32.2.2 (14 августа), поэтому названия пунктов меню в вашей версии могут немного отличаться. Цены и условия сервисов меняются: перед покупкой или скачиванием смотрите страницу сервиса.

Содержание

---

Что такое оверлей для стрима и какие они бывают

Оверлей — готовый графический слой, который вы кладёте поверх игры или камеры в программе для трансляции. OBS Studio, по описанию проекта, — бесплатная программа с открытым исходным кодом для записи видео и стримов: через неё можно транслировать на Twitch, YouTube и другие сервисы. Оверлеи при этом не привязаны к одной программе: страницы сервисов из списка ниже указывают OBS Studio, Streamlabs Desktop, XSplit и другие приложения.

Под словом «оверлей» обычно понимают сразу несколько вещей:

• рамка сцены: оформление с местом под игру и рамкой для веб-камеры (на странице Twitch Overlay такие файлы названы webcam frames);
• экраны: заставки начала трансляции, перерыва (Be Right Back), конца стрима — в справке OBS есть отдельный урок про такой экран;
• оповещения (alerts): по описанию OBS, автоматический способ поблагодарить зрителей за подписку, донат и фолловинг;
• виджеты: список последних событий (Events List), окно чата (Chat Box), подписи (Labels) и «стакан» (Cup), который наполняется значками событий — так они названы в справке OBS;
• дополнения к набору: панели, баннеры и смайлики — в меню OWN3D они идут отдельными разделами рядом с оверлеями.

Про смежные вещи у нас есть отдельные материалы: офлайн-баннеры для Twitch и размеры смайликов на Twitch.

Наборы приходят в разных форматах. На странице WDFLAT, например, отдельно выделены анимированные наборы, PNG, исходники PSD и наборы с онлайн-редактором. От формата зависит, через какой источник OBS вы будете его добавлять.

Справка: главная страница OBS Project и страница загрузки OBS; в базе знаний OBS — Stream Layout Tutorial 2: Alerts & Chat Box и Stream Layout Tutorial 3: Be Right Back screen (OBS просит не ссылаться на страницы базы знаний, поэтому мы называем их без ссылок); страницы сервисов — Twitch Overlay, WDFLAT, OWN3D, Twitch Designs.

Как добавить оверлей в OBS Studio

Порядок всегда один: сцена, источник, размер и положение, порядок слоёв, проверка. Дальше — по шагам для разных видов оверлеев.

Шаг 1. Сцены и размер холста

Сцены и источники в OBS — то место, где вы собираете раскладку стрима: игру, камеру, картинки, текст. Сцен можно создать сколько нужно; в справке OBS в качестве примера названы Welcome, Desktop, Game, Break и End. Есть правило: имена сцен и источников общие для всей программы и не должны совпадать, поэтому источник Game и сцена Game вместе не уживутся.

Размер холста задаёт пункт Base (Canvas) Resolution в настройках видео (Settings → Video). По справке OBS, это место, куда помещаются ваши источники, и обычно его делают равным разрешению монитора или игры. Output (Scaled) Resolution — это разрешение, в котором выйдут стрим и запись. Если позже изменить Base (Canvas), источники придётся выровнять заново, а смена Output этого не требует. Поэтому сначала выберите холст, а уже потом расставляйте оверлей.

Справка OBS (база знаний, названия страниц без ссылок): OBS Studio Overview Guide.

Шаг 2. Оверлей-картинка (источник Image)

1. Выберите сцену, в панели Sources нажмите «+» и выберите Image.
2. Выберите Create New, дайте источнику имя, оставьте отмеченным «Make source visible» и нажмите OK.
3. Нажмите Browse и выберите файл. Источник Image принимает .bmp, .tga, .png, .jpeg, .jpg и .gif; прозрачность (альфа-канал) поддерживается там, где формат её хранит, поэтому для рамки с «окном» под игру нужен файл с прозрачной областью, например PNG.
4. Растяните картинку на всю сцену: выделите источник и выберите Edit → Transform → Fit to Screen (Ctrl-F на Windows, Cmd-F на macOS). Для точной подгонки откройте Edit Transform (Ctrl-E или Cmd-E). Чтобы обрезать лишнее, перетаскивайте границы рамки выделения с зажатой клавишей Alt (Option на macOS).
5. Поставьте источник в списке выше игры (подробнее в шаге 5).

Надпись поверх сцены в справке OBS предлагают делать так же: отдельный Image-источник с картинкой, у которой прозрачный фон. Чтобы показывать несколько картинок по очереди, есть источник Image Slide Show.

Справка OBS (база знаний, названия страниц без ссылок): Image Sources, Sources Guide, Stream Layout Tutorial 1: Game Screen, Stream Layout Tutorial 3: Be Right Back screen.

Шаг 3. Анимированный оверлей

Анимированный GIF добавляется тем же источником Image. Видеофайл добавляют как Media Source: по справке OBS, он принимает видео .mp4, .ts, .mov, .flv, .mkv, .avi, .gif и .webm. У источника есть настройки Loop (повторять файл; по умолчанию выключено), «Restart playback when source becomes active» (начинать сначала, когда источник снова в сцене; по умолчанию включено) и «Show nothing when playback ends» (убрать картинку, когда файл закончился; по умолчанию включено) — последняя удобна для коротких заставок. Как именно OBS обращается с прозрачностью видеофайла, в справке по Media Source не описано, поэтому проверяйте такой оверлей в предпросмотре сцены.

Справка OBS (база знаний, названия страниц без ссылок): Media Sources, Stream Layout Tutorial 3: Be Right Back screen.

Шаг 4. Оповещения, чат и виджеты через Browser Source

Оповещения и виджеты сервисов оповещений — это веб-страницы сервиса, поэтому в OBS их добавляют источником Browser. В справке OBS он описан как веб-браузер внутри OBS, а основное его применение — оверлеи оповещений и окна чата. По справке OBS (Stream Layout Tutorial 2), плагины для оповещений не нужны.

1. Выберите сервис оповещений и подключите к нему свой аккаунт. В справке OBS как примеры сервисов с бесплатными оповещениями названы Streamlabs, StreamElements, NerdOrDie и OWN3D Pro.
2. Настройте оповещения на сайте сервиса: какие события показывать, какие картинки и звуки использовать.
3. Найдите адрес оверлея. Называться он может по-разному: Overlay URL, Widget URL или Alert URL.
4. В OBS выберите сцену, в списке Sources нажмите правой кнопкой мыши, добавьте источник Browser и вставьте адрес в поле URL.
5. Задайте ширину и высоту (Width и Height) под размер оповещения и нажмите OK.

У источника Browser по умолчанию ширина 800 и высота 600, настройка собственной частоты кадров выключена, а значение FPS равно 30. Пользовательский CSS по умолчанию делает фон страницы прозрачным, так что оповещение ложится поверх картинки. Если страница не обновилась, нажмите «Refresh cache of current page». Настройка «Refresh browser source when scene becomes active» по умолчанию выключена и обновляет страницу при переходе на сцену.

Справка OBS (база знаний, названия страниц без ссылок): Stream Layout Tutorial 2: Alerts & Chat Box, Browser Source, Sources Guide.

Шаг 5. Порядок слоёв и веб-камера

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

Если веб-камера размещается не в рамке оверлея, а сама по себе, в уроке OBS советуют добавить источник Video Capture, в Edit Transform выбрать тип рамки Maximum size only и задать размер. Для камер 16:9 предлагают попробовать 480×270 или 640×360, для камер 4:3 — 360×270 или 480×360. Ставьте камеру в угол или к краю, где она не закрывает важную информацию, и оставляйте небольшой отступ от границ кадра.

Справка OBS (база знаний, названия страниц без ссылок): Sources Guide, Stream Layout Tutorial 1: Game Screen, Stream Layout Tutorial 3: Be Right Back screen.

Если оверлей не виден или съехал

• Проверьте значок глаза рядом с источником: скрытый источник в кадре не показывается.
• Проверьте порядок: источник ниже игры будет закрыт игрой.
• Если вы меняли Base (Canvas) Resolution, выровняйте источники заново (Ctrl-R или Cmd-R сбрасывает размер и положение источника).
• Для Browser Source обновите кэш страницы кнопкой «Refresh cache of current page».
• Перед первым эфиром запустите тестовую запись или трансляцию хотя бы на несколько минут: в Quick Start Guide OBS настоятельно советует проверять настройки заранее.

Справка OBS (база знаний, названия страниц без ссылок): Quick Start Guide, OBS Studio Overview Guide, Sources Guide.

Где взять оверлеи для OBS: проверенные сервисы

Ниже — сервисы, страницы которых мы открыли 30 сентября 2026 года. О каждом сказано только то, что написано на самой странице; слова «бесплатно» и «платно» стоят там, где так сказано на странице, а не по нашей оценке. Это не рейтинг: порядок внутри групп произвольный. Сайты, которые не открылись или перестали быть каталогами оверлеев, мы в список не включали.

Бесплатные наборы

• Twitch Overlay — раздел Free Downloads. Страница описывает бесплатные загрузки для OBS Studio и Streamlabs Desktop: оповещения, экраны, панели, рамки для камеры и стартовые пакеты. Они сделаны в первую очередь для Twitch, но, как сказано на странице, работают и для YouTube, Kick и TikTok, если использовать то же программное обеспечение. Элементы в списке помечены FREE.
• Zerging — сайт с разделами полных пакетов, панелей, оверлеев и офлайн-графики; в описании страницы названы Twitch, YouTube и Facebook. На странице оверлеев автор пишет, что их можно бесплатно использовать в стриме целиком или частями и что указывать источник необязательно, хотя разрешено. Чтобы скачать, нужно нажать на превью и сохранить нужные файлы. Страница на немецком и английском языках.
• WDFLAT — в подзаголовке сайт называет себя источником бесплатных элементов для Twitch, YouTube и Facebook. В категории Overlay страница показывает 124 результата; в меню есть алерты, оверлеи, панели, экраны перерыва и пакеты, а для некоторых элементов предусмотрен онлайн-редактор. Условия конкретного набора смотрите на его карточке.
• Hexeum — магазин оверлеев с разделом Free Designs. Страница описывает бесплатные Twitch-оверлеи, анимации и шаблоны, алерты, панели и переходы Stinger.

Магазины и подписки

• OWN3D — главная страница называет сервис местом для дизайнов стрима, инструментов для OBS Studio и расширений Twitch. В меню — пакеты оверлеев для Twitch, Kick и YouTube, оповещения, панели, баннеры, смайлики и значки. В описании подписки Stream Pass указано «900+ Overlays & Alerts» и Overlay Maker; условия и цены смотрите на странице.
• Placeit — страница «OBS Stream Overlay Maker gaming templates» собирает игровые шаблоны для оверлеев OBS; главная страница сервиса предлагает создавать и настраивать (Create & Customize) логотипы, видео и макеты. На странице указана подписка с оплатой раз в год: $89.69.
• Twitch Designs — по описанию на странице, источник премиальных оверлеев, панелей и графики для любых платформ и программ вроде OBS или XSplit. В меню — готовые раскладки, панели, оверлеи, рамки для камеры, значки, заставки перерыва, оповещения и дизайны для YouTube.
• Gael LEVEL на Gumroad — профиль автора наборов. Описание профиля: оверлеи и графика для Twitch, YouTube и Kick, наборы для OBS, Streamlabs studio (так на странице), Meld и других программ. Цены и условия указаны на карточках товаров.

Платформы с оповещениями и оверлеями

• Streamlabs — на главной странице — Streamlabs Desktop, оповещения и виджеты, оверлеи (бесплатные и дополнительные в платном плане Ultra), чаевые и мерч; в меню справочного центра — раздел «Plugin for OBS».
• StreamElements — платформа для стримеров с разделом «Alerts and Overlays» («оповещения и оверлеи»), плагином SE.Live для OBS Studio, чат-ботом и сервисом донатов.

Как добавить оповещения любого из таких сервисов, описано в шаге 4 выше.

Как выбрать оверлей и не испортить стрим

• Размер. Проверьте, как набор лёг на предпросмотр вашего холста; если не совпал, источники можно подогнать через Edit Transform.
• Нужные сцены. В одном пакете могут быть рамка, экраны начала, перерыва и конца, оповещения и панели; убедитесь, что есть всё, что вы будете включать в эфире.
• Формат файлов. Картинки (PNG, GIF) добавляются источником Image, видео — источником Media Source, а оповещения и виджеты сервисов — источником Browser.
• Лицензия. Прочитайте условия на странице набора: у одних авторов можно пользоваться бесплатно и без ссылки на источник (как у Zerging), другие продают наборы в магазине или по подписке.
• Не закрывайте главное. Оверлей с плотной рамкой отнимает место у игры; оставьте свободными углы, где у вас окно с камерой и оповещения, и уберите всё лишнее.
• Проверка. Запустите тест и посмотрите результат так, как его увидят зрители.

Частые вопросы

Нужны ли плагины, чтобы добавить оповещения в OBS?

Нет. По справке OBS (Stream Layout Tutorial 2), плагины для оповещений не требуются: сервис даёт адрес оверлея, а вы вставляете его в источник Browser (шаг 4).

Подойдёт ли один оверлей для Twitch и для YouTube?

Во многих случаях да: страницы Twitch Overlay, WDFLAT и Zerging называют сразу несколько платформ. Но конкретный набор может быть рассчитан на одну платформу, поэтому смотрите описание набора.

Можно ли сделать оверлей самому?

Да, если есть картинка с прозрачным фоном, её можно добавить источником Image. Готовые конструкторы есть у сервисов из списка: Overlay Maker у OWN3D, шаблоны для редактирования у Placeit, онлайн-редактор у отдельных наборов WDFLAT. А про другие программы и расширения для канала читайте в обзоре 14 лучших инструментов и плагинов для Twitch.