Измените форму веб-камеры — как использовать маски изображений
Want to change your webcam shape? Sick of the same 4:3 or 16:9 cam boxes? Try webcam masks for OBS and Streamlabs to use cool shapes like circles, triangles & hexagons.
Хотите изменить форму веб-камеры? Вам надоели одни и те же камеры с соотношением сторон 4:3 или 16:9? Попробуйте маски веб-камеры для OBS и Streamlabs, чтобы использовать крутые формы, такие как круги, треугольники и шестиугольники.
https://translate.google.com
Расшифровка видео
Intro
0:00
Hey guys, Dan here from Visuals by Impulse. And in today’s video we’re going to be going through the
0:04
process of how we use webcam masks and image masks within Streamlabs OBS and OBS Studio. One of our
0:10
most frequently asked questions is, “How do I use various webcam shapes that aren’t just squares and
0:14
rectangles?” Well today I’m going to show you how to do that. It’s surprisingly super easy.
0:18
This first portion of the video we are going to be using Photoshop to create our own webcam
0:22
masks — that’s totally fine if you don’t have Photoshop, you can just skip ahead
0:26
to where we set up in OBS and Streamlabs, as we will be providing you guys with a bunch of
0:30
free image masks that you can download in the VBI store or in the description down below.
Creating image masks
0:35
Firstly we need to open Photoshop and create a new canvas.
0:41
And now we’re going to go ahead and change the width of this canvas to 1920 and the height
0:47
to 1080 and just go ahead and click create. There’s only really two things that you need
0:52
to know about image masks. The color white means the image is going to be shown and the color black
0:57
means the image is going to be hidden. It’s pretty simple. Now that we have the black background,
1:01
we’re going to go ahead and create the image mask itself. We want to select the Shape tool
1:06
and select the Rectangle tool. And go ahead and right-click the Shape tool, which will bring
1:10
out this dropdown menu, and you want to select Rectangle tool which is the first option here.
1:16
Once you have that selected we just click in the middle of the canvas,
1:18
and then we go ahead and type the width of the canvas: 1920 and the height, which is 1080.
1:25
And for these options here, we just want to revert them back to zero. And go ahead and
1:29
click ok. Now what we need to do is just align this to the canvas, head over to the Move tool,
1:36
and on your keyboard press Ctrl + A, which should select the whole area of the canvas.
1:41
Then towards the top, you want to click the horizontal align and the vertical alignment,
1:46
and that should just center the shape on the canvas.
1:49
Now you want to go ahead and deselect that by clicking the Selection tool, and just clicking
1:53
anywhere on the canvas to get rid of the dotted line. Now heading back to the Move tool…as you
1:58
can see we have Anchor Points in the corners here. And these will allow you just to kind of
2:04
round the corners off, as to wherever you want them. I’m going to go for somewhere around here,
2:09
just for the purpose of this. Right now this is a solid base for a rounded corner webcam. So now
2:15
you can go ahead and just save the file. You can save it by pressing CTRL + S on your keyboard,
2:20
or you can go to File > Export > Save For Web. And it should bring up this menu here.
2:28
And all we have to do is click Save. We’re going to go ahead and save this file as a rounded
2:34
corner mask. And just go ahead and click Save.
2:39
Perfect! So now all we have to do is go and implement it into our streaming software.
Streamlabs image mask setup
2:44
The first streaming software that we’re going to be implementing our webcam mask to is going to
2:48
be Streamlabs OBS. So now that we have Streamlabs opened up, we want to go ahead and add our webcam
2:54
source. We do that by heading over to the Sources tab and pressing the plus icon here,
2:59
and then selecting Video Capture Device. And we’re going to call this source Webcam. We now want to
3:04
select our device from the drop-down menu. There we go, now we can see ourselves. Now we go ahead
3:09
and click Done. Now we want to go ahead and add the image mask, so we right-click the webcam,
3:14
go to Filters, and then we click the plus icon here to add a filter. It should automatically
3:18
select Image Mask and Blend. So we just go ahead and click Done. Now for the Path,
3:23
we need to locate the file that we saved earlier. So we just go ahead and click that and open that.
3:28
As you can see, it has rendered our webcam corners off nicely. We go ahead and click Done. Now
3:32
that that’s done, we can go ahead and scale our camera down. So pressing CTRL on our keyboards,
3:37
we can just drag the corner to the size we want. And even if we wanted to we could just right-click
3:42
and select Transform and Center On Screen, and now we have it perfectly in the middle of the screen.
OBS image mask setup
3:48
So I’m now going to show you quickly how to do it again in OBS Studio. It’s very similar
3:52
to Streamlabs OBS, where we head to the Sources tab and Add A New Source > Video Capture Device.
3:58
Let’s just go ahead and add the webcam, I’m going to call this Webcam Tutorial.
4:04
Click Ok, and from the dropdown menu, we just select the camera
4:09
and press Ok. And right-click again, filters. And on this one,
4:14
we actually have two options, we have Audio and Video filters or just Effect filters.
4:18
We do actually just go ahead and click Effect filters on this one, Image Mask And Blend, Ok.
4:25
And locate the path of the rounded corner mask we saved out earlier. And open that up, and
4:29
there we have it. And we can actually scale this down as well by using CTRL just like we did in
4:34
Streamlabs. And right-clicking it again, heading over to Transform and just Center to Screen.
Advanced webcam masks in Streamlabs
4:40
Now that we’ve covered the basics, let’s start working on some more advanced designs. Some of
4:44
which you may find in a package on the store, or have created yourself. I’ll also show you some
4:48
tips and tricks to help you set them up in OBS. I’ve gone ahead and downloaded the Kraken steam
4:53
package from the marketplace. I’m going to show you how we work with more complex webcam masks
4:58
and the process of setting them all up. As well as that, I’m going to be showing you how to create
5:02
a webcam scene that you can compile all your webcam elements into, and then use that scene
5:06
throughout your other scenes. So first things first, we create a new scene in Streamlabs and
5:11
we call that scene the Webcam Scene. Let me go ahead and add the webcam to that scene,
5:17
Video Capture Device again, Add Source. And we call this one Webcam.
5:24
Once it’s implemented into the scene,
5:26
we add a new Filter > Image Mask. Then we locate the file of the webcam frame mask.
5:35
As you can see the webcam mask is actually filled in black, so we do need to go ahead and change the
5:39
Type here from Alpha Mask to Alpha Mask Channel Alpha Channel. That should just invert it all
5:44
for you here. Now that our webcam mask is added to our webcam, we have to add the webcam frame.
5:49
Heading over to Image, add a new source…we’re going to call this one Webcam Frame >
5:57
Add Source, and just locate the file of the webcam frame. Now that that’s implemented into the scene,
6:01
we do need to go ahead and stretch that to the full size of the canvas, so right-click that,
6:06
Transform, and Fit to Screen. And that should perfectly align everything we’ve got going on
6:10
here. Now I have all these elements in the single scene. We’re going to move on and show you how to
6:15
use the webcam scene as sources within other scenes. So if we just select another scene,
6:20
we go to the plus icon in sources. Just down here we select Scene and just select the webcam scene
6:26
that we made just a moment ago. And you can now scale this down without having to worry about
6:30
all the other elements in the scene, and move it around freely as to wherever you want it. There
Advanced webcam masks in OBS
6:36
you have it. Similar to Streamlabs, in OBS Studio, we’ve created a scene here called Webcam Scene.
6:43
Add the webcam as a source, add that to the scene, and with that added we go ahead and add the filter
6:49
as the image mask. And like before we change the Type from Alpha Mask Color Channel to Alpha Mask
6:54
Alpha Channel. Now the webcam mask is all implemented we go ahead and add the
6:58
webcam frame. So adding a new Image Source, find the webcam frame, right-click that,
7:06
Transform, Fit to Screen, and there you should have it. It’s all perfectly fit right in.
7:12
And do the same thing here, where we can actually add this webcam scene to other scenes.
7:16
And we do that pretty much the same way as we do in Streamlabs, by adding a new scene as a source,
7:21
selecting that scene, and we can scale it down and move it around to wherever we want to just
7:25
like we can in Streamlabs. I’m very briefly going to run through how to set up your
Using webcam frames
7:29
webcam frame as well as changing the colors all within Streamlabs. This is going to be the same
7:34
throughout OBS Studio. There may be some slight variations here and there, but for the most
7:38
part all the steps are the same. You need to go ahead and add a new source, Image, and make sure
7:46
this is a new source by ticking the box here. We’re going to name this source Webcam Frame.
7:51
So we go ahead and add that source. What we have to do now is locate the relevant file
7:55
that matches up with the image mask file name, and for this one I’ve chosen Rounded. And we’re
8:01
going to go ahead and click Done. As you can see we’ve got the red border going on here, but I’m
8:05
actually going to show you how we change that color. So adding a filter to the webcam frame,
8:10
we want to make sure that we go ahead and add a Color Correction layer on this one.
8:16
The only option that you really need to worry about here is just the Hue Shift option.
8:19
It does come with the slider that all you have to do is just move it up and down the scale,
8:23
and it will change color accordingly. As you can see we have a blue one here,
8:26
but we’re gonna actually tone it down and go all the way to the green side,
8:30
and try and get a very nice VBI color. There we go, sorted. I’m happy with that one. You can also
8:36
play around with these options here, but it’s not really needed. Once you’re happy with your color,
8:41
you just click Done. And there you have it, you’ve now changed your webcam frame from red to whatever
8:45
color you like. Perfect. So up until now you’ve been listening to me talk. Now I want you to
Outro
8:51
get some hands-on action within your OBS. We’ve created a free pack of image masks that you can
8:55
go ahead and find on our store, or in the video description down below. And within that package,
8:59
we provide you guys with a bunch of free image masks, all of various different shapes, which
9:03
you can just simply go ahead and download and use for yourself. If you found this video useful in
9:07
any way, we’d love to know what you thought about it in the comment section down below.
9:10
Feel free to Like and Subscribe, and as always we’ll see you in the next one. Take it easy, guys.
Расшифровка видео
вступление
0:00
Привет, ребята, здесь Дэн из Visuals by Impulse. И в сегодняшнем видео мы рассмотрим
0:04
процесс использования масок веб-камеры и масок изображений в Streamlabs OBS и OBS Studio. Один из наших
0:10
Наиболее часто задаваемые вопросы: «Как использовать различные формы веб-камеры, а не только квадраты и
0:14
прямоугольники?» Сегодня я покажу вам, как это сделать. Это на удивление очень просто.
0:18
В этой первой части видео мы будем использовать Photoshop для создания собственной веб-камеры.
0:22
маски — это нормально, если у вас нет Photoshop, вы можете просто пропустить
0:26
туда, где мы настроили OBS и Streamlabs, так как мы предоставим вам кучу
0:30
бесплатные маски изображений, которые вы можете скачать в магазине VBI или в описании ниже.
Создание масок изображений
0:35
Сначала нам нужно открыть Photoshop и создать новый холст.
0:41
А теперь мы пойдем дальше и изменим ширину этого холста на 1920, а высоту
0:47
до 1080 и просто нажмите «Создать». На самом деле тебе нужны только две вещи
0:52
знать о масках изображений. Белый цвет означает, что изображение будет показано, а черный цвет.
0:57
означает, что изображение будет скрыто. Это довольно просто. Теперь, когда у нас есть черный фон,
1:01
мы продолжим и создадим саму маску изображения. Мы хотим выбрать инструмент «Фигура».
1:06
и выберите инструмент «Прямоугольник». И щелкните правой кнопкой мыши инструмент «Форма», который откроет
1:10
из этого раскрывающегося меню и вы хотите выбрать инструмент «Прямоугольник», который является первым вариантом здесь.
1:16
Как только вы это выберете, мы просто щелкнем в середине холста,
1:18
а затем мы набираем ширину холста: 1920 и высоту, которая равна 1080.
1:25
И для этих параметров мы просто хотим вернуть их обратно в ноль. И идти вперед и
1:29
нажмите ок. Теперь нам нужно просто выровнять это по холсту, перейти к инструменту «Перемещение»,
1:36
и на клавиатуре нажмите Ctrl + A, чтобы выделить всю область холста.
1:41
Затем вверху вы хотите щелкнуть горизонтальное выравнивание и вертикальное выравнивание,
1:46
и это должно просто центрировать фигуру на холсте.
1:49
Теперь вы хотите пойти дальше и отменить выделение, щелкнув инструмент «Выделение» и просто щелкнув
1:53
в любом месте холста, чтобы избавиться от пунктирной линии. Теперь вернемся к инструменту «Перемещение».
1:58
Как видите, здесь по углам есть опорные точки. И это позволит вам просто как бы
2:04
закруглите углы там, где вы хотите. Я собираюсь пойти куда-нибудь здесь,
2:09
только с этой целью. На данный момент это прочная основа для веб-камеры с закругленными углами. А сейчас
2:15
вы можете пойти дальше и просто сохранить файл. Вы можете сохранить его, нажав CTRL + S на клавиатуре.
2:20
или вы можете выбрать «Файл» > «Экспорт» > «Сохранить для Интернета». И здесь должно появиться это меню.
2:28
И все, что нам нужно сделать, это нажать «Сохранить». Мы собираемся сохранить этот файл как закругленный
2:34
угловая маска. И просто нажмите «Сохранить».
2:39
Идеальный! Итак, теперь все, что нам нужно сделать, это внедрить это в наше программное обеспечение для потоковой передачи.
Настройка маски изображения Streamlabs
2:44
Первое программное обеспечение для потоковой передачи, в котором мы собираемся реализовать маску веб-камеры, будет
2:48
быть Streamlabs OBS. Итак, теперь, когда у нас открыт Streamlabs, мы хотим добавить нашу веб-камеру.
2:54
источник. Мы делаем это, перейдя на вкладку «Источники» и нажав здесь значок «плюс»,
2:59
а затем выберите «Устройство видеозахвата». И мы назовем этот источник Веб-камера. Теперь мы хотим
3:04
в выпадающем меню выбираем наше устройство. Вот и все, теперь мы можем увидеть себя. Теперь мы идем вперед
3:09
и нажмите Готово. Теперь мы хотим добавить маску изображения, поэтому щелкаем правой кнопкой мыши по веб-камере,
3:14
переходим в «Фильтры», а затем нажимаем здесь значок плюса, чтобы добавить фильтр. Оно должно автоматически
3:18
выберите «Маска изображения» и «Смешать». Итак, мы просто идем дальше и нажимаем «Готово». Теперь о Пути,
3:23
нам нужно найти файл, который мы сохранили ранее. Итак, мы просто щелкаем по нему и открываем.
3:28
Как видите, углы веб-камеры были хорошо отрисованы. Идем дальше и нажимаем Готово. Сейчас
3:32
Когда все готово, мы можем уменьшить масштаб нашей камеры. Итак, нажав CTRL на нашей клавиатуре,
3:37
мы можем просто перетащить угол до нужного размера. И даже если бы мы захотели, мы могли бы просто щелкнуть правой кнопкой мыши
3:42
и выберите «Трансформировать и центрировать на экране», и теперь он идеально расположен в середине экрана.
Настройка маски изображения OBS
3:48
Итак, сейчас я собираюсь быстро показать вам, как сделать это еще раз в OBS Studio. Это очень похоже
3:52
в Streamlabs OBS, где переходим на вкладку «Источники» и выбираем «Добавить новый источник» > «Устройство видеозахвата».
3:58
Давайте просто добавим веб-камеру, я назову это Учебное пособие по веб-камере.
4:04
Нажимаем ОК и из выпадающего меню просто выбираем камеру
4:09
и нажмите Ок. А
И снова щелкните правой кнопкой мыши, фильтры. И на этом,
4:14
На самом деле у нас есть два варианта: фильтры аудио и видео или просто фильтры эффектов.
4:18
На самом деле мы просто идем дальше и нажимаем «Фильтры эффектов» на этом, «Маска изображения и смешивание», ОК.
4:25
И найдите путь к маске с закругленными углами, которую мы сохранили ранее. И открой это, и
4:29
вот и все. И мы также можем уменьшить это значение, используя CTRL, как мы это делали в
4:34
Стримлабс. И еще раз щелкните его правой кнопкой мыши, выберите «Трансформировать» и просто «Центрировать по экрану».
Расширенные маски веб-камеры в Streamlabs
4:40
Теперь, когда мы рассмотрели основы, давайте начнем работать над более сложными конструкциями. Некоторые из
4:44
который вы можете найти в упаковке в магазине или создать самостоятельно. Я также покажу тебе кое-что
4:48
советы и рекомендации, которые помогут вам настроить их в OBS. Я пошел дальше и скачал Steam Kraken.
4:53
пакет с маркетплейса. Я собираюсь показать вам, как мы работаем с более сложными масками веб-камеры.
4:58
и процесс их настройки. Кроме того, я собираюсь показать вам, как создавать
5:02
сцена веб-камеры, в которую вы можете скомпилировать все элементы веб-камеры, а затем использовать эту сцену
5:06
во всех других сценах. Итак, обо всем по порядку: мы создаем новую сцену в Streamlabs и
5:11
мы называем эту сцену сценой веб-камеры. Позвольте мне добавить веб-камеру в эту сцену.
5:17
Еще раз «Устройство видеозахвата», «Добавить источник». И мы называем это веб-камерой.
5:24
Как только это будет реализовано на сцене,
5:26
мы добавляем новый Фильтр > Маска изображения. Затем находим файл маски кадра веб-камеры.
5:35
Как вы можете видеть, маска веб-камеры на самом деле заполнена черным цветом, поэтому нам нужно пойти дальше и изменить
5:39
Введите здесь от «Альфа-маска» до «Альфа-канал альфа-маски». Это должно просто перевернуть все это
5:44
для тебя здесь. Теперь, когда маска веб-камеры добавлена к нашей веб-камере, нам нужно добавить рамку веб-камеры.
5:49
Перейдя к изображению, добавьте новый источник… мы назовем его «Кадр веб-камеры» >
5:57
Добавьте источник и просто найдите файл кадра веб-камеры. Теперь, когда это реализовано в сцене,
6:01
нам нужно пойти дальше и растянуть это на полный размер холста, поэтому щелкните по нему правой кнопкой мыши,
6:06
Трансформировать и подогнать по размеру экрана. И это должно идеально согласовывать все, что у нас происходит.
6:10
здесь. Теперь у меня есть все эти элементы в одной сцене. Мы продолжим и покажем вам, как
6:15
используйте сцену с веб-камерой в качестве источника в других сценах. Итак, если мы просто выберем другую сцену,
6:20
идем на значок плюсика в источниках. Здесь мы выбираем «Сцена» и просто выбираем сцену с веб-камерой.
6:26
что мы сделали всего минуту назад. И теперь вы можете уменьшить это значение, не беспокоясь о
6:30
все остальные элементы сцены и свободно перемещайте их туда, куда захотите. Там
Расширенные маски веб-камеры в OBS
6:36
у тебя есть это. Как и в Streamlabs, в OBS Studio мы создали сцену под названием «Сцена веб-камеры».
6:43
Добавьте веб-камеру в качестве источника, добавьте ее в сцену, и после этого мы добавим фильтр.
6:49
в качестве маски изображения. И, как и раньше, мы меняем тип с цветового канала альфа-маски на альфа-маску.
6:54
Альфа-канал. Теперь маска веб-камеры реализована, и мы добавим
6:58
рамка веб-камеры. Итак, добавив новый источник изображения, найдите рамку веб-камеры, щелкните ее правой кнопкой мыши,
7:06
Трансформировать, По размеру экрана, и все у вас должно получиться. Всё идеально подошло.
7:12
И сделайте то же самое здесь, где мы сможем добавить эту сцену с веб-камеры к другим сценам.
7:16
И мы делаем это почти так же, как и в Streamlabs, добавляя новую сцену в качестве источника.
7:21
выбрав эту сцену, мы можем уменьшить ее масштаб и переместить туда, куда мы хотим, просто
7:25
как мы можем в Streamlabs. Я очень кратко расскажу, как настроить
Использование рамок веб-камеры
7:29
рамку веб-камеры, а также изменение цветов в Streamlabs. Это будет то же самое
7:34
по всей студии OBS. Здесь и там могут быть небольшие различия, но для большинства
7:38
часть все шаги одинаковы. Вам нужно добавить новый источник, Изображение, и убедиться, что
7:46
это новый источник, поставив здесь галочку. Мы назовем этот источник Webcam Frame.
7:51
Итак, мы продолжим и добавим этот источник. Теперь нам нужно найти соответствующий файл.
7:55
оно совпадает с именем файла маски изображения, и для этого я выбрал Rounded. И мы
8:01
собираемся пойти дальше и нажать «Готово». Как вы можете видеть, здесь проходит красная граница, но я
8:05
на самом деле собираюсь показать вам, как мы меняем этот цвет. Итак, добавив фильтр в кадр веб-камеры,
8:10
мы хотим убедиться, что мы добавим сюда слой цветовой коррекции.
8:16
Единственный вариант, о котором вам действительно стоит беспокоиться, — это опция Hue Shift.
8:19
В комплект поставки входит ползунок, все, что вам нужно сделать, это просто перемещать его вверх и вниз по шкале.
8:23
и он соответственно изменит цвет. Как видите, у нас здесь синий,
8:26
но на самом деле мы собираемся смягчить его и перейти к зеленой стороне,
8:30
и постарайтесь получить очень красивый цвет VBI. Вот и все, разобрались. Я доволен этим. Вы также можете
8:36
поиграйте с этими опциями здесь, но на самом деле это не нужно. Как только вы будете довольны своим цветом,
8:41
вы просто нажимаете «Готово». И вот оно, вы изменили рамку веб-камеры с красной на любую другую.
8:45
цвет, который тебе нравится. Идеальный. Итак, до сих пор вы слушали мой разговор. Теперь я хочу, чтобы ты
Аутро
8:51
попрактикуйтесь в своей OBS. Мы создали бесплатный пакет масок изображений, которые вы можете
8:55
идите и найдите в нашем магазине или в описании видео ниже. И внутри этого пакета
8:59
мы предоставляем вам, ребята, кучу бесплатных масок изображений различной формы, которые
9:03
вы можете просто скачать и использовать для себя. Если вы нашли это видео полезным в
9:07
В любом случае, нам бы хотелось узнать, что вы думаете об этом в разделе комментариев ниже.
9:10
Не стесняйтесь ставить лайк и подписываться, и, как всегда, увидимся в следующем выпуске. Успокойтесь, ребята.