Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Design & IllustrationAdobe Photoshop

Интро

Вы стримите на Twitch’е? Когда-нибудь хотели создать ваш собственный оверлей для стрима? В этом уроке мы рассмотрим основы создания стрим оверлея, для вашей трансляции в Adobe Photoshop. Мы cоздадим свой собственный Twitch оверлей, а затем мы загрузим его в Streamlabs OBS. ...

Вы стримите на Twitch’е? Когда-нибудь хотели создать ваш собственный оверлей для стрима? В этом уроке мы рассмотрим основы создания стрим оверлея, для вашей трансляции в Adobe Photoshop. Мы cоздадим свой собственный Twitch оверлей, а затем мы загрузим его в Streamlabs OBS.

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

Ко всему прочему, мы взглянем на быстро настраиваемые Twitch оверлеи для стримов - и даже на OBS Оверлей Генератор, который вы сможете найти на сайте Placeit, на которым вы найдете большое количество контента для стримов и графики для вашего Twitch канала – от оверлеев до вступительных экранов и Twitch панелей. Если вы ищете инструмент для быстрого создания Twitch оверлеев, это именно то, что вам нужно, поскольку весь доступный контент полностью изменяем.

Так что, если вам нужен простой и быстрый способ создания OBS оверлеев, возможно вам стоит взглянуть на Placeit!

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Теперь, давайте углубимся в тему и поговорим о том, как оверлеи работают и сделаем свой собственный.

Что Вам Необходимо:

Следующие материалы были использование в данном уроке:

  • Quinta Font Family
  • Social Media Icons
  • Webcam Placeholder Image
  • Space Racing Game Imagery

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

1. Как Работают OBS Стрим Оверлеи

Шаг 1

Сначала, давайте поговорим о том, что такое OBS стрим оверлей и как это работает.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
Дизайн Оверлей Стрима для Twitch"а доступный на Placeit

Шаг 2

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

В общем, когда вы работаете с OBS, у вас есть три основных вещи, на которые стоит обратить внимание:

  • Первое. У нас есть графика или медиа файлы. Это контент, который мы создаем с помощью редакторов графических изображений, таких как Photoshop или другие программы по-вашему выбору.
  • Второе, у нас есть инструмент который генерирует контент, основанный на вашем стриме. OBS Studio, к примеру, не следит за вашими новыми подписчиками. Одна из моих любимых бесплатных программ для уведомлений на стримах - это Muxy Alerts, однако существует и много других альтернатив.
  • И третье, у нас есть программа для вещания, которая помогает собрать весь наш контент вместе. Один из примеров таких программ - OBS Studio.

Как уже было сказано раньше, мы будем использовать Streamlabs OBS — главный бонус — это то, что мы можем “пропустить” второй элемент. Streamlabs OBS управляет и оповещениями и трансляцией.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
Милый Пиксельный Стрим Оверлей из PlaceIt

2. Как Создать Стрим Оверлей

Шаг 1

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
Ретро Twitch Стрим Оверлей доступный на Placeit

Шаг 2

Взгляните на список элементов, которые, вы возможно, захотите использовать в своем оверлее:

Взаимодействие со зрителями - это может включать в себя последних подписчиков и последних донатеров.

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

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

Вебкамера - у многих стримеров есть вебкамера, чтобы зрители могли смотреть не только контент, который он транслируе, но и видеть самого стримера.

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

Сам Стрим - нам конечно же понадобится много свободного места для самой трансляции. Чаще всего это та область, где транслируется геймплей (если это игровой стрим).

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
Дизайн Стрим Оверлей доступный на Placeit

Шаг 3

Итак, как выбрать, что вам стоить добавить в ваше оверлей? Я бы посоветовал вам обратить внимание на следующие вещи:

На чем вы концентрируете внимание? Это здорово, когда у вас есть много интерактивных элементов на экране, однако убедитесь, что основное внимание зрителей сосредоточено на самой трансляции, а не декоративных элементах.

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

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

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

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
Настраиваемый OBS Стрим Оверлей доступный на Placeit

3. Как Создать Дизайн для Стрим Оверлея

Шаг 1

Итак, когда у нас уже есть идея того, что мы хотим включить в наш оверлей, давайте начнем создавать дизайн. Существует огромное количество путей создания дизайна - лично я люблю начинать работу в Adobe Photoshop и планировать весь дизайн там.

Откройте Adobe Photoshop и создайте Новый Документ.

Размер нашего Нового Документа должен быть 1920 на 1080 пикселей - это будет размер всей нашей видимой области.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 2

Прежде чем завершить создание нашего документа, давайте изменим Содержимое Фона на Прозрачное.

Как только вы закончили, нажмите Ок.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 3

В данном уроке, я собираюсь включить следующие элементы в мой макет:

  • элементы, которые взаимодействуют со зрителями
  • область для вебкамеры
  • ссылки на социальные сети
  • область для цели по количеству подписчиков
  • место для самой трансляции

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

Я начал с Cоздания Нового Слоя. Вы можете это сделать в Панели Слоев, как показано ниже. Я люблю давать названия своим слоям, чтобы все было хорошо организовано. Вы можете переименовывать слои, нажимая на их имена в Панели Слоев.

Затем, используя Инструмент Прямолинейное Лассо, подсвеченное в Панели Инструментов, я нарисовал многоугольник с помощью мышки. Каждое нажатие на точку создает ваше выделение. Дополнительный совет - зажмите Shift, когда вы рисуете вашу фигуру, чтобы создавать прямые линии.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 4

Затем, дублируйте этот слой. Чтобы сделать это, вам необходим использовать нажатие Правой Кнопки мыши (на PC) или нажать Левую Кнопку мыши, зажав Control (на Mac). В появившемся меню, выберите Создать Дубликат Слоя.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 5

Теперь, нам нужно слить эти слои в один.

Зажмите Shift, чтобы выделить несколько слоев сразу. Затем, нажмите Правую Кнопку мышки (на PC) или зажмите Control и нажмите Левую Кнопку мышки (на Mac). В появившемся меню нажмите на Обьединить Слои.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 6

Теперь, Дублируйте наш объединенный слой.

Таким образом у нас останется две копии тех же трех многоугольников. Используйте Инструмент Перемещения чтобы отрегулировать перемещение слоев - нам необходимо, чтобы один слой был "поверх другого", как показано ниже.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 7

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

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 9

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

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 9

Теперь, давайте добавим текст используя Инструмент Горизонтального Текста. Это сложно увидеть, но я написал "новый фолловер".

Поскольку наш текст довольно сложно увидеть, давайте добавим Обводку к тексту, чтобы улучшить его видимость.

Чтобы это сделать, выделите слой с текстом и затем нажмите Параметры Наложения в Панели Слоев. В новом открытом меню - выберите Обводку.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 10

Здесь вы можете увидеть наш Стиль Слоя - смело копируйте мои настройки! Я выбрал Обводку размером в 3 пикселя.

Как только вы довольны результатом, нажмите ОК.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 11

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 12

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

Я сделал это с помощью Инструмента Текст - и поместил эти слои в отдельную Папку. Вы может создать свои папки с помощью кнопки внизу Панели Слоев. Папки (или группы) это прекрасный способ, чтобы все было хорошо организовано. Я буду использовать их в этом уроке, однако это опционально.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 13

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

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

Я начал с выделения, с помощью Инструмента Прямолинейное Лассо. Затем, заполните пространство с помощью цвета, по вашему выбору, используя Инструмент Заливки - я вновь использовал черный цвет.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 14

Заметили здесь шаблон? Мы собираемся повторить процесс, с помощью которого мы создали наши черные фигуры:

  • Скопируйте слой.
  • Передвиньте Слой, используя Инструмент Перемещения так, чтобы один был "перед другим".
  • Закрепите Прозрачность Пикселей в Панели Слоев, чтобы мы не могли добавить цвет вне выделенной области.
  • Затем добавьте ваш градиент, используя Инструмент Градиента.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 15

Теперь, давайте добавим еще немного контента.

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

Я использовал Инструмент Текста, для создания ссылок на соцсети и затем скопировал и вставил несколько иконок социальных сетей в свой макет.

Здесь вы можете найти иконки соцсетей, которые я выбрал для своего макета, если вы тоже хотите их использовать!

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 16

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

Повторите наши действия из 14ого и 15ого Шагов - только теперь для места, где будет наша вебкамера.

Вы можете принять во внимание разрешение вашей вебкамеры. Я выбрал за основу, работать с размером 640 на 480 пикселей (создайте новый документ с этим размером, вставьте в ваш документ, а затем масштабируйте с помощью Инструмента Перемещения или Инструмента Трансформации. )

Затем, я уменьшил масштаб этой фигуры, чтобы быть уверенным, что соотношение сторон останется прежним.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 18

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

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

Затем выберите слой изображения и нажмите правую кнопку мышки (для PC) (или зажмите control и нажмите левую кнопку мышки (на Mac)) и выберите Создать Обтравочную Маску, из появившегося меню. Теперь, мы будет видеть тестовое изображение, вместо черного прямоугольника.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 19

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

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 20

Я решил что хочу добавить некоторые дополнительные декоративные элементы в свой макет.

В данном случае, я создал Новый Слой. Затем, я использовал Инструмент Прямоугольная Область для того, чтобы создать горизонтально выделение. А затем я использовал Инструмент Заливки, чтобы закрасить эту область черным цветов. Звучит знакомо, неправда ли?

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 21

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

Используйте любой цвет, который вам нравится!

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 22

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

Экспериментируйте с разными визуальными направлениями!

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

4. Как Подготовить Графику для Стрим Оверлея

Шаг 1

Наконец, я доволен своим макетом - теперь давайте подготовим его для OBS!

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

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

Зажмите Shift и выберите слои, которые вы хотели бы объединить. Затем нажмите правую кнопку мыши (на PC) или нажмите control и левую кнопку мыши (для Mac) и выберите Объединить Слои в выпавшем меню.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 2

Здесь вы можете увидеть пример моего макета, после того как все элементы были соединены. Больше никаких папок или отдельных частей каждого элемента в моем макете!

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

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 3

Теперь, нам необходимо выделить этот контент. Следуйте в Выделение > Все, чтобы выделить весь холст целиком.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 4

Затем, Скопируйте (Редактирование > Скопировать) и Создайте Новый Документ.

Теперь, Вставьте (Редактирование > Вставьте)-Photoshop должен вставить контент, который мы скопировали из нашего макета, так как показано на примере ниже. Обратите внимание, что это только одна часть объединенного макета, который мы выделили.

Сохраните этот документ как PNG файл - чтобы фон оставался прозрачным.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

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

Шаг 1

Теперь, давайте возьмем нашу работу и обсудим, как нам добавить стрим оверлей в наш OBS. Несмотря на то, что мы будем использовать Streamlabs OBS в этом уроке, этот процесс аналогичен и для OBS Studio - добавление ваших ресурсов, чтобы вы могли начать трансляцию используя их.

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

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

Я решил назвать мою сцену "Мой Оверлей". Называйте свои сцены так, как вам больше нравится!

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 2

Но, в нашей сцене еще ничего нет! Это потому что, мы не определили Источники.

Еще раз, нажмите на значок плюса, на этот раз в Источниках.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 3

Это открывает для нас целый ряд вариантов! Мы начнем с изображения.

Выберите Изображение в качестве источника и затем нажмите Добавить Иcточник.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 4

Теперь вы увидите новое окно. Нажмите на кнопку "Вместо этого добавить новый источник", выберите имя для вашего источника и затем нажмите Добавить Источник.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 5

Теперь, выберите изображение, которое вы хотите импортировать - в данном случае, это будет одно из Изображений, которые мы экспортировали из Photoshop.

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

Как только вы выбрали изображение, нажмите Готово.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 6

Теперь вы можете видеть, что Streamlabs OBS импортировал наше изображение в видимую область.

Нажмите на изображение и перетащите его туда, где бы вы хотели его разместить в вашем макете.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 7

Давайте посмотрим на пример.

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

Однако, как вы можете заметить, они находятся в неправильном порядке - линия не должна пересекать прямоугольники.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 8

К счастью, мы можем менять порядок источников очень простым способом.

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 9

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

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

Но, мы еще не закончили! Что насчет оповещений? Нажмите на кнопку Плюс в ваших Источника.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 10

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

Выберите Метка Стрима в списке Источников и затем нажмите Добавить Источник.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 11

Так же как и с добавлеными изображениями, нам необходимо выбрать "Вместо этого добавить новый источник", чтобы создать новый источник.

Выберите название для вашего нового источника, а затем нажмите Добавить Источник.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 12

В разделе Метки Стрима, вы можете увидеть огромное количество различных опций!

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

Вы можете изменить шрифт, цвет и прозрачность! Измените их так, чтобы они хорошо подходили к дизайну вашего оверлея. Я выбрал шрифт Quinta Pro, с размером в 36 пикселей и использовал следующий код цвета: #0000faff.

Нажмите Готово, когда вы будете довольны своим результатом.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 13

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 14

Повторите этот процесс для всех слоев с динамическим текстом в вашем макете.

Еще раз повторюсь, вы можете найти огромное количество Стрим Меток - я выбрал отображение самого нового фолловера, самого нового подписчика и самого последнего донатера.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 15

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

В панели Добавить Источник, нам необходимо выбрать Количество Последователей, вместо Изображения или Меток Стрима. Вы можете найти это в разделе Виджеты.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 16

Добавьте новый источник вместо существующего и назовите его. Затем, нажмите Добавить Источник.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 17

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

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

Нажмите Готово, когда закончите с настройками.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 18

Как только вы нажмете Готово, вы увидите предварительный просмотр вашей панели.

Если вы хотите изменить какие-то параметры, нажмите Конечная Цель и измените их.

Как только вы закончили изменять ваши параметры, нажмите Готово.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 19

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 20

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

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 21

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 22

Захват Окна, работает именно так, как называется - он захватывает определенное окно на вашем компьютере. Это очень удобно, если вы например хотите транслировать только Photoshop и ничего больше.

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Шаг 23

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

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

И Это Только Начало!

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

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

Это всего лишь общий обзор на то, что вы могли бы создать - удачи вам с вашими стрим оверлеями!

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Я люблю проводить эксперименты со всякими штуками для моего стрима - видео, панели, свет. Если вам необходима дополнительная помощь в настройке внешнего вида вашего стрима или канала, возможно вам стоит взглянуть на Placeit! Это очень легкая в освоении программа для создания оверлеев.

Здесь вы найдете огромное количество контента, который очень легко изменять и использовать. Проверьте сами!

Как Создать Twitch OBS Оверлей для Стрима в Photoshop...

Если вам понравился этот урок, возможно вам стоит взглянуть на следующие статьи!

  • Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
    Ресурсы
    32 Лучших Баннера для Twitch"а Созданных с Помощью Генератора Баннеров (включая Оффлайн Генератор Дизайна Баннеров)
    Nona Blackman
  • Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
    Рекламные Баннеры
    Как Создать Баннер для Twitch"а Используя Генератор Баннеров
    Andrei Stefan
  • Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
    Фотоэффекты
    Как Создать Photoshop Action с Мягким Светом для Эффекта Подсветки
    Marko Kožokar
  • Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
    Adobe Photoshop
    Взгляните на Новый Курс "Творческая Композиция в Adobe Photoshop"
    Andrew Blackman
  • Как Создать Twitch OBS Оверлей для Стрима в Photoshop...
    Инстаграм
    Как Создать Макет для Инстаграм Поста в Photoshop
    Abbey Esparza
Теги:Design & IllustrationAdobe Photoshop
Просмотры 40799