Как сделать рамку для стрима в фотошопе
Обновлено: 04.07.2024
Проводите ли вы стримы на Twitch? Уже давно хотите сделать свой интерфейс для стрима? В этом уроке вы узнаете основы необходимые для создания интерфейса в Photoshop. Мы сделаем все с нуля, а затем добавим полученный результат в программу Streamlabs OBS.
На данный момент Streamlabs OBS доступна только на ПК. Однако, в качестве альтернативы вы можете воспользоваться OBS Studio с инструментом Muxy Alerts , если работаете на Mac. Алгоритмы работы в этих программах похожи.
Дополнительно, если вам нужен быстрый и простой способ создания интерфейсов для стрима, попробуйте Placeit ! На сайте вы найдете много готовых шаблонов от интерфейсов до заставочных экранов для Twitch! Все шаблоны можно редактировать и настраивать под свои нужды.
Примечание: Автор использовал платные материалы. В архиве вы найдёте альтернативный вариант изображений для выполнения урока.
Перед началом работы определитесь какие исходники вы будете использовать в интерфейсе. Во время создания дизайна в Фотошоп я часто использую реальные скриншоты из игр, чтобы сразу видеть, как все будет выглядеть на живом стриме.
1. Как работают интерфейсы OBS
ШАГ 1
Для начала давайте разберемся что такое интерфейс стрима в OBS и как он работает.
Когда вы смотрите трансляцию любимого стримера, поверх его видео наложена дополнительная графика. Это могут быть статичные картинки, анимация, текст, который реагирует на действия пользователя и т.д.
ШАГ 2
Наверное, звучит сложно, но на самом деле все очень просто. Хочу обратить ваше внимание, что вся информация в данном уроке основана на моем личном опыте стриминга, это авторские мысли и выводы.
В целом, работа в OBS состоит из трех ключевых элементов:
- Во-первых, это графика или другие медиа-файлы. Это контент, который можно сделать в графическом редакторе, например, Adobe Photoshop.
- Во-вторых, это инструмент, который генерирует контент из того, что происходит на экране вашего компьютера. Но сама по себе OBS Studio не умеет отслеживать новые подписки. В этом случае может помочь Muxy Alerts, но есть и другие альтернативы.
- В-третьих, это программа, собирающая все вместе и транслирующая это в виде целостного продукта. В качестве примера можно вспомнить тот же OBS Studio.
В рамках этого урока мы будем использовать Streamlabs OBS. Его преимущество в том, что мы можем пропустить второй пункт. Streamlabs OBS умеет работать с уведомлениями и трансляцией контента из коробки.
2. Что такое интерфейс для стрима
ШАГ 1
Перед началом разработки дизайна мы должны определить, для чего он нужен. Такие интерфейсы можно использовать для большого количества задач, поэтому важно определить свои цели. Есть интерфейсы с большим количеством дополнительных элементов, а есть минималистичные варианты. И в данном случае нет правильного ответа, вы выбираете то, что идеально подходит вам и вашей трансляции.
ШАГ 2
Ниже я приведу список основных элементов интерфейса, которые могут вам понадобиться:
- Взаимодействие со зрителем – это могут быть уведомления о новых подписчиках или донатах.
- Цели – вы можете добавить, например, цель, на которую собираете донат, или желаемое количество подписчиков.
- Социальные сети – это могут быть ссылки на ваши соц сети, чтобы зрители могли взаимодействовать с вами.
- Веб-камера – у многих стримеров в интерфейс добавлен вывод изображения с веб-камеры, чтобы зрители могли одновременно видеть и стрим, и стримера.
- Окно чата – также поверх стрима можно добавить отображение чата. Лично мне это не очень нравится, потому такой чат занимает много места, но кому-то это может пригодиться.
- Непосредственно сам стрим – большая часть экрана, естественно, должна быть заполнена самим стримом. Именно здесь показан геймплей, если вы занимаетесь трансляцией игр.
Обратите внимание, что список неисчерпывающий. На интерфейс можно добавить множество других элементов. Например, я использовала интерактивную карусель на видео для демонстрации своих работ. Изучив основы, вы сможете экспериментировать и добавлять на свой интерфейс все, что угодно.
ШАГ 3
Так как понять, что именно стоит добавить на интерфейс? Советую учитывать несколько моментов:
Где находится точка внимания? Забавно, когда на экране много ярких и красивых элементов, но фокус все же должен быть на самом стриме, а не на количестве подписчиков или донате. Например, если вы стримите игру, то она должна быть точкой внимания вашей трансляции.
Другие элементы дополняют ваш стрим. Дополнительный контент должен улучшать вашу трансляцию, а не мешать ей.
Элементы интерфейса должны быть четкими. Если их трудно прочесть или рассмотреть, то пользы от такого интерфейса мало. Например, декоративные шрифты больше подходят для заголовков, а не для обычных абзацев или текста с какими-нибудь пояснениями.
Целостность. Если вы хотите подчеркнуть свой бренд, то дизайн интерфейса должен быть целостным. Логотип, фирменные цвета – все должно сочетаться друг с другом. Но это не значит, что нельзя экспериментировать. Важно помнить, что гармония в дизайне интерфейса сделает вашу работу более привлекательной. Например, использование шести разных шрифтов не самый лучший выбор и будет выглядеть слишком хаотично.
На данном этапе все ваши решения должны быть основаны на целях, которые вы себе поставили. Например, вы можете не хотеть использовать логотип и вместо этого возьмете аватар. Или захотите показать свои работы, из-за чего на экране постоянно будут меняться картинки. Продумайте все это заранее и тогда в конце вы получите идеальный интерфейс, который отвечает всем вашим потребностям.
3. Создаем интерфейс для стрима
ШАГ 1
Мы определились с тем, что хотим добавить на интерфейс и теперь можем переходить к дизайну. Этот этап можно выполнить в любой графическом редакторе, но лично я предпочитаю использовать Фотошоп.
Открываем программу и создаем новый документ File – New (Файл – Новый).
В открывшемся окне устанавливаем размер для разрешения Full HD – 1920 х 1080 пикселей. Это будет размер всей видимой области интерфейса.
ШАГ 2
Перед нажатием кнопки ОК давайте переключим Background Contents (Содержимое фона) на Transparent (Прозрачный фон).
Сперва очень быстро сделаем основные элементы рамки в фотошопе. Открываем фотошоп зайдем в Окно и сделаем рабочую среду Графика и интернет, что бы у нас с вами было все одинаково.
Рабочая среда графика и интернет
Инструмент прямоугольник
Делаем прямоугольник на новом слове, и применяем к нему все настройки как на картинке.
Делаем прямоугольник на новом слое
Далее сделаем уголки для рамки, что бы она казалась более интересной, на этом этапе вы можете включать свой креатив и делать как вам нравится.
Инструментом прямоугольник делаем еще одну фигуру с заливкой красного цвета на новом слое.
И далее располагаем его так, что бы сделать красивый уголок.
Зажимаем Alt что бы наложить прямоугольник 2 в прямоугольник 1
Затем, можно убрать наложение, и просто обрезать от красного прямоугольника лишнее. При помощи инструмента выделение. И растрируем слой. Удаляем.
Затем инверсируем выделение Shift+cntrl+i
И удаляем обратную часть.
Копируем уголок во вторую часть рамки.
Остается сделать плашки под ник и под донаты. Чтобы сделать плашку для ника, можно сделать два прямоугольника немного скривить за угол и соединить их.
Плашки под донаты просто делаем прямоугольниками. Либо так как вам нравится.
Анимируем рамку
Каждый стример хочет, чтобы его трансляции выглядели круто. Заставки, рамки, панели украшают стрим, делают его запоминающимся. Еще это не просто украшение прямого эфира, это элемент организации интерфейса.
Мы сделали несколько наборов готовых рамок для стрима: рамку для виджета сбора средств и рамку для веб-камеры, чтобы вам не нужно было тратить время на дизайн своих собственных.
Выбираем набор рамок для стрима
На странице Панели для Twitch и рамки для стрима скачайте архив с набором, который подходит тематике вашего канала. В архиве вы найдете два файла в формате *.jpg: рамку для виджета сбора средств и рамку для веб-камеры. Эти файлы мы будем использовать для оформления стрима.
Оформляем виджет сбора средств
После того как мы определились с дизайном, добавим полоску цели на стрим. В OBS, в панели панели Источники нажимаем на кнопку Добавить, выбираем Браузер и вводим название источника, например «Полоска цели». В появившемся диалоговом окне вставляем скопированную нами ранее ссылку в поле Адрес URL и нажимаем ОК.
В личном кабинете стримера копируем ссылку на уже настроенный виджет и добавим его в качестве источника в OBS.
Если вы еще не настроили виджет — прочитайте нашу инструкцию Как вывести полоску цели на стрим.
В панели Источники нажимаем на кнопку Добавить, выбираем Браузер и вводим название источника, например «Полоска цели». В появившемся диалоговом окне вставляем скопированную нами ранее ссылку в поле Адрес URL и нажимаем ОК.
Размещаем виджет внутри рамки вот так:
Оформляем окно веб-камеры
Перейдем к добавлению рамки вокруг изображения с вашей веб-камеры. Рамка для веб-камеры будет полезна, если вы ведете игровые трансляции. Она поможет выделить изображение стримера на фоне игры.
Для начала выведем на стрим окно захвата видео. На панели Источники нажимаем на кнопку Добавить, выбираем Устройство захвата видео и вводим название источника. Выбираем устройство, выполняем настройки видео и звука при необходимости и нажимаем ОК.
Читайте также: