Как сделать чат прозрачным в ОБС

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

Секрет заключается в использовании так называемого «хромакея». Это означает, что вы не стирайте фон, а просто говорите OBS: «Смотри, замени все пиксели такого-то цвета на прозрачность». Для этого нужно, чтобы фон чата был одним сплошным цветом, и обычно это зеленый или синий.

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

Содержание

Способ 1: CSS-стили для браузерного источника
Способ 2: Фильтр хромакей для удаления фона
Способ 3: Настройка прозрачности в Streamlabs
Способ 4: Настройка прозрачности источника в OBS
Способ 5: Использование программ с встроенной прозрачностью
Способ 6: Генераторы CSS для чатов

Способ 1: CSS-стили для браузерного источника

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

Откройте свойства браузерного источника с чатом, дважды щелкнув по нему в списке источников или выбрав «Свойства» в контекстном меню.
Найдите поле «CSS» в нижней части окна настроек источника.
Для создания базовой прозрачности чата Twitch вставьте следующий CSS-код в поле:
/* Убираем фон чата */ body { background-color: rgba(0, 0, 0, 0) !important; }

Для всех элементов прозрачный фон. div {background: transparent; box-shadow: none; border: none; } * Закрываем панель и заголовок. * div[data-test-selector="chat-room-header"]Используйте div[data-test-selector="prime-offers-bar"]., div[class*="input-discussion"] { visibility: none!important; } /* Настройки текста сообщений */ .text-fragment { color: #ffffff !important; font-weight: 700 !important; font-size: 16px !important; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }

/* Стиль имен пользователей */ .chat-author__display-name { text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; font-weight: 700 !important; }
Для чата YouTube используйте специальный CSS-код, адаптированный под структуру Google-сервисов:
/* Прозрачный фон для YouTube чата */ body { background-color: rgba(0, 0, 0, 0) !important; margin: 0px auto; overflow: hidden; }

Три маски прозрачности для yt-live-chat-renderer.important; -webkit-маски изображения: -webkit-gradient(linear, left 10%, left top, from(rgba(0,0,0,1)); /* Стили для сообщений */ yt-live-chat-text-message-renderer { background-color: rgba(0, 0, 0, 0.5) !important; border-radius: 8px !important; margin: 2px 0 !important; padding: 4px 8px !important; }

/* Цвет текста */ yt-live-chat-text-message-renderer #content { color: #ffffff !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
Примените настройки нажатием «ОК» и проверьте результат в окне предпросмотра OBS.
При необходимости отрегулируйте цвета, размеры шрифта и уровень прозрачности, изменив соответствующие значения в CSS-коде.

В Интернете можно найти готовые CSS-генераторы для различных платформ, таких как сервисы для кастомизации стилей чатов YouTube и Twitch. Сохраните рабочие CSS-коды в отдельном файле, чтобы их можно было быстро использовать в будущих проектах.

Способ 2: Фильтр хромакей для удаления фона

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

Щелкните правой кнопкой мыши по источнику чата в списке источников OBS и выберите «Фильтры».
В открывшемся окне фильтров нажмите кнопку с плюсом и выберите «Хромакей» из списка доступных фильтров.
Задайте фильтру понятное название, например «Прозрачность чата», и подтвердите создание.
В настройках фильтра выберите цвет фона чата с помощью пипетки или установите его вручную. Для большинства чатов это будет белый #FFFFFF или черный #000000 цвет.
Отрегулируйте параметр «Сходство» для расширения диапазона удаляемых оттенков. Увеличьте значение, если остаются видимые части фона.
Настройте «Гладкость» для сглаживания краев текста и предотвращения резких переходов между прозрачными и непрозрачными областями.
При необходимости используйте параметр «Снижение утечки ключевого цвета» для устранения цветовых артефактов вокруг текста.
Проверьте результат в окне предпросмотра OBS и при необходимости скорректируйте настройки фильтра.

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

Способ 3: Настройка прозрачности в Streamlabs

Встроенные настройки прозрачности для виджетов чата Streamlabs позволяют создавать прозрачные чаты без программирования или использования фильтров OBS. В сервисе доступны готовые темы с различными уровнями прозрачности, а также возможность тонко настроить каждый элемент интерфейса чата.

Войдите в свой аккаунт Streamlabs и перейдите в раздел «Widgets» или «Виджеты». Найдите и выберите виджет «Chat Box» или «Окно чата» из списка доступных виджетов.
В настройках внешнего вида найдите параметр «Background Color» или «Цвет фона» и установите значение прозрачности на 0% или выберите опцию «Transparent».
Настройте цвет текста сообщений в параметре «Text Color», выбрав контрастный цвет, который будет хорошо читаться на фоне вашего контента. Отрегулируйте размер и стиль шрифта в соответствующих настройках для обеспечения читаемости на прозрачном фоне. При желании включите контур или тень для текста в параметрах «Text Shadow» для улучшения контрастности.
Сохраните настройки и скопируйте ссылку виджета для вставки в браузерный источник OBS.
Создайте или обновите браузерный источник в OBS, используя полученную ссылку из Streamlabs.

Дополнительные настройки анимации появления и исчезновения сообщений доступны в премиальной версии Streamlabs, что позволяет создавать более динамичные и профессионально выглядящие чаты с прозрачным фоном.

Чтобы сделать чат в OBS прозрачным, нужно вставить ссылку на чат в браузер, например, с Twitch или YouTube, а затем найти настройки источника и выбрать опцию «Прозрачный фон». Это позволяет видеть фон или сцену под чатом, например, вебкамеру или игру. В первую очередь, убедитесь, что в самой ссылке на чат отсутствует фон; иначе он может перекрыть прозрачность. Чат будет хорошо вписываться в трансляцию, не закрывая важные части.

Способ 4: Настройка прозрачности источника в OBS

OBS предлагает встроенные инструменты для изменения прозрачности любых источников, в том числе чат-источников браузеров. Благодаря этому методу можно быстро изменить общую прозрачность чата, оставив все элементы интерфейса видимыми, не изменяя CSS-код или применяя сложные фильтры.

Выберите источник чата в списке источников OBS, щелкнув по нему один раз. В окне предпросмотра найдите источник чата и щелкните по нему правой кнопкой мыши. В контекстном меню выберите пункт «Фильтры» для открытия окна настройки фильтров.
Нажмите кнопку с плюсом и выберите фильтр «Коррекция цвета» из списка доступных фильтров.
В настройках фильтра найдите параметр «Непрозрачность» или «Opacity» и уменьшите его значение до желаемого уровня. Рекомендуется начать с 70-80% для сохранения читаемости.
При необходимости отрегулируйте контрастность и яркость в том же фильтре для компенсации потери четкости текста.
Альтернативно можно использовать параметры трансформации источника, выбрав источник чата и нажав правую кнопку мыши — «Преобразовать» — «Изменить преобразование». В окне трансформации найдите поле «Непрозрачность» и установите желаемое значение от 0 до 100%.

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

Способ 5: Использование программ с встроенной прозрачностью

Программы для чата часто включают в себя настройки прозрачности, которые работают лучше и стабильнее, чем CSS-стили или фильтры OBS. Программы, такие как SheepChat и Restream Chat, предлагают продвинутые возможности настройки внешнего вида, используя системные ресурсы с минимальными затратами.

В программе SheepChat откройте настройки через контекстное меню в системном трее. Перейдите в раздел «Внешний вид» и найдите параметры прозрачности фона. Установите «Прозрачность фона» на желаемый уровень, обычно 0-20% для полной или почти полной прозрачности.
Для Restream Chat откройте веб-интерфейс сервиса и перейдите в настройки виджета чата. В разделе настройки темы выберите прозрачный фон или создайте собственную тему с нулевой прозрачностью фонового элемента.
Скопируйте ссылку на настроенный виджет и используйте ее в браузерном источнике OBS.

Программы с встроенной прозрачностью работают быстрее и потребляют меньше ресурсов компьютера по сравнению с браузерными вариантами с CSS-стилями.

Способ 6: Генераторы CSS для чатов

Онлaйн-генераторы CSS позволяют создавать стилизованные прозрачные чаты без знания языка CSS. Визуальные редакторы с предпросмотром, доступные в режиме реального времени, позволяют быстро создавать чаты с прозрачным фоном и различными визуальными эффектами.

Перейдите на сайт генератора CSS для чатов, например «Chat v2.0 Style Generator» или «YouTube CSS Chat Generator». Выберите платформу (Twitch, YouTube) в соответствии с типом вашего чата.
В настройках фона установите прозрачность на 0% или выберите опцию «Transparent Background».
Настройте цвет текста, размер шрифта и стиль отображения сообщений для обеспечения читаемости на прозрачном фоне.
При желании добавьте анимацию появления и исчезновения сообщений для создания динамичного эффекта.
Настройте цветовое выделение для разных типов пользователей: подписчиков, модераторов, владельца канала.
Скопируйте сгенерированный CSS-код и вставьте его в поле «CSS» браузерного источника в OBS.
Сохраните настройки и протестируйте отображение чата в окне предпросмотра.
При необходимости вернитесь к генератору для корректировки параметров и обновите CSS-код в OBS.

Многие генераторы позволяют сохранять созданные стили для последующего использования. Они также позволяют экспортировать параметры в различных форматах для резервного копирования настроек.

Как вы можете видеть, сделать чат прозрачным в OBS не так сложно. Все, что нужно сделать, это правильно настроить источник браузера и поработать с фоном в настройках чата.

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

Не бойтесь экспериментировать с настройками; попробуйте различные варианты расположения и размера, чтобы найти идеальный стиль трансляции. Удачи в стриминге!

Как сделать чат прозрачным в OBS