Всем привет! Сегодня хотел бы поделиться с Вами своим небольшим гайдам для OBS Studio в котором по горячим клавишам на экране будут появляться ссылки на Ваши социальные сети. И так! Приступим:

1) Создаём новый текстовый файл с расширением html в любом подходящем для Вас месте. У Вас должно получится примерно так: Social_Links.html
2) В качестве содержимого вставляем в него вот этот код:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--loading Icon Font -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
        <!--Style-->
        <style type="text/css">

            /* Loading Google Font */
            @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

            html, body {
                background: rgba(0,0,0,0);
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            /* Animation */
            @-webkit-keyframes FadeOut {
                0%, 100% { opacity: 0; }
                6%, 94% { opacity: 1; }
                }

            /* Style social blocks */
            #social-container {
                font-size: 48px;
                text-shadow: 0 0 1px #666,1px 1px 0 #000;
                display: flex;
                align-items: center;
                justify-content: center;

                -webkit-animation-name: FadeOut;
                -webkit-animation-timing-function: ease-in-out;
                -webkit-animation-delay: 2s; /* Delay animation */
                -webkit-animation-duration: 15s; /* Time animation */
                -webkit-animation-fill-mode: both;
            }

            #block {
                display: block;
                float: left;
                margin: 10px;
                padding: 3px;
            }

            .name {
                padding-left: 10px;
                font-family: 'Indie Flower', cursive;
                font-size: 90%;
                color: #fff;
            }

            .name::before {
                content: "/";
            }
        </style>
    </head>
    <body>
        <div id="social-container">
            <div id="block"><i class="fab fa-youtube" style="color: red;"></i><span class="name">Youtube</span></div> <!--Name channel-->
            <div id="block"><i class="fab fa-twitch" style="color: purple;"></i><span class="name">Twitch</span></div> <!-- Name channel -->
            <div id="block"><i class="fab fa-vk" style="color: #5181B8;"></i><span class="name">VK</span></div> <!-- Name group / public -->
            <div id="block"><i class="fab fa-discord" style="color: #7289DA;"></i><span class="name">Discord</span></div> <!-- Invite code by Discord Server-->
        </div>
    </body>
</html>

<!-- Create by Dems_dd (http://darkdale.org | http://t.me/dems_dd) -->

В самом низу кода Вам останется заменить название соц. сетей на свои имена, для быстрого поиска эти строки подписаны. Если какие-нибудь строки не нужны или не хватает можно их убрать или добавить соответственно. (Пишите в комментариях – помогу)

3) Открываем свою OBS Studio и в источниках создаём новый Браузер источник
Config-1.PNG


4) Присваиваем ему имя Social_Links (Либо какой пожелаете)
Config-2.PNG


5) Далее в свойствах ставим галочку Локальный файл.
  • Выбираем наш только что созданный файл в том месте где его и создавали.
  • Выставляем ширину нашего источника по нашему экрану, к примеру 1920
  • Высоты нам достаточно с запасом и 100 px
  • FPS ставим такой же с каким Вы собираетесь стримить, в моем случаи это 60
Так же поставим 2 галочки снизу: Отключить, когда не видим и Обновлять браузер, когда сцена становится активной.
Config-3.PNG


Источник готов! Выставляем ему позицию на экране где оно будет показываться и в принципе на этом всё. Осталось пару шагов к совершенству.

6) Заходим в общие настройки и проваливаемся в графу Горячих клавиш. ! Присваиваем сочетание клавиш ко всем источникам Social_Links (либо то название которые вы дали источнику) во всех сценах (Показать и Скрыть – одно и тоже сочетание для удобства). Это необходимо для того, чтобы данный источник показывался на всех сценах по одному и тому же сочетанию клавиш на какой сцене вы бы не были.
Config-4.PNG


Бонус: Хотфикс от меня!
Т.к. многие стиминговые площадки практикуют немного мылить вашу картинку из-за своих каких-то алгоритмов, то порой не хватает резкости.
Во-первых! На источниках нажимаем ПКМ и в меню "Фильтрация масштаба" выбираем "Метод Ланцоша"
Config-5.PNG


Во-вторых! На источниках так же жмём ПКМ и проходим в фильтры. Добавляем фильтр "Увеличить резкость" и значение выставляем примерно 0.06
Config-6.PNG



Демонстрация всплывающих плашек​

Всплывающие плашки соц сетей для OBS Studio

Полный гайд по настройки смотрите в ресурсах нашего форума.

P.S. Скриншоты сделаны в OBS Studio v.21. В более новых версиях могут немного отличатся наименования