• Гость. Приятно видеть Вас на нашем форуме!
Иконка ресурса

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

Нет прав для скачивания
Всем привет!

Сегодня хотел бы поделиться с Вами своим небольшим гайдам для 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 и в источниках создаём новый BrowserSource источник

Config-1.PNG


4) Присваиваем ему имя Social_Links

Config-2.PNG


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

Config-3.PNG


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

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

Config-4.PNG


Бонус хотфикс от меня!
Т.к. многие стименговые площадки практикуют немного мылить вашу картинку из-за своих каких то алгоритмов порой не хватает резкости.

Во-первых! На источниках нажимаем ПКМ и в меню "Фильтрация масштаба" выбираем "Метод Ланцоша"

Config-5.PNG


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

Config-6.PNG


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

Для особо ленивых!
Можете скачать архив в котором содержатся:
  • все скриншоты настроек которые показаны тут
  • готовый html файл
  • И !!!! Готовая сцена! которую вам нужно будет просто импортировать в свою OBS
Автор
Dems
Скачивания
0
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Dems