Туториал по созданию кастомной панели целей – Mikulski
Наложение сайта

Туториал по созданию кастомной панели целей

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

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

Для работы нам понадобится графический редактор Gimp – https://www.gimp.org/ . Он бесплатный, не требует регистрации и имеет достаточное количество инструментов, чтобы редактировать любые растровые изображения.

Рисуем или скачиваем панель.
В качестве примера я взял вот такую красоту:

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

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

Открываем скриншот с помощью Gimp и добавляем туда нашу панель.

Если панель в формате jpeg или не имеет прозрачного фона, то слою с панелью надо назначить прозрачность: в панелях наверху Layer (Слой) → Transparency (Прозрачность) → Add Alpha Channel (Добавить альфа-канал).

После этого выбираем инструмент Fuzzy Select Tool (Волшебная палочка), клавиша ”U”, выделяем им области фона и клавишей Del удаляем их.
После этого нужно убрать выделение (Ctrl+Shift+A) – это важно, т. к. в дальнейшем выделенная область будет определяться программой как область, которую мы хотим отредактировать.
Поэтому снимаем выделение.

Примеряем нашу панель на экране.
С помощью инструментов трансфомации Unfied Transform Tool (Shift+T) и Move Tool производим нужные действия. Я решил немного увеличить панель без потерь в качестве изображения.

Удаляем слой с подложкой, нажав на “крестик” в панеле слоев.


Затем в верхних панелях: Image (Изображение) → Crop to content (Обрезать до содержимого), чтобы обрезать все кроме нашей панели.

Берем инструмент Free Select Tool (Свободное выделение) и очерчиваем внутреннюю часть панели «со стеклом».
Ctrl + колесо мышки позволяет масштабировать экран.

Вырезаем выделенное комбинацией клавиш Ctrl+X или Cut selection через правую клавишу мыши.
Нажимаем Ctrl+V и в панеле слоев (находится справа по умолчанию) нажимаем на кнопку «добавить слой» (она подсветится зеленым):

Т.к. в конкретном случае панель со скошенными краями, то скорее всего наша строка виджета
будет выпирать справа. Я решил передвинуть голову робота и его руки в проблемную область, что закрыть непотребство.
Прямоугольным выделением выбираю робота, вырезаю его Ctrl+X и вставляю Ctrl+V. Затем свободным выделением выбираю его руку и также вырезаю и вставляю отдельным фоном.
С помощью инструментов вращения, трансформации и перемещения фиксирую все части как мне нужно. А ластиком удаляю лишние артефакты.
Важно! Редактируется только тот слой, который выделен в текущий момент в панели слоев!

Когда мы все подвинули, выбираем в панеле слоев верхний слой (но не со стеклом, нас интересует робот и его рука). Нажимаем правую клавишу мыши и выбираем Merge Down (объединить слой с предыдущим). Мы объединили робота с его рукой. Теперь таким же образом объединяем робота с панелью.

Итоговый слой стал немного выпирать за границы холста изображения — поэтому, нажимаем в верхней панели Layer (Слой) → Layer to Image Size (слой к размеру изображения).

Теперь экспортируем слои по отдельности. Проверяем видимость слоя с панелью. И экспортируем его в PNG формате (можно напечатать расширение, а можно выбрать из списка) в отдельную папку.
File → Export As (Ctrl+Shift+E).
Во всплывающем окне ничего не меняем.

Отключаем видимость слоя с панелью и включаем видимость «стекла», ничего не смещаем, не трогаем и также экспортируем.

Готово! Сохраняем проект Gimp, чтобы если что вернуться и отредактировать его. Не закрываем Gimp и переходим в OBS.
Для удобства добавляем тот же скриншот нашего экрана, который мы использовали для примерки панели в Gimp.
В меню Sources (Источники) → нажимаем на «+» внизу → Image (изображение). И добавляем все элементы нашей панели.
Далее создаем источник Group (Группа) и переносим туда все части панели. Теперь
наша панель сгруппирована и можно двигать и трансформировать именно
групповой источник, а не все по отдельности.

Щелкаем правой клавишей мышки на нашем стекле в источниках и выбираем Filters (Фильтры). Жмем на + и добавляем color correction (Коррекция цвета) и уменьшаем Oppacity (Прозрачность) до понравившегося значения.

Теперь нам нужно добавить виджет со шкалой цели. Я использую сервис Стримлабс, но можно выбрать и любой другой удобный вам — они немного отличаются, но в целом принцип одинаков везде.
В настройках устанавливаем Layout – Condensed, чтобы текст располагался только внутри шкалы. Выбираем нужные цвета (код цвета можно взять пипеткой с панели в Gimp) и шрифт. А также толщину шкалы (обычно это подгоняется за несколько проб после примерки в OBS).

Копируем ссылку на виджет и вставляем в Browser source в OBS. Далее методом подбора выставляем в источнике виджета ширину и высоту, пока она не встанет по размеру нашей панели. При необходимости меняем толщину шкалы в Стримлабс (не забывайте нажимать там Save, чтобы применялись изменения).
Чтобы более точно уместить нашу шкалу в панель, двигайте ее с зажатым Ctrl – тогда объект можно будет перемещать свободно и не станет «прилипать» к невидимой сетке.

Переносим виджет в групповой источник нашей панели и делаем его нижним слоем.

Возвращаемся, если нужно, к фильтру с прозрачностью «стекла» и выставляем желаемое значение.
Готово!

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии