Как сделать картинку на стрим
Красивое оформление твич канала по шаблонам
Оформление твича состоит из следующих элементов дизайна:
Первое, о чем нужно подумать при оформлении стрима, это о том, хорошо ли дизайн сочетается с именем канала, изображением профиля (логотипом), изображением обложки и общим «тоном» видеоблога.
Оверлей темплейт
Оверлей для стрима – это рамка вокруг экрана. Самая важная часть оформления для стрима, которой вы должны уделить больше времени. Если раньше оверлеи перегружали информацией, то с 2020 года стримеры начали уменьшать количество помех на экране, чтобы зрители могли сосредоточиться на играх.
В любом случае это решение остается за блогером. Хотите добавить на экран максимум деталей и ссылок или остаться минималистичным — делайте.
Рекомендуем добавить в оверлей следующие детали оформления стрима:
Программа StreamLabs пригодится профессиональным стримерам.
Как выбрать оверлей для Twitch
Оверлеи делают анимированными или статичными. Выбор типа оверлея зависит от стиля, бренда и желания автора отвлечь своих зрителей от игры на экране компьютера.
Но иногда зрители присутствуют на трансляции только ради геймера, и здесь анимированный оверлей для стрима работает на 100%!
Для личного общения зрителям ставиться большая рамка для чата на экране с уведомлениями о последних подписчиках и донаторах. Рекомендуется загрузить анимированный сверкающий оверлей для стрима с вебкой вокруг лица ведущего.
Шапки и баннеры для твича
Баннеры по-другому называют обложками, рекомендуемый размер баннера твич составляет 1200*480 пикселей. Геймерские баннеры Twitch выбирайте ярких расцветок.
Скачать готовые баннеры для твича можно в разделе «шаблоны».
Вместе с названием канала пишите на баннере информацию для аудитории. Например, расписание трансляций, партнерские ссылки и адреса аккаунтов в социальных сетях. Делайте надписи в фотошопе или в бесплатных онлайн-сервисах Канва и Крелло.
Стартовая обложка для стрима
Такие превью для стрима готовят зрителей к началу трансляции. Здесь можно использовать обратный отсчет, воспроизводить музыку без авторских прав и отображать расписание трансляций на другие дни.
Заставка BRB
Установка картинки для оформления твича отключит микрофон и покажет, что вы отошли от компьютера.
Картинка в конец трансляции
При завершении трансляции на экран выводят картинку с надписью «Стрим окончен».
Оффлайн баннер
В промежутках между трансляциями добавьте картинку на видеоплейере. Это изображение называют оффлайн баннер видеопроигрывателя для твича. Оффлайн баннер показывает зрителям, зашедшим на Твич канал тему и дату следующего стрима.
Установить оформление твич канала можно в панели инструментов > Настройки> Канал и «Баннер видеоплейера».
Звуковые оповещения
Это всплывающий GIF фон для стрима со стандартным звуковым эффектом, который настраивают на усмотрение блогера.
Изображения с наложенным текстом или анимированный фон для стрима добавляют в оповещения. Но не забывайте и о звуке — большинство стримеров используют стандартные пресеты в StreamLabs или StreamElements. Рекомендуем сделать собственное, уникальное оповещение, используя, например, голос автора.
Некоторые блогеры любят длинные и экстравагантные сигналы. Но подумайте о зрителях: громкие и назойливые звуки могут раздражать зрителей.
Оповещения включают для новых подписчиков и донатов, битов и рейдов с хостами. Включайте и выключайте звуковые уведомления с помощью Moxy, Stream Labs и Stream Elements.
Кнопки Twitch
Несмотря на то, что твич панели рекомендует делать 320 x 200 пикселей, советуем использовать размер не менее 600 x 300 пикселей, чтобы повысить качество.
Обычно Twitch уменьшает разрешение загруженных картинок.
Панели для твича должны показывать зрителям дополнительную информацию, которая может их заинтересовать.
Оформленные в одном стиле кнопки для twitch канала открывают информацию:
На кнопках рекомендуется писать дублирующую информацию, которая уже присутствует на оформление твич канала в обложке и оффлайн баннере.
Логотип стримера
Значок канала делают одинаковым на стриме и во всех социальных сетях, куда ведут ссылки с видеоблога. При переходе в профиль вк или инстаграм зритель должен увидеть знакомый аватар для твича.
Принципы хорошего логотипа:
Если вы создаете канал Twitch, основанный на играх ужасов, подумайте о цветах и формах, шрифте и расположении логотипа. Хороший пример:
На этом закончим обзор про оформление для стрима, пишите вопросы в комментариях. Заказать оформление канала YouTube или профиля для потоковых трансляций можно по ссылке верхнего меню.
Как оформить свой канал на Твиче
Оформление «Твич»-канала как часть маркетинга — это то, что способно заставить случайно зашедшего пользователя уделить внимание трансляции или же дождаться ее, если стример пока оффлайн. Потому важно ответственно подходить к созданию дизайна.
Как оформить свой «Твич»-канал
К элементам, создающим дизайн канала, относятся:
Эти элементы способны создать атмосферу до того, как зритель запустит трансляцию.
Создание баннера
Баннеры как для превью, так и для шапки можно заказать на различных платформах в интернете, но можно и создать самостоятельно. Для этого хватит базовых знаний программы Photoshop или аналогичной. В качестве фоновой картинки можно взять любую, найденную в интернете, однако лучше убедиться, что автор не против использования изображения третьими лицами.
В качестве альтернативы можно воспользоваться онлайн-сервисами создания элементов дизайна для различных платформ. Из преимуществ этого способа можно выделить наличие шаблонов и библиотек с картинками, шрифтами и т.д. Многие подобные сервисы поддерживают загрузку собственных изображений.
Выбор размеров
Минимальный размер баннера для шапки — 900 x 480 пикселей, а для превью видео — 1280 x 720. Однако такое разрешение предназначено скорее для ноутбуков с соотношением сторон 16:9 и гаджетов с меньшими экранами — смартфонов и планшетных ПК. Для корректного отображения на всех устройствах, включая Smart-телевизоры с большой диагональю, и во всех интернет-браузерах (Google Chrome, Firefox Browser и т.д.) рекомендуется делать превью с разрешением 2400 x 1350 и обложку 2600 x 480.
Картинки для «Твича»
Использование картинок в дизайне канала не должно нарушать ничьих авторских прав, иначе у стримера могут возникнуть проблемы (вплоть до блокировки аккаунта). Безопаснее всего создавать изображения самостоятельно либо покупать их. Однако в сети достаточно библиотек с бесплатными картинками. Кроме того, многие авторы открыто разрешают использование своих творений, выложенных в общий доступ.
Кнопки для Twitch
На главной странице можно активировать блоки, которые позволят показывать текст, ссылки и стилизованные кнопки. Для этого необходимо сдвинуть ползунок «Редактировать панели». Он находится под блоком с текущей трансляцией. Внизу появится лента с расширениями и кнопка для создания блоков. В этой форме будут поля для набора текста и кнопка для загрузки картинки. В описании можно использовать язык разметки Twitch.
Если добавить ссылку в специальное поле, тогда картинка станет кнопкой для перехода по ней. Дизайн кнопок лучше подбирать под дизайн шапки и стрима, поскольку плохо сочетающиеся изображения могут оттолкнуть посетителей.
Дизайн «Твич»-канала
Дизайн — это не только баннеры и кнопки. Важную роль играет и оформление элементов самого стрима, таких как:
И если чат можно просто разместить где-нибудь в углу либо не размещать совсем, то остальным элементам стоит уделить больше внимания.
Готовые баннеры для «Твича»
Оформление стрима
Дизайн элементов на стриме должен поддерживать общую атмосферу и соответствовать тематике канала. Например, если на канале транслируется игра компьютерная в средневековом сеттинге, стоит оформить элементы в том же стиле. Если же канал посвящен, например, спорту, можно использовать в оформлении изображения, связанные с этой темой.
Что делает редактор на «Твиче»
Если вы стали full-time стримером, или же вам просто не хватает времени постоянно обновлять информацию и перестраивать при необходимости элементы оформления канала, можно найти редактора. Это может быть нанятый работник, друг, которому вы доверяете, или же один из подписчиков, который захочет поддержать своего кумира таким образом.
Пользователь с полномочиями редактора получает следующие возможности:
Готовые шаблоны оформления Youtube и Twitch
Шаблоны оформления, готовые к использованию на Twich.TV и YouTube, можно найти на таких ресурсах, как:
Новости и статьи
Всё о продвижении стримов. Новости о нас, кейсы, отзывы, исследования, экспертные мнения, ответы на самые важные вопросы.
Как хорошо выглядеть на стриме
Как хорошо выглядеть на стриме
Большинство стримеров не задумываются над качеством своей “картинки” с веб-камеры, а зря. Хорошо выглядящий стример привлекает к себе внимание не хуже отличной игры. Сегодня мы бы хотели поделиться с вами некоторыми советами, как выглядеть лучше на стриме.
1) Установите камеру на уровне ваших глаз
Так вам будет проще “посмотреть” на ваших зрителей, и не придется задирать или опускать голову, это создаст эффект прямого общения.
2) Не ставьте веб-камеру напротив окна
Лучше расположите камеру перед окном, так вы легко избежите засветов изображения и добавите естественный свет на себя.
3) Не бойтесь использовать свет
Экспериментируйте, добавляйте или убирайте свет, добейтесь максимального освещения без засветов. Можете поставить свет позади себя или наоборот перед собой, работа со светом — это очень важно.
4) Купите хорошую камеру
Да, элементарно — хорошая веб-камера (например Logitech C920) даст вам очень хорошую картинку, с которой вам все равно придется поработать, но уже меньше. Также некоторые стримеры, проводящие трансляции в основном в категории Just Chatting любят использовать дорогие “зеркалки”, можете посмотреть и в этом направлении, никто не запрещает.
5) Настройте свою веб-камеру
Очень хорошим решением будет не просто взять и поставить новую веб-камеру, но еще и грамотно настроить ее — выставить баланс белого, подкрутить контрастность, яркость и прочее.
7) Смотрите в камеру
Когда вы общаетесь в жизни с людьми, вы стараетесь смотреть им в глаза, так как это позволяет вашему собеседнику понять, что вы открыты для него и ничего не скрываете, в стриминге это работает точно так же. Постарайтесь как можно чаще при общении со своим чатом смотреть в веб-камеру, люди будут видеть ваш взгляд и смогут внимательнее следить за вашими словами.
Следуя этим простым правилам вы сможете поднять уровень картинки на своем стриме до очень хорошего уровня и привлечь больше аудитории.
Создаем в 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)>> Удалить ответ
Сортировка:
Опрос
По вашему запросу ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.