Создаем в Photoshop интерфейс для стрима
Проводите ли вы стримы на Twitch? Уже давно хотите сделать свой интерфейс для стрима? В этом уроке вы узнаете основы необходимые для создания интерфейса в Photoshop. Мы сделаем все с нуля, а затем добавим полученный результат в программу Streamlabs OBS.
На данный момент Streamlabs OBS доступна только на ПК. Однако, в качестве альтернативы вы можете воспользоваться OBS Studio с инструментом Muxy Alerts, если работаете на Mac. Алгоритмы работы в этих программах похожи.
Дополнительно, если вам нужен быстрый и простой способ создания интерфейсов для стрима, попробуйте Placeit! На сайте вы найдете много готовых шаблонов от интерфейсов до заставочных экранов для Twitch! Все шаблоны можно редактировать и настраивать под свои нужды.
Перед началом работы определитесь какие исходники вы будете использовать в интерфейсе. Во время создания дизайна в Фотошоп я часто использую реальные скриншоты из игр, чтобы сразу видеть, как все будет выглядеть на живом стриме.
1. Как работают интерфейсы OBS
Для начала давайте разберемся что такое интерфейс стрима в OBS и как он работает.
Когда вы смотрите трансляцию любимого стримера, поверх его видео наложена дополнительная графика. Это могут быть статичные картинки, анимация, текст, который реагирует на действия пользователя и т.д.
Наверное, звучит сложно, но на самом деле все очень просто. Хочу обратить ваше внимание, что вся информация в данном уроке основана на моем личном опыте стриминга, это авторские мысли и выводы.
В целом, работа в OBS состоит из трех ключевых элементов:
· Во-первых, это графика или другие медиа-файлы. Это контент, который можно сделать в графическом редакторе, например, Adobe Photoshop.
· Во-вторых, это инструмент, который генерирует контент из того, что происходит на экране вашего компьютера. Но сама по себе OBS Studio не умеет отслеживать новые подписки. В этом случае может помочь Muxy Alerts, но есть и другие альтернативы.
· В-третьих, это программа, собирающая все вместе и транслирующая это в виде целостного продукта. В качестве примера можно вспомнить тот же OBS Studio.
В рамках этого урока мы будем использовать Streamlabs OBS. Его преимущество в том, что мы можем пропустить второй пункт. Streamlabs OBS умеет работать с уведомлениями и трансляцией контента из коробки.
2. Что такое интерфейс для стрима
Перед началом разработки дизайна мы должны определить, для чего он нужен. Такие интерфейсы можно использовать для большого количества задач, поэтому важно определить свои цели. Есть интерфейсы с большим количеством дополнительных элементов, а есть минималистичные варианты. И в данном случае нет правильного ответа, вы выбираете то, что идеально подходит вам и вашей трансляции.
Ниже я приведу список основных элементов интерфейса, которые могут вам понадобиться:
· Взаимодействие со зрителем – это могут быть уведомления о новых подписчиках или донатах.
· Цели – вы можете добавить, например, цель, на которую собираете донат, или желаемое количество подписчиков.
· Социальные сети – это могут быть ссылки на ваши соц сети, чтобы зрители могли взаимодействовать с вами.
· Веб-камера – у многих стримеров в интерфейс добавлен вывод изображения с веб-камеры, чтобы зрители могли одновременно видеть и стрим, и стримера.
· Окно чата – также поверх стрима можно добавить отображение чата. Лично мне это не очень нравится, потому такой чат занимает много места, но кому-то это может пригодиться.
· Непосредственно сам стрим – большая часть экрана, естественно, должна быть заполнена самим стримом. Именно здесь показан геймплей, если вы занимаетесь трансляцией игр.
Обратите внимание, что список неисчерпывающий. На интерфейс можно добавить множество других элементов. Например, я использовала интерактивную карусель на видео для демонстрации своих работ. Изучив основы, вы сможете экспериментировать и добавлять на свой интерфейс все, что угодно.
Так как понять, что именно стоит добавить на интерфейс? Советую учитывать несколько моментов:
Где находится точка внимания? Забавно, когда на экране много ярких и красивых элементов, но фокус все же должен быть на самом стриме, а не на количестве подписчиков или донате. Например, если вы стримите игру, то она должна быть точкой внимания вашей трансляции.
Другие элементы дополняют ваш стрим. Дополнительный контент должен улучшать вашу трансляцию, а не мешать ей.
Элементы интерфейса должны быть четкими. Если их трудно прочесть или рассмотреть, то пользы от такого интерфейса мало. Например, декоративные шрифты больше подходят для заголовков, а не для обычных абзацев или текста с какими-нибудь пояснениями.
Целостность. Если вы хотите подчеркнуть свой бренд, то дизайн интерфейса должен быть целостным. Логотип, фирменные цвета – все должно сочетаться друг с другом. Но это не значит, что нельзя экспериментировать. Важно помнить, что гармония в дизайне интерфейса сделает вашу работу более привлекательной. Например, использование шести разных шрифтов не самый лучший выбор и будет выглядеть слишком хаотично.
На данном этапе все ваши решения должны быть основаны на целях, которые вы себе поставили. Например, вы можете не хотеть использовать логотип и вместо этого возьмете аватар. Или захотите показать свои работы, из-за чего на экране постоянно будут меняться картинки. Продумайте все это заранее и тогда в конце вы получите идеальный интерфейс, который отвечает всем вашим потребностям.
3. Создаем интерфейс для стрима
Мы определились с тем, что хотим добавить на интерфейс и теперь можем переходить к дизайну. Этот этап можно выполнить в любой графическом редакторе, но лично я предпочитаю использовать Фотошоп.
Открываем программу и создаем новый документ File – New (Файл – Новый).
В открывшемся окне устанавливаем размер для разрешения Full HD – 1920 х 1080 пикселей. Это будет размер всей видимой области интерфейса.
Перед нажатием кнопки ОК давайте переключим Background Contents (Содержимое фона) на Transparent (Прозрачный фон).
Закончив с настройкой, жмем ОК.
Для этого урока мы создадим интерфейс из следующих элементов:
· цель – количество подписчиков
Я решила начать с дизайна плашек для отображения имен новых подписчиков, новых фоловеров и последний донат. Вы можете что-то из этого убрать или, наоборот, добавить новые поля.
Начинаем с создания нового слоя. Это можно сделать на панели Window – Layers (Окно – Слои), как показано ниже. Чтобы не путаться, я даю понятные названия слоям. Для этого на панели слоев дважды кликаем по названию слоя левой кнопкой мышки.
После этого активируем Polygonal Lasso Tool (L)
(Прямоугольное лассо) (отмечено на скриншоте ниже) и мышкой рисуем параллелограмм. Каждый клик мышью – это опорная точка выделения. Чтобы нарисовать идеально ровную линию, удерживайте клавишу Shift!
В конце заливаем выделение черным цветом, используя инструмент Paint Bucket Tool
Дублируем этот слой. Для этого кликаем правой кнопкой по слою на панели слоев и выбираем Duplicate Layer (Создать дубликат) или жмем сочетание клавиш Ctrl+J.
Всего нам нужно три копии этого слоя, по одной на каждый тип взаимодействия со зрителями.
Объединяем все три слоя вместе.
Для этого с зажатой клавишей Shift выбираем их на панели слоев. Жмем по ним правой кнопкой мышки и применяем Merge Layers (Объединить слои).
Обратите внимание, что данная команда объединит все три слоя в один. Но вы можете оставить их по отдельности и не объединять. Но даже после объединения можно в любой момент выделить нужный элемент и вырезать его на новый слой.
Таким же образом дублируем объединенный слой.
У нас появятся три новые копии параллелограммов. С помощью Move Tool
(V) (Перемещение) корректируем их положение. Если вы полностью повторяете мои действия, то смещаем копию чуть выше оригинала, как показано ниже.
Выбираем оригинальный слой и в верхней части панели слоев жмем на значок с шахматным узором, чтобы заблокировать прозрачные пиксели слоя для редактирования. Это позволит нам рисовать на слое, не беспокоясь о том, что штрихи выйдут за пределы объектов.
Для переднего плана выбираем синий цвет, а для фона – голубой. Или можете подобрать другие цвета. Для этого на панели инструментов кликаем по цветному квадрату, чтобы открыть окно выбора цвета.
Заливаем нижнюю копию градиентом. Для этого активируем инструмент Gradient Tool
(G) (Градиент). Кликаем левой кнопкой мышки и тянем ее, чтобы выполнить заливку.
Еще раз повторюсь, цвета буду накладываться только на заполненные пиксели, прозрачные области останутся нетронутыми, благодаря блокировке прозрачных пикселей.
Давайте добавим текст. Для этого активируем Text Tool
(T) (Текст). На скриншоте надпись плохо видно, но на первой плашке я написала new follower (новый фоловер).
Давайте добавим на этот текст обводку, чтобы улучшить видимость.
Для этого выбираем текстовый слой и переходим Layer – Layer Style – Stroke (Слой – Стиль слоя – Выполнить обводку). Или жмем на кнопку Add a Layer Style (Добавить стиль-слоя) в нижней части панели слоев и выбираем Stroke (Выполнить обводку).
Вот так выглядят настройки стиля слоя. Можете скопировать мои значения! Я установила толщину на 3 пикселя.
Трижды повторяем весь процесс и добавляем текст с обводкой на каждой плашке.
Когда я работаю с дизайном интерфейса, всегда добавляю тестовый контент, чтобы лучше визуализировать как будет выглядеть финальный результат в работе. В данном случае я на каждой плашке добавила тестовые имена синим цветом, чтобы уже сейчас видеть, как это будет выглядеть на рабочем стриме.
Для этого я снова воспользовалась инструментом Text Tool
(T) (Текст) и сгруппировала все слои с тестовым контентом в отдельную папку (Ctrl+G). Папки (или группы) также помогают навести порядок и не путаться в большом количестве слоев. Я буду часто использовать их в уроке, но вам необязательно это делать.
Давайте добавим плашку для социальных сетей.
Как и в прошлый раз, создаем новый слой и добавляем его в отдельную папку, чтобы каждый элемент интерфейса находился в отдельной группе.
Сначала инструментом Polygonal Lasso Tool (L)
(Прямоугольное лассо) рисуем выделение. Затем с помощью Paint Bucket Tool (G)
(Заливка) заполняем его любым цветом – я выбрала черный.
Далее мы повторим процесс и создадим эффект, как на предыдущих плашках.
· Смещаем копию выше, используя Move Tool (V)
· На панели слоев блокируем прозрачные пиксели, чтобы цвет применялся только на фигуре.
(G) (Градиент) заливаем плашку цветом.
Наша задача – создать такой же эффект на блоке для социальных сетей, чтобы все элементы интерфейса были оформлены в едином стиле.
Теперь добавим контент на этом блоке.
Здесь можно написать все, что угодно: иконки соц сетей, имена, ссылки, напоминания и т.д. В нашем случае я добавлю ссылки на две социальные сети, чтобы они всегда были на экране, если кто-то из зрителей захочет связаться с автором.
Для этого используем инструмент Text Tool (Т)
(Текст). Пишем текст для ссылок, а затем вставляем иконки соц сетей.
По ссылке вы можете найти иконки, которые я использовала в уроке.
Далее я хочу добавить область для веб-камеры. Лишний раз обращу ваше внимание, что все элементы интерфейса зависят от ваших целей. Вы можете не добавлять веб-камеру и оставить это место пустым.
Повторяем весь процесс из шагов 14 и 15.
Также стоит учесть разрешение веб-камеры. В качестве основы я использовала размер 640 х 480 пикселей. Можете создать новый документ такого размера, затем скопировать его на рабочий документ и изменить масштаб с помощью свободной трансформации (Ctrl+T)).
Я уменьшила размер блока для веб-камеры с зажатой клавишей Shift, чтобы сохранить пропорции.
Как я уже упоминала, мне нравится добавлять тестовый контент на дизайне. В данном случае я вставила фото в область для веб-камеры.
Если хотите сделать так же, можете использовать свое собственное фото. Проверьте, чтобы снимок находился выше слоя с черным прямоугольником.
Затем выбираем слой с фото, кликаем по нему правой кнопкой мышки и применяем Create Clipping Mask (Создать обтравочную маску). Теперь картинка будет отображаться только в пределах прямоугольника ниже.
Давайте добавим область с индикатором набора подписчиков. Я хочу, чтобы она выглядела, как индикатор прогресса.
О самой полосе прогресса пока не беспокойтесь. Пока что просто добавляем плашку в стиле остальных элементов интерфейса. Повторяем все изученные действия и заливаем нижнюю копию градиентом, а верхнюю – черным цветом.
Я решила добавить дополнительные детали на интерфейсе.
Для этого создаем новый слой. Затем с помощью Rectangular Marquee Tool (М)
(Прямоугольное выделение) рисуем горизонтальную полосу. Заливаем ее черным цветом с помощью Paint Bucket Tool (G)
Как вы понимаете, под черной линией я добавила такую же линию с градиентной заливкой. Выше я говорила, что дизайн должен смотреться гармонично и целостно.
Вы можете повторять все шаги за мной, но использовать другие цвета.
Необязательно использовать исключительно прямые детали. На плашках ест диагональные скосы, которые можно подчеркнуть дополнительными элементами дизайна. Давайте внизу добавим такую линию. Процесс рисования такой же, как и с другими фигурами.
Можете поэкспериментировать и попробовать иначе изобразить преломляющуюся линию.
4. Сохраняем графику для стрима
Мне нравится то, что у меня получилось. Теперь можно сохранить результат для OBS!
Для начала скрываем или удаляем весь тестовый контент (текст и фото), который мы добавили для наглядности.
После этого некоторые элементы нужно объединить в один слой. Например, верхний ряд блоков мы сохраним в виде одной картинки.
С зажатой клавишей Shift выделяем нужные слои. Кликаем по ним правой кнопкой мышки и выбираем Merge Layers (Объединить слои).
Не нужно объединять все слои! Объединяем только отдельные группы элементов. Определите, какие элементы вы хотите оставить по отдельности, а какие использовать в качестве одного объекта.
Вот так выглядят мои слои после объединения. Больше нет папок или отдельных слоев с деталями.
Ниже на скриншоте включена видимость только трех плашек справа (включать/выключать видимость слоев можно по нажатию на значок глаза на панели слоев). Обратите внимание, что все составные части трех плашек находятся на одном слое: черные параллелограммы, синие параллелограммы и текст.
Выбираем слой, который хотим экспортировать.
Переходим Select – All (Выделить – Все), чтобы выделить все рабочее полотно.
Затем Edit – Copy (Редактирование – Скопировать) и создаем новый документ.
На этом документе переходим Edit – Paste (Редактирование – Вставить). В результате Фотошоп вставит скопированный контент на новом документе, как показано ниже. Обратите внимание, что это только одна часть интерфейса, которую мы объединили в один слой.
Сохраняем документ File – Save as (Файл – Сохранить как) в виде PNG-картинки с прозрачным фоном.
Повторяем процесс и сохраняем остальные детали интерфейса. В теории, вы можете экспортировать весь интерфейс в виде одного PNG-файла, но для удобства я предпочитаю делить его на отдельные элементы. Выбор за вами!
5. Как использовать интерфейс для стрима
Теперь давайте разберемся как внедрить созданный интерфейс на стрим. В уроке мы будем использовать Streamlabs OBS, но все действия можно повторить и в OBS Studio.
Проверьте, что у вас установлена программа. Если нет или у вас возникли трудности с установкой, тогда рекомендую почитать руководство на официальном сайте.
Начинаем с создания новой сцены. Слева находится панель Scenes (Сцены). В правом углу жмем на плюс, чтобы создать новую сцену. В результате появится окно, в котором вам нужно ввести название сцены.
Я назвала свою сцену «My Overlay». Здесь можете выбрать любое название.
Сейчас сцена пустая, так как мы не создали ни одного источника.
На центральной панели Sources (Источники) жмем на плюс.
Откроется окно с большим количество настроек. Из списка стандартных источников нам нужно выбрать Image (Изображение) и нажать на кнопку Add Source (Добавить источник).
В следующем окне вводим название нового источника.
Если выключить параметр Add a new sources instead (Добавить новый источник), то мы сможем выбрать картинку, которую добавляли ранее. Очень удобно!
Выбираем картинку, которую хотим добавить. Это должен быть один из файлов, которые мы экспортировали.
На примере ниже я выбрала PNG-файл с прозрачным фоном, на котором изображены три черные плашки.
Выбрав нужную картинку, жмем на кнопку Done (Готово).
Как видите, Streamlabs OBS добавила картинку на видимой области экрана.
Если захватить мышкой картинку, можно настроить ее положение и масштаб.
Повторяем процесс и добавляем остальные элементы интерфейса.
Я импортировала в программу горизонтальную линию (назовем ее «верхняя линия») и три параллелограмма (назовем их «область уведомлений»).
Однако, они расположены в неправильном порядке. Верхняя линия не должна находиться поверх области уведомлений.
К счастью, это очень легко исправить!
Для этого левой кнопкой мышки на панели Sources (Источники) просто меняем их местами. Теперь все находится на своих местах, как и было изначально продумано.
Вот так выглядит мое окно Streamlabs OBS после того, как я добавила все картинки.
Для наглядности я добавила статичный фон. Здесь обычно отображается геймплей или обычный стрим. Если у вас возникли трудности с импортом фона, вернитесь к шагу 2.
Но мы еще не закончили! Как насчет уведомлений? На панели источников жмем на плюс, чтобы добавить новый источник.
Однако, в этот раз нам нужно выбрать Stream Label (Метки трансляции). Если в окне добавления источника у вас нет виджетов, то нужно зайти в свой аккаунт Twitch, Youtube, Facebook или Mixer. Выбрав нужный виджет, жмем Add Source (Добавить источник).
Как и с картинками, включаем Add a new source instead (Добавить новый источник), чтобы добавить новый источник, а не использовать старый.
Пишем название источника и жмем на кнопку Add Source (Добавить источник).
Для этого виджета есть множество параметров настройки.
Обязательно обратите внимание на параметр Label Type (Тип ярлыка). Здесь мы выбираем Most Recent Follower (Последний фоловер), потому что именно эту информацию я хочу добавить на одной из плашек. Но вы ознакомьтесь со всем списком! На выбор доступно очень много других меток, например, донатер месяца.
Также можно изменить шрифт, цвет и непрозрачность текста. Настройте все в соответствии с вашим дизайном. Я выбрала шрифт Quinta Pro, размер – 36 и цвет – #0000faff.
Закончив, жмем Done (Готово), чтобы применить изменения.
Как и с картинками, хватаем текст и корректируем его расположение. Я разместила метку на соответствующем черном параллелограмме – new follower.
Повторяем действия и добавляем все необходимые метки, которые должны динамически меняться во время стрима.
Как видите, на выбор доступно очень много меток. Я добавила новый фоловер, новый подписчик и последний донат.
Теперь добавим цель. Начнем с создания нового источника.
В окне с виджетами выбираем Subscription Goal.
Снова добавляем новый источник вместо уже созданного, вводим название и настраиваем. Затем жмем на кнопку Add Source (Добавить источник).
Вот так выглядят настройки виджета подписки.
Поэкспериментируйте с параметрами и настройте его на свое усмотрение. Например, введите название цели, нужное количество подписчиков, если хотите можно добавить начальное количество и дату. Также слева вверху можно настроить ширину и высоту.
Закончив с настройкой, жмем на кнопку Start Goal (Запустить цель).
Нажав Start Goal (Запустить цель), слева в окне появится предпросмотр индикатора.
Если вы хотите изменить настройки, нажмите на кнопку End Goal (Остановить цель).
Закончив, жмем на кнопку Done (Готово).
Хватаем индикатор мышкой и настраиваем его положение. Если потянуть за угловые точки, можно настроить его размер.
Давайте пройдемся по другим источникам, которые могут вам пригодиться.
Для начала выбираем Display Capture (Захват экрана). Этот источник будет отображать на стриме ваш рабочий стол. Я использую его, когда хочу показать на трансляции несколько программ одновременно. Например, когда использую Photoshop и After Effects.
Можно выбрать Game Capture (Захват игры). Как понятно из названия, этот источник умеет стримить игровой процесс. Большинство игр у меня на компьютере работают корректно только с этим источником. Просто выбираем игру и готово!
Window Capture (Захват окна) захватывает отдельное окно на компьютере. Я использую это, когда мне нужно показать, например, только Photoshop.
Video Capture Device (Устройство захвата видео) – этот источник я использую, когда нужно захватить изображение с веб-камеры. Я выбираю ее в качестве видео источника и вставляю в область для веб-камеры.
Как вы понимаете, это не все возможности, которые можно добавить на интерфейсе. Иногда я экспериментирую с анимированными GIF и MP4. В программе Streamlabs OBS можно добавить любой текст, окно чата и т.д.