Как сделать интерфейс на стриме

Где взять бесплатный оверлей (оформление) для стрима

Каждый начинающий стример со временем хочет разнообразить графическое оформление своей трансляции! Но ключевое слово тут начинающий). И если стример не богатенький Ричи, или же вы профи графических редакторов по типу фотошоп, а так же просто нет свободных средств что бы заказать себе качественный оверлей то соответственно встает вопрос. А где взять оверлей для своего стрима и желательно бесплатно?

Все просто ребята! В сети есть немало сервисов, сайтов и порталов которые предоставляют оверлеи для трансляций абсолютно бесплатно! Где подвох? Да нет его, просто когда стример начинает более плотно заниматься трансляциями то у него появляется возможность докупать разные фишечки для трансляций, вот и все!

К слову сказать, что среди бесплатных Overlay Templates попадаются очень крутые и красивые подборки!

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

Список сайтов где можно найти бесплатные оверлеи для стрима:

1. Strexm.tv

Как сделать интерфейс на стриме

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

2. Own3d.tv

Как сделать интерфейс на стриме

Own3D один из наиболее популярных ресурсов посвященных теме графического оформления стримов! Огромное количество бесплатных оверлеев для таких площадок как Twitch, YouTube и Facebook. Да есть на портале и платная графика но они очень крутые и удовлетворят самого искушенного стримера!

3. Wdflat.com

Как сделать интерфейс на стриме

Хотите более 100 бесплатных, крутых и модных оверлеев? Wdflat это кладезь интересных и красивых оврлеев для Twitch и YouTube! А так же Twitch Panels, Twitch Offline, YouTube Banner, YouTube Thumbnail, Logo – все анимированное и классное! Обязательно загляните!

4. Gumroad.com

Как сделать интерфейс на стриме

Графический дизайнер Gael Level который создает очень крутые и востребованные сримерами оверлеи и все остальные примочки для оформления трансляции! Есть и бесплатные но в основном стоимость от 1 бакса до 5!

5. Nerdordie.com

Как сделать интерфейс на стриме

Nerdordie как ни странно был обучающем проектом на ютубе! Но ребята настолько круто делали оверлеи что это переросло в отдельный сервис по созданию графического дизайна для оформления трансляций! И да бесплатные оверлеи там есть!

6. Twitchoverlay.com

Как сделать интерфейс на стриме

Twitchoverlay – это в основном оверлеи для Твича! Да есть и для YouTube но основной упор на твич. Сервис предлагает от 20 бесплатных Stream Overlay, так же от 2х баксов и выше премиальные пакеты! Да кстати есть и индивидуально заказать себе оверлей.

7. Twitchtemple.com

Как сделать интерфейс на стриме

Сайт Twitch Temple имеет кучу бесплатных заставок, оверлеев, оповещений и прочего полезного графического добра для оформления стрима! Да есть и платные варианты от 3 до 25 баксов, но поверти те варианты что они предлагают стоят своих денег!

8. Visualsbyimpulse.com

Как сделать интерфейс на стриме

Сотни бесплатных и премиальных оверлеев, логотипов переходов и заставок все это вы найдете на Visualsbyimpulse! Очень интересные варианты оформления вашей трансляции!

9. Streamplay

Как сделать интерфейс на стриме

Сервис ориентирован на создание очень качественных пакетов оформления трансляций! Да есть и дорогие предложения, и бесплатных оверлеев хватает! Конструктор и индивидуальные на высоте!

10. Twitch-designs.com

Как сделать интерфейс на стриме

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

11. Streamlabs.com

Как сделать интерфейс на стриме

Ну что тут говорить весь полный набор всего графического оформления для стримов на твиче совместно с программой OBS! Очень много бесплатных вариантов оформления, простота установки и редактирования! Короче все что нужно стримеру все на этом портале!

Это далеко не все сайты которые орентированны на графическое оформление стримов но это лидеры ниши и каждеого из них мы советуем!

Источник

Как создать панели для Твича

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

Как сделать интерфейс на стриме Есть несколько панелей для канала на Твиче.

Создание панели для Twitch

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

Для создания элементов надо зайти в свой канал и пролистать страницу вниз, появятся два переключателя. Выбирать следует тот, который отмечен надписью «Редактировать панели». Чтобы их добавить, сперва понадобится включить возможность работы с ними, для этого переключатель должен быть переведен в активное состояние. Информационная панель будет добавлена, если нажать на кнопку, отмеченную знаком «+».

Панель для стрима

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

Панель для доната

Сначала следует зарегистрироваться на одном из сервисов, которые позволяют получать донаты (пожертвования). Затем при создании специального компонента на канале «Твич» надо разместить в нем ссылку с формой для отправлений вознаграждения.

Как настроить свои панели

Для настройки можно воспользоваться следующей инструкцией:

Готовый элемент можно грузить в Twitch.

Размер панели

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

Чтобы отредактировать высоту, установите нужные размеры картинки. На размер может повлиять и количество абзацев в поле «Описание».

Оформление Твич-панели

Есть возможность выбора операций:

При выборе первого варианта на экране появится форма для редактирования, в ней надо заполнить все графы:

Писать всю информацию в одном элементе необязательно. Если разбить ее на небольшие блоки, для каждой из категорий может быть создана отдельная панелька.

Доступные варианты

Для редактирования доступны такие настройки:

В описании можно поработать над такими параметрами:

Добавление отступов

Чтобы красиво оформить содержимое поля «Описание», можно сделать отступы, то есть разбить текст на абзацы.

Что делать, если произошла ошибка

Ошибки в «Твиче» часто возникают из-за неправильных действий пользователей. На работу программы могут повлиять установка дополнительных приложений, многократные скачивания, вирусы. Разработчики платформы предусмотрели возможность восстановления работы, для чего были разработаны специальные коды. Их можно изучить на самом сайте Twich или обратиться за помощью в техподдержку. Способы решения проблемы будут зависеть от причин возникновения — для каждой из них предусмотрен отдельный код.

Источник

Создаем в Photoshop интерфейс для стрима

Сложность урока: Средний

Как сделать интерфейс на стриме

Проводите ли вы стримы на Twitch? Уже давно хотите сделать свой интерфейс для стрима? В этом уроке вы узнаете основы необходимые для создания интерфейса в Photoshop. Мы сделаем все с нуля, а затем добавим полученный результат в программу Streamlabs OBS.

На данный момент Streamlabs OBS доступна только на ПК. Однако, в качестве альтернативы вы можете воспользоваться OBS Studio с инструментом Muxy Alerts, если работаете на Mac. Алгоритмы работы в этих программах похожи.

Дополнительно, если вам нужен быстрый и простой способ создания интерфейсов для стрима, попробуйте Placeit! На сайте вы найдете много готовых шаблонов от интерфейсов до заставочных экранов для Twitch! Все шаблоны можно редактировать и настраивать под свои нужды.

Как сделать интерфейс на стриме

Примечание: Автор использовал платные материалы. В архиве вы найдёте альтернативный вариант изображений для выполнения урока.

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

1. Как работают интерфейсы OBS

Шаг 1

Для начала давайте разберемся что такое интерфейс стрима в OBS и как он работает.

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

Как сделать интерфейс на стриме

Шаг 2

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

В целом, работа в OBS состоит из трех ключевых элементов:

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

Как сделать интерфейс на стриме

2. Что такое интерфейс для стрима

Шаг 1

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

Как сделать интерфейс на стриме

Шаг 2

Ниже я приведу список основных элементов интерфейса, которые могут вам понадобиться:

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

Как сделать интерфейс на стриме

Шаг 3

Так как понять, что именно стоит добавить на интерфейс? Советую учитывать несколько моментов:

Где находится точка внимания? Забавно, когда на экране много ярких и красивых элементов, но фокус все же должен быть на самом стриме, а не на количестве подписчиков или донате. Например, если вы стримите игру, то она должна быть точкой внимания вашей трансляции.

Другие элементы дополняют ваш стрим. Дополнительный контент должен улучшать вашу трансляцию, а не мешать ей.

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

Целостность. Если вы хотите подчеркнуть свой бренд, то дизайн интерфейса должен быть целостным. Логотип, фирменные цвета – все должно сочетаться друг с другом. Но это не значит, что нельзя экспериментировать. Важно помнить, что гармония в дизайне интерфейса сделает вашу работу более привлекательной. Например, использование шести разных шрифтов не самый лучший выбор и будет выглядеть слишком хаотично.

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

Как сделать интерфейс на стриме

3. Создаем интерфейс для стрима

Шаг 1

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

Открываем программу и создаем новый документ File – New (Файл – Новый).

В открывшемся окне устанавливаем размер для разрешения Full HD – 1920 х 1080 пикселей. Это будет размер всей видимой области интерфейса.

Как сделать интерфейс на стриме

Шаг 2

Перед нажатием кнопки ОК давайте переключим Background Contents (Содержимое фона) на Transparent (Прозрачный фон).

Закончив с настройкой, жмем ОК.

Как сделать интерфейс на стриме

Шаг 3

Для этого урока мы создадим интерфейс из следующих элементов:

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

Начинаем с создания нового слоя. Это можно сделать на панели Window – Layers (Окно – Слои), как показано ниже. Чтобы не путаться, я даю понятные названия слоям. Для этого на панели слоев дважды кликаем по названию слоя левой кнопкой мышки.

После этого активируем Polygonal Lasso Tool (L) Как сделать интерфейс на стриме(Прямоугольное лассо) (отмечено на скриншоте ниже) и мышкой рисуем параллелограмм. Каждый клик мышью – это опорная точка выделения. Чтобы нарисовать идеально ровную линию, удерживайте клавишу Shift!

В конце заливаем выделение черным цветом, используя инструмент Paint Bucket Tool Как сделать интерфейс на стриме(G) (Заливка).

Как сделать интерфейс на стриме

Шаг 4

Дублируем этот слой. Для этого кликаем правой кнопкой по слою на панели слоев и выбираем Duplicate Layer (Создать дубликат) или жмем сочетание клавиш Ctrl+J.

Всего нам нужно три копии этого слоя, по одной на каждый тип взаимодействия со зрителями.

Как сделать интерфейс на стриме

Шаг 5

Объединяем все три слоя вместе.

Для этого с зажатой клавишей Shift выбираем их на панели слоев. Жмем по ним правой кнопкой мышки и применяем Merge Layers (Объединить слои).

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

Как сделать интерфейс на стриме

Шаг 6

Таким же образом дублируем объединенный слой.

У нас появятся три новые копии параллелограммов. С помощью Move Tool Как сделать интерфейс на стриме(V) (Перемещение) корректируем их положение. Если вы полностью повторяете мои действия, то смещаем копию чуть выше оригинала, как показано ниже.

Как сделать интерфейс на стриме

Шаг 7

Выбираем оригинальный слой и в верхней части панели слоев жмем на значок с шахматным узором, чтобы заблокировать прозрачные пиксели слоя для редактирования. Это позволит нам рисовать на слое, не беспокоясь о том, что штрихи выйдут за пределы объектов.

Для переднего плана выбираем синий цвет, а для фона – голубой. Или можете подобрать другие цвета. Для этого на панели инструментов кликаем по цветному квадрату, чтобы открыть окно выбора цвета.

Как сделать интерфейс на стриме

Шаг 8

Заливаем нижнюю копию градиентом. Для этого активируем инструмент Gradient Tool Как сделать интерфейс на стриме​ (G) (Градиент). Кликаем левой кнопкой мышки и тянем ее, чтобы выполнить заливку.

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

Как сделать интерфейс на стриме

Шаг 9

Давайте добавим текст. Для этого активируем Text Tool Как сделать интерфейс на стриме(T) (Текст). На скриншоте надпись плохо видно, но на первой плашке я написала new follower (новый фоловер).

Давайте добавим на этот текст обводку, чтобы улучшить видимость.

Для этого выбираем текстовый слой и переходим Layer – Layer Style – Stroke (Слой – Стиль слоя – Выполнить обводку). Или жмем на кнопку Add a Layer Style (Добавить стиль-слоя) в нижней части панели слоев и выбираем Stroke (Выполнить обводку).

Как сделать интерфейс на стриме

Шаг 10

Вот так выглядят настройки стиля слоя. Можете скопировать мои значения! Я установила толщину на 3 пикселя.

Закончив с этим, жмем ОК.

Как сделать интерфейс на стриме

Шаг 11

Трижды повторяем весь процесс и добавляем текст с обводкой на каждой плашке.

Как сделать интерфейс на стриме

Шаг 12

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

Для этого я снова воспользовалась инструментом Text Tool Как сделать интерфейс на стриме(T) (Текст) и сгруппировала все слои с тестовым контентом в отдельную папку (Ctrl+G). Папки (или группы) также помогают навести порядок и не путаться в большом количестве слоев. Я буду часто использовать их в уроке, но вам необязательно это делать.

Как сделать интерфейс на стриме

Шаг 13

Давайте добавим плашку для социальных сетей.

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

Сначала инструментом Polygonal Lasso Tool (L) Как сделать интерфейс на стриме(Прямоугольное лассо) рисуем выделение. Затем с помощью Paint Bucket Tool (G) Как сделать интерфейс на стриме(Заливка) заполняем его любым цветом – я выбрала черный.

Как сделать интерфейс на стриме

Шаг 14

Далее мы повторим процесс и создадим эффект, как на предыдущих плашках.

Наша задача – создать такой же эффект на блоке для социальных сетей, чтобы все элементы интерфейса были оформлены в едином стиле.

Как сделать интерфейс на стриме

Шаг 15

Теперь добавим контент на этом блоке.

Здесь можно написать все, что угодно: иконки соц сетей, имена, ссылки, напоминания и т.д. В нашем случае я добавлю ссылки на две социальные сети, чтобы они всегда были на экране, если кто-то из зрителей захочет связаться с автором.

Для этого используем инструмент Text Tool (Т) Как сделать интерфейс на стриме(Текст). Пишем текст для ссылок, а затем вставляем иконки соц сетей.

По ссылке вы можете найти иконки, которые я использовала в уроке.

Как сделать интерфейс на стриме

Шаг 16

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

Повторяем весь процесс из шагов 14 и 15.

Также стоит учесть разрешение веб-камеры. В качестве основы я использовала размер 640 х 480 пикселей. Можете создать новый документ такого размера, затем скопировать его на рабочий документ и изменить масштаб с помощью свободной трансформации (Ctrl+T)).

Я уменьшила размер блока для веб-камеры с зажатой клавишей Shift, чтобы сохранить пропорции.

Как сделать интерфейс на стриме

Шаг 18

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

Если хотите сделать так же, можете использовать свое собственное фото. Проверьте, чтобы снимок находился выше слоя с черным прямоугольником.

Затем выбираем слой с фото, кликаем по нему правой кнопкой мышки и применяем Create Clipping Mask (Создать обтравочную маску). Теперь картинка будет отображаться только в пределах прямоугольника ниже.

Как сделать интерфейс на стриме

Шаг 19

Давайте добавим область с индикатором набора подписчиков. Я хочу, чтобы она выглядела, как индикатор прогресса.

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

Как сделать интерфейс на стриме

Шаг 20

Я решила добавить дополнительные детали на интерфейсе.

Для этого создаем новый слой. Затем с помощью Rectangular Marquee Tool (М) Как сделать интерфейс на стриме(Прямоугольное выделение) рисуем горизонтальную полосу. Заливаем ее черным цветом с помощью Paint Bucket Tool (G) Как сделать интерфейс на стриме(Заливка).

Как сделать интерфейс на стриме

Шаг 21

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

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

Как сделать интерфейс на стриме

Шаг 22

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

Можете поэкспериментировать и попробовать иначе изобразить преломляющуюся линию.

Как сделать интерфейс на стриме

4. Сохраняем графику для стрима

Шаг 1

Мне нравится то, что у меня получилось. Теперь можно сохранить результат для OBS!

Для начала скрываем или удаляем весь тестовый контент (текст и фото), который мы добавили для наглядности.

После этого некоторые элементы нужно объединить в один слой. Например, верхний ряд блоков мы сохраним в виде одной картинки.

С зажатой клавишей Shift выделяем нужные слои. Кликаем по ним правой кнопкой мышки и выбираем Merge Layers (Объединить слои).

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

Как сделать интерфейс на стриме

Шаг 2

Вот так выглядят мои слои после объединения. Больше нет папок или отдельных слоев с деталями.

Ниже на скриншоте включена видимость только трех плашек справа (включать/выключать видимость слоев можно по нажатию на значок глаза на панели слоев). Обратите внимание, что все составные части трех плашек находятся на одном слое: черные параллелограммы, синие параллелограммы и текст.

Выбираем слой, который хотим экспортировать.

Как сделать интерфейс на стриме

Шаг 3

Переходим Select – All (Выделить – Все), чтобы выделить все рабочее полотно.

Как сделать интерфейс на стриме

Шаг 4

Затем Edit – Copy (Редактирование – Скопировать) и создаем новый документ.

На этом документе переходим Edit – Paste (Редактирование – Вставить). В результате Фотошоп вставит скопированный контент на новом документе, как показано ниже. Обратите внимание, что это только одна часть интерфейса, которую мы объединили в один слой.

Сохраняем документ File – Save as (Файл – Сохранить как) в виде PNG-картинки с прозрачным фоном.

Повторяем процесс и сохраняем остальные детали интерфейса. В теории, вы можете экспортировать весь интерфейс в виде одного PNG-файла, но для удобства я предпочитаю делить его на отдельные элементы. Выбор за вами!

Как сделать интерфейс на стриме

5. Как использовать интерфейс для стрима

Шаг 1

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

Проверьте, что у вас установлена программа. Если нет или у вас возникли трудности с установкой, тогда рекомендую почитать руководство на официальном сайте.

Начинаем с создания новой сцены. Слева находится панель Scenes (Сцены). В правом углу жмем на плюс, чтобы создать новую сцену. В результате появится окно, в котором вам нужно ввести название сцены.

Я назвала свою сцену «My Overlay». Здесь можете выбрать любое название.

Как сделать интерфейс на стриме

Шаг 2

Сейчас сцена пустая, так как мы не создали ни одного источника.

На центральной панели Sources (Источники) жмем на плюс.

Как сделать интерфейс на стриме

Шаг 3

Откроется окно с большим количество настроек. Из списка стандартных источников нам нужно выбрать Image (Изображение) и нажать на кнопку Add Source (Добавить источник).

Как сделать интерфейс на стриме

Шаг 4

В следующем окне вводим название нового источника.

Если выключить параметр Add a new sources instead (Добавить новый источник), то мы сможем выбрать картинку, которую добавляли ранее. Очень удобно!

Как сделать интерфейс на стриме

Шаг 5

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

На примере ниже я выбрала PNG-файл с прозрачным фоном, на котором изображены три черные плашки.

Выбрав нужную картинку, жмем на кнопку Done (Готово).

Как сделать интерфейс на стриме

Шаг 6

Как видите, Streamlabs OBS добавила картинку на видимой области экрана.

Если захватить мышкой картинку, можно настроить ее положение и масштаб.

Повторяем процесс и добавляем остальные элементы интерфейса.

Как сделать интерфейс на стриме

Шаг 7

Посмотрите на пример ниже.

Я импортировала в программу горизонтальную линию (назовем ее «верхняя линия») и три параллелограмма (назовем их «область уведомлений»).

Однако, они расположены в неправильном порядке. Верхняя линия не должна находиться поверх области уведомлений.

Как сделать интерфейс на стриме

Шаг 8

К счастью, это очень легко исправить!

Для этого левой кнопкой мышки на панели Sources (Источники) просто меняем их местами. Теперь все находится на своих местах, как и было изначально продумано.

Как сделать интерфейс на стриме

Шаг 9

Вот так выглядит мое окно Streamlabs OBS после того, как я добавила все картинки.

Для наглядности я добавила статичный фон. Здесь обычно отображается геймплей или обычный стрим. Если у вас возникли трудности с импортом фона, вернитесь к шагу 2.

Но мы еще не закончили! Как насчет уведомлений? На панели источников жмем на плюс, чтобы добавить новый источник.

Как сделать интерфейс на стриме

Шаг 10

Однако, в этот раз нам нужно выбрать Stream Label (Метки трансляции). Если в окне добавления источника у вас нет виджетов, то нужно зайти в свой аккаунт Twitch, Youtube, Facebook или Mixer. Выбрав нужный виджет, жмем Add Source (Добавить источник).

Как сделать интерфейс на стриме

Шаг 11

Как и с картинками, включаем Add a new source instead (Добавить новый источник), чтобы добавить новый источник, а не использовать старый.

Пишем название источника и жмем на кнопку Add Source (Добавить источник).

Как сделать интерфейс на стриме

Шаг 12

Для этого виджета есть множество параметров настройки.

Обязательно обратите внимание на параметр Label Type (Тип ярлыка). Здесь мы выбираем Most Recent Follower (Последний фоловер), потому что именно эту информацию я хочу добавить на одной из плашек. Но вы ознакомьтесь со всем списком! На выбор доступно очень много других меток, например, донатер месяца.

Также можно изменить шрифт, цвет и непрозрачность текста. Настройте все в соответствии с вашим дизайном. Я выбрала шрифт Quinta Pro, размер – 36 и цвет – #0000faff.

Закончив, жмем Done (Готово), чтобы применить изменения.

Как сделать интерфейс на стриме

Шаг 13

Как и с картинками, хватаем текст и корректируем его расположение. Я разместила метку на соответствующем черном параллелограмме – new follower.

Как сделать интерфейс на стриме

Шаг 14

Повторяем действия и добавляем все необходимые метки, которые должны динамически меняться во время стрима.

Как видите, на выбор доступно очень много меток. Я добавила новый фоловер, новый подписчик и последний донат.

Как сделать интерфейс на стриме

Шаг 15

Теперь добавим цель. Начнем с создания нового источника.

В окне с виджетами выбираем Subscription Goal.

Как сделать интерфейс на стриме

Шаг 16

Снова добавляем новый источник вместо уже созданного, вводим название и настраиваем. Затем жмем на кнопку Add Source (Добавить источник).

Как сделать интерфейс на стриме

Шаг 17

Вот так выглядят настройки виджета подписки.

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

Закончив с настройкой, жмем на кнопку Start Goal (Запустить цель).

Как сделать интерфейс на стриме

Шаг 18

Нажав Start Goal (Запустить цель), слева в окне появится предпросмотр индикатора.

Если вы хотите изменить настройки, нажмите на кнопку End Goal (Остановить цель).

Закончив, жмем на кнопку Done (Готово).

Как сделать интерфейс на стриме

Шаг 19

Хватаем индикатор мышкой и настраиваем его положение. Если потянуть за угловые точки, можно настроить его размер.

Как сделать интерфейс на стриме

Шаг 20

Давайте пройдемся по другим источникам, которые могут вам пригодиться.

Для начала выбираем Display Capture (Захват экрана). Этот источник будет отображать на стриме ваш рабочий стол. Я использую его, когда хочу показать на трансляции несколько программ одновременно. Например, когда использую Photoshop и After Effects.

Как сделать интерфейс на стриме

Шаг 21

Можно выбрать Game Capture (Захват игры). Как понятно из названия, этот источник умеет стримить игровой процесс. Большинство игр у меня на компьютере работают корректно только с этим источником. Просто выбираем игру и готово!

Как сделать интерфейс на стриме

Шаг 22

Window Capture (Захват окна) захватывает отдельное окно на компьютере. Я использую это, когда мне нужно показать, например, только Photoshop.

Как сделать интерфейс на стриме

Шаг 23

Video Capture Device (Устройство захвата видео) – этот источник я использую, когда нужно захватить изображение с веб-камеры. Я выбираю ее в качестве видео источника и вставляю в область для веб-камеры.

Как сделать интерфейс на стриме

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

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

Это только малая часть того, что вы можете делать в OBS. Удачи в стриминге!

Как сделать интерфейс на стриме

Автор: Daisy Ein

Эти уроки могут вас заинтересовать

По заданным фильтрам ничего не найдено

Попробуйте изменить критерий поиска, или сбросить фильтры.

Комментарии 3

Сделано по вашему уроку

Как сделать интерфейс на стриме

Здравствуйте, архива к уроку по ссылке нет

Nethert2007@rambler.ru, Здравствуйте! Исправлено.

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры

Работа Дня Месяца

Как сделать интерфейс на стриме

Как сделать интерфейс на стриме

Хотите узнавать
обо всех событиях?

Выберите, куда хотите получать уведомления

Получи скидку 15%
на планшет HUION

Как сделать интерфейс на стриме

Более 50 моделей для самого требовательного пользователя

© Creativo, 2021 г.
Все права защищены

Разделы

Информация

Статистика

Переход по внешней ссылке

Creativo не несёт ответственности за безопасность за пределами нашего сообщества.

Будьте осторожны и внимательны.

Как сделать интерфейс на стриме

1″ > Вы можете выбрать до <> вариантов. Голос будет распределён равномерно между всеми выбранными.

Создать опрос

Название опроса

Ответ <<(index + 1)>> Удалить ответ

Сортировка:

Опрос

По вашему запросу ничего не найдено

Попробуйте изменить критерий поиска, или сбросить фильтры.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *