Оверлей Twitch — це один із найпростіших способів надати вашій трансляції більш акуратного та впізнаваного вигляду. Завдяки правильному оверлею ви можете оформити свій ігровий процес, веб-камеру, сповіщення та інші елементи трансляції без необхідності створювати весь дизайн з нуля.

Хороша новина полягає в тому, що додати оверлей Twitch в OBS Studio досить просто. У цьому посібнику ми крок за кроком розберемо процес встановлення статичних та анімованих оверлеїв трансляції, а також пояснимо, як правильно організувати їх у ваших сценах OBS.

Що таке оверлей Twitch?

Оверлей Twitch — це графіка або анімація, яка накладається поверх вмісту вашої трансляції. Він може містити такі елементи, як:

Рамки для веб-камер
Декоративні рамки
Інформація про трансляцію
Останні події
Області чату
Цілі
Анімована графіка
Тематичні фони

Пакети оверлеїв для трансляцій часто містять кілька узгоджених графічних елементів, розроблених для спільної роботи, що дозволяє створити єдиний візуальний стиль для різних сцен OBS.

Перед початком

Перед встановленням оверлея завантажте та розпакуйте свій Пакет оверлеїв для стріму.

Залежно від продукту, ви можете отримати такі файли:

PNG
WEBP
JPG
GIF
WEBM
MP4
PSD

Точні формати залежать від пакета ресурсів. OBS Studio підтримує джерела зображень для статичної графіки та медіа-джерела для відео- та аудіофайлів.

Порада: Зберігайте ресурси трансляції в окремій папці на комп'ютері, а не розкидайте їх по папках Завантаження, Робочий стіл та інших місцях. Це значно полегшить подальше обслуговування вашого налаштування OBS.

Крок 1: Відкрийте OBS Studio

Запустіть OBS Studio та відкрийте колекцію сцен, яку хочете використовувати.

Якщо ви створюєте своє перше налаштування, ви можете почати з кількох основних сцен:

Скоро почнеться
Геймплей
Просто спілкування
Скоро буду
Завершення

Сцени OBS створюються з окремих джерел, якими можуть бути ігри, веб-камери, зображення, відео, текст та інші елементи.

Крок 2: Перевірте роздільну здатність полотна

Перш ніж додавати графіку, переконайтеся, що полотно OBS відповідає роздільній здатності, для якої створено ваш оверлей.

Наприклад, багато сучасних графічних елементів трансляції розраховані на:

1920 × 1080

Якщо ваше полотно використовує інше співвідношення сторін або роздільну здатність, можливо, доведеться змінити розташування чи розмір графіки.

Це особливо важливо, оскільки зміна базової роздільної здатності полотна може вимагати повторного вирівнювання або зміни розміру існуючих джерел.

Для більшості стандартних макетів Twitch 16:9 роздільна здатність 1920 × 1080 є зручною відправною точкою.

Крок 3: Додайте статичний оверлей

Якщо ваш оверлей представлений у форматі PNG або іншому підтримуваному форматі зображення, додайте його як Джерело зображення.

В OBS:

Джерела → + → Зображення

Дайте джерелу зрозумілу назву, наприклад:

Оверлей ігрового процесу

Потім виберіть файл накладання.

OBS розмістить зображення у вашій сцені, де ви зможете його переміщувати та змінювати його розмір. Джерела зображень спеціально створені для додавання зображень і слайд-шоу до сцен OBS.

Крок 4. Заповніть полотно накладанням

Виберіть накладання у списку джерел і скористайтеся:

Перетворення → Заповнити екраном

Ви також можете скористатися комбінацією клавіш OBS, щоб підігнати джерело під екран.

Якщо ваше накладання було створено для такої ж роздільної здатності, як і ваше полотно, воно повинно правильно вирівнятися зі сценою.

Уникайте розтягування накладання з іншим співвідношенням сторін, оскільки це може спотворити дизайн.

Крок 5. Додайте свій ігровий процес або камеру

Тепер додайте вміст, який має відображатися під накладанням.

Наприклад:

Джерела

Геймплей
Вебкамера
Накладка для стріму

Порядок має значення.

OBS відображає джерела, що знаходяться вище у списку джерел, поверх джерел, розташованих під ними. Це означає, що ваше декоративне накладання загалом має бути розташоване над над вашим ігровим процесом або джерелом веб-камери.

Типова ігрова сцена може виглядати так:

Накладка для стріму
Вебкамера
Геймплей

Ігровий процес залишається видимим знизу, тоді як накладання створює візуальну рамку навколо нього.

Крок 6. Розташуйте веб-камеру

Якщо ваше накладання містить спеціальну рамку для веб-камери, додайте веб-камеру за допомогою:

Джерела → + → Пристрій захоплення відео

Потім помістіть її під шаром накладання.

Змінюйте розмір веб-камери, доки вона не поміститься всередині рамки.

Якщо рамка веб-камери є частиною прозорого PNG-файлу, рамка може залишатися над камерою, тоді як сама камера залишається видимою крізь прозору область.

Крок 7. Додайте анімовані накладання

Анімовані накладання працюють дещо інакше.

Для відеоформатів, таких як WEBM або MP4, використовуйте:

Джерела → + → Джерело медіа

Потім виберіть файл анімації.

OBS підтримує кілька відеоформатів за допомогою джерела медіа, зокрема WEBM, MP4, MOV, MKV, AVI, GIFтощо.

Залежно від анімації, ви можете увімкнути:

Повторення

якщо ви хочете, щоб анімація відтворювалася безперервно.

Для анімації, яка повинна відтворюватися один раз при активації сцени, такі параметри, як Перезапустити відтворення, коли джерело стає активним можуть бути корисними.

Крок 8. Додайте сповіщення трансляції

Сповіщення можна додати окремо від основного накладання.

Наприклад, ваша сцена може містити:

Анімоване накладання
Джерело сповіщень
Рамка веб-камери
Геймплей

Багато систем сповіщень використовують Браузерне джерело в OBS для відображення підписників, спонсорів, донатів чи інших подій. OBS визначає браузерне джерело як тип джерела, який зазвичай використовується для сповіщень трансляції та вікон чату.

Це дозволяє вашому накладанню та сповіщенням працювати незалежно.

Крок 9. Створіть окремі сцени

Не намагайтеся вмістити всю графіку в одну величезну сцену OBS.

Натомість створюйте окремі сцени для різних частин вашої трансляції.

Скоро почнеться

Використовуйте:

Фон
Анімоване накладання
Текст "Скоро почнеться"
Музики

Геймплей

Використовуйте:

Захоплення гри
Вебкамера
Рамку для вебкамери
Накладка трансляції
Сповіщення

Скоро повернуся

Використовуйте:

Фон
Анімована графіка
Повідомлення "Зараз повернуся"
Музики

Завершення

Використовуйте:

Фон
Анімоване накладання
Інформація про соціальні мережі
Кінцеве повідомлення

Це значно спрощує перемикання між різними частинами вашої трансляції.

Крок 10: Заблокуйте джерела накладки

Коли все розміщено правильно, заблокуйте графічні джерела в OBS.

Це запобігає випадковому переміщенню накладки під час налаштування ігрового процесу, веб-камери чи інших джерел.

Це особливо корисно, коли ваша сцена містить кілька шарів.

Поширені проблеми з накладками Twitch

Накладка закриває мій ігровий процес

Перевірте порядок джерел.

Накладка зазвичай має знаходитися вище ігрового процесу в списку джерел.

Накладка виглядає розтягнутою

Перевірте співвідношення сторін і роздільну здатність полотна.

Якщо вашу накладку було створено для 1920 × 1080, але ваше полотно має інше співвідношення сторін, можливо, доведеться змінити розташування елементів.

Моя анімована накладка не відтворюється

Перевірте, чи ви використовуєте Джерело медіа для накладки на основі відео та переконайтеся, що формат файлу підтримується.

Також перевірте, чи налаштовано анімацію на циклічне відтворення або перезапуск, коли джерело стає активним.

Моя веб-камера відображається за рамкою неправильно

Перемістіть джерело веб-камери нижче рамки веб-камери в списку джерел.

Пам’ятайте:

Вище джерело = відображається зверху.

Моя накладка зникає при зміні сцен

Це нормально, якщо накладку було додано лише до однієї сцени.

Ви можете додати її окремо до кожної сцени або використовувати функції OBS, які дозволяють повторно використовувати джерела, де це доречно.

Протестуйте все перед початком трансляції

Перед першою трансляцією приділіть кілька хвилин тестуванню сцен.

OBS рекомендує перевіряти налаштування перед початком трансляції, а не відразу запускати перший стрім.

Перевірте:

Позицію ігрового процесу
Позицію веб-камери
Вирівнювання накладки
Анімована графіка
Сповіщення
Мікрофон
Звук з комп'ютера
Переходи між сценами
Читабельність тексту

Запис короткого тестового відео локально — це простий спосіб виявити проблеми раніше за ваших глядачів.

Забезпечте єдиний візуальний стиль трансляції

Встановлення накладки — це лише початок. Для каналу з професійним виглядом намагайтеся підтримувати візуальну єдність графіки.

Ваші:

Профіль Twitch → банери → панелі → накладки → сповіщення → рамка веб-камери → значки Stream Deck

можуть використовувати однакові кольори, типографіку та загальну естетику.

Це особливо корисно для каналів, побудованих навколо впізнаваних стилів, таких як каваї, затишні, пастельні, аніме, кіберпанк, готичні або мінімалістичні дизайни.

Знайдіть повний комплект накладок для трансляції

Якщо ви не хочете створювати графіку для OBS з нуля, скоординований Пакет оверлеїв для стріму може надати основні візуальні елементи, які вам потрібні, в одному завантаженні.

Наша Стрімерські ресурси для креаторів містять тематичні оверлеї трансляцій та іншу графіку, розроблену для стрімерів Twitch, творців YouTube, VTuber-ів, геймерів та контент-мейкерів.

Повний пакет оверлеїв може зекономити час і водночас допомогти вам створити єдину візуальну ідентичність для всіх сцен у OBS.

Незалежно від того, чи ви налаштовуєте свій перший канал на Twitch, чи оновлюєте наявний стрім, встановлення узгодженого оверлея в OBS Studio — це простий спосіб зробити вашу трансляцію більш охайною та професійною.