如何创建抽搐OBS流叠加在Photoshop

Final product image
什么,你将创建

在抽搐你住在哪里流?曾经想使从头开始自己的直播视频抽搐覆盖图形?在本教程中,我们将通过创建一个流覆盖的基本行走,为您定制抽搐直播流,在Adobe Photoshop。我们将创建一个自定义从头开始抽搐叠加,然后我们会把它放在Streamlabs OBS使用。

Streamlabs OBS是仅适用于PC,在这个时候。但是,您也可以使用OBS工作室,与像Muxy警报的工具作为替代,如果你使用的是Mac。背后使用这些工具的前提是相似的。

此外,如果你正在寻找一个快速的,可定制的流抽搐叠加,甚至是OBS覆盖制造商,你可能也想看看Placeit!有这么多的流CON帐篷,抽搐图形这里,从抽搐覆盖到开始屏幕抽搐板!如果你正在寻找一个抽搐叠加制造商,这一权利在这里可能适合该法案,因为这内容定制,太!

所以,如果你正在寻找一个超级简单的,OBS流叠加制造商,你可能想给Placeit吧!

obs overlay maker

现在,让我们在挖,如何覆盖工作的谈话,使我们自己的,从头开始!

请跟随我们我们的ENVATO TUTS + YouTube频道上:

你需要什么:

资产这一习俗中所用的以下抽搐叠加教程:

  • 金塔字体家族
  • 的社交媒体图标
  • 网络摄像头图像占位符
  • 空间赛车游戏影像

取一点时间来考虑世界卫生大会牛逼的图像你可能想在你的抽搐叠加使用!我也喜欢用截图的工作,帮我拿的东西怎么会看的感觉,而我在Photoshop我设计。

1。如何OBS流叠加的工作

步骤1

首先,让我们来谈谈一个OBS流叠加以及它是如何工作的。

当你看你喜欢的直播流光,这是经常可以看到的内容的正在直播的顶级显卡。这可能是从静态的图形动画元素,这是由观众互动的影响,更具互动性的文字东西。

twitch overlay maker online
抽搐流叠加设计从PlaceIt

步骤2

这可能听起来很复杂,但它是令人惊讶的简单!我想指出,我没有收到任何赔偿我recommendations这里,这是我的真实想法和意见的基础上,我流以及如何让我自己覆盖的经验。

一般来说,与OBS工作时,我们通常有三件事情会在这里:

  • 首先,我们有我们的图形或媒体。这是我们可以创建一个使用图形软件,如Adobe Photoshop或您所选择的软件内容。
  • 第二,我们有一个基于您的流内容的工具。 OBS单独工作室,例如,不跟踪你的新的追随者。我最喜欢的免费工具流警报是Muxy警报,但也有很多的选择在那里!
  • 第三,我们已经播放软件,它带给您的所有内容一起。认为它像一切都很安排g得自不同来源的成一体,最终确定演示文稿。这方面的一个例子是OBS工作室。

这就是说,在本教程中,我们将使用Streamlabs OBS-的这里的好处是,我们可以在很大程度上“跳过”第二个条件在这里。 Streamlabs OBS处理在一个不错的,整洁的地方警报和广播,所有的。

how to setup stream overlay obs
从PlaceIt可爱象素流叠加

2。如何创建一个流叠加

步骤1

之前,我们直接进入设计阶段,我们需要清楚界定,我们希望创造。有很多事情是我们可以与我们的流叠加和正确的选择是要取决于你想要做什么。有些流有很多对他们的补充,视觉内容,和其他人更喜欢让事情变得微乎其微。再次,有没有正确的答案,只是什么是最适合你和你的广播。

Retro Stream overlay maker
复古抽搐流覆盖从PlaceIt

步骤2

这里有一些事情的清单你可能要考虑,你的覆盖:

的观众互动,这将包括像最近的追随者,最近的用户,以及最近的捐助。

的目标,你可以展示之类的东西您的捐款目标,用户目标,或跟随的目标,例如,

社会化媒体,你可能想使你的社交媒体账户上覆盖本身可见,所以应进一步鼓励观众与您互动。

网络摄像头,许多幡有网络摄像头,在那里,观众可以观看他们和流在同一时间的主题。

聊天窗口则还可以显示y我们的渠道对流本身聊天。就个人而言,我不是这方面的一个巨大的风扇,因为它占用了大量的房地产,但它也可以是一个有趣的方式来捕捉与视频聊天。

聚焦流本身-我们必须,当然,对于流本身的焦点配发的空间。这往往是其中显示的游戏,如果它是一个游戏的实时流。

注意,该列表不是穷举的;也有很多其他的东西,你可以与你的实况视频流和它的覆盖做。例如,我有互动灯光在我的房间,我已经用动画旋转木马,在屏幕上,向人们展示我的作品的一小部分。一旦你知道的基本知识,你可以在你喜欢的任何方式对他们的扩张。

OBS Stream Overlay
流叠加设计从PlaceIt

步骤3

因此,怎么办你知道你覆盖包括什么?我建议你保持以下几点:

哪里是你的焦点?它的乐趣,对屏幕有很多互动的东西,但一定要保持注重信息流的焦点。因此,举例来说,如果你是一个流游戏,它可能是明智的,把它作为你的焦点。

新增项目应补充您的流。这意味着,您添加的内容应加强从它的经验,而不是分散注意力。

确保内容是合法的。如果事情都难以读懂,它可能打败目的。例如,装饰字体往往是最适合的标题和标题,而不是喜欢的东西体内复制或较小的文字。

成为凝聚力。考虑视觉统一的主题,特别是如果你试图建立一个专业的品牌。有一个标志,标志色彩和一贯的审美,这并不是说你不能改变它,但一致性可以使一个更具凝聚力,视觉体验。例如,使用六种不同的字体看起来相当混乱。

您对这些问题的决定应以你的目标的影响。比如,也许你不想要一个标志 – 也许你会喜欢的头像。也许你想展示的艺术作品,所以视觉效果会定期更换。考虑你的目标,你可能有一个更成功的结果。

Stream Overlay OBS
可自定义的OBS流叠加从PlaceIt

3。如何设计一个流叠加

步骤1

所以,现在,我们有我们想要什么,包括一个想法,让我们在挖,并开始设计。有PLE不同的方式NTY解决这个,就个人而言,我喜欢在Adobe Photoshop启动和规划我的设计在那里。

。打开Adobe Photoshop和启动一个新文档。

我们新建文档需要宽1920像素×1080个像素高,这将是我们的总可视面积的大小。

Starting a New Document

步骤2

之前我们创建的文档,让我们改变我们的背景内容为透明。

一旦你这样做的话,请点击创建创建文档

Creating a New Document

步骤3

在本教程中,我将包括以下内容在我的布局:

  • 屏幕上的浏览器的交互
  • 网络摄像机空间
  • 社交媒体内容
  • 用户目标
  • 我的主流镜头空间

我decided与我的屏幕上的观众互动一些内容领域开始。我想覆盖显示最新的追随者,最新的用户,以及最新的捐赠,您可以选择包括(或排除!)你喜欢哪个。

我开始通过创建一个新层。您可以在图层面板做到这一点,如下突出。我喜欢我的名字层,以保持组织的事情。您可以通过点击层本身的名称,在图层面板命名图层。

然后,使用多边形套索工具,突出在下方工具面板,我画的多边形与我的鼠标。每点击一次是在选择一个点。一个额外的小费,按住Shift的同时绘制你的形状,以创建完美的直线!

最后,填补了这一选择用油漆桶工具-I CHOSE为此在黑色的。

Creating a Shape

步骤4

接下来,重复该层。您可以通过右键单击(在PC)或Control键(在Mac上)这样做。从出现的菜单中,选择复制图层。

我们希望这个层总一个我们每个计划的相互作用的三个副本。

Duplicating Layers

步骤5

接着,这三个层合并到一起。

为了这样做,保持移位一次选择多个层。然后,右键单击(在PC)或Control键(在Mac上)。从出现的菜单中,选择合并图层。

注意,该联合收割机的层结合在一起。你可能想保持相互独立。请记住,但是,如果你决定要这个内容区分开来,这是简单的剪切和粘贴到一个新的图层,再次。

Merging Layers

步骤6

现在,我们的重复合并层,使用相同的工艺。

这给我们留下了相同的三个多边形的两个副本。使用移动工具来调整自己的定位,如果你跟我一起下,我们希望它看起来就好像是一个“顶部”另一方面,如下图所示。

Using the Move Tool

步骤7

现在,锁定透明度对我们的底部组多边形。这将允许我们无需担心会“线外”应用颜色。您可以锁定透明度在图层面板中,如下图所示。

选择您的前景和背景的蓝色和青色的颜色,或选择任何你喜欢的颜色!您可以在对颜色的方块工具即可打开拾色器,你的颜色。

Selecting colors

步骤8

使用渐变工具以施加梯度,以我们的底部的多边形。只需单击并拖动以应用渐变。

同样,颜色会“停留”在这个领域,因为我们锁定透明度在我们的图层面板。

Applying a Gradient

步骤9

现在,让我们添加一些文字符合我们的文字工具。这是很难看到的,下面,但我已经打出“新的追随者。”

由于很难看,让我们中风添加到该文本,以帮助提高其知名度。

为了这样做,选择文本层,然后点击添加图层样式,在图层面板。打开下面的菜单,如下图所示,选择描边。

Adding Layer Styles

第10步

下面是我们的图层样式选项样子,随意复制我的价值!我去了3像素中风。

一旦你满意你的设置,单击确定。

Stroke Options

步骤11

重复此过程两次,从而使我们有所有三个多边形之上的文本。

Repeating the process

第12步

当我工作的覆盖面,我常常要插入样的内容,只是让我可以得到怎样的事情的感觉看。在这种情况下,我加入了一些测试名字我的每一个部分,在蓝色的,所以我可以看到它是什么时候有内容等。

我也因此在使用文字工具,我把一个文件夹中的这些内容。您可以在图层面板底部创建文件夹。文件夹(或组)是保持组织你的内容的好方法。我将使用他们,在本教程中,但它们是可选的。

Adding sample text

步骤13

现在,让我们创建SOM的空间e。社会媒体内容。

类似我们原来的多边形,我创建了一个新图层,在一个新的文件夹(我想保持我的布局的不同部位组织)。

我开始通过绘制使用多边形套索工具的选择。然后,填写您所选择的色彩空间,使用油漆桶工具,我就用黑色,再次。

New Section

步骤14

注意这里的图案?我们要重申,我们做了与我们的其他黑色形状的过程:

  • 复制图层
  • 移动图层,使用移动工具,所以你看向“中前面的”其他。
  • 锁定透明像素在图层面板,所以不能应用颜色‘的线的外侧’。
  • 然后套用梯度,使用渐变工具。

我们的目标是到create相似的外观,所以这里的内容相匹配。

Adding a duplicate gradient

第15步

现在,让我们在这里添加一些内容。

您可以添加任何你喜欢这里的社交媒体图标,名称,网址,通知,任何你喜欢的!在这种情况下,我添加了两个社交媒体喊话这里,所以他们仍然在屏幕上,很容易看到。

我用文字工具写的社交媒体手柄,然后我复制并粘贴一些社会媒体图标进入我的布局。

以下是我使用的,如果你想太多使用它们的社交媒体图标!

Adding social media content

步骤16

接下来,我决定增加一个空间网络摄像头。再次,我要指出,这一切都取决于你想要在你的,包括什么布局,你可以,例如,将此部分完全出来!

重复吨他从第14步和15只为我们的网络摄像头的空间相同的过程。

注意,你可能要考虑到你的网络摄像头的尺寸。我选择了工作,宽640个像素×480个像素高我一般基础(例如,在这个尺寸创建一个新文档,将其粘贴到文档中,然后使用移动工具或自由变换缩放)。

然后,我缩放下来,所以我知道的纵横比将保持相同。

webcam overlay maker

第18步

再有,我喜欢在我的布局样的内容,所以我可以得到的东西是如何走到一起的感觉。在这种情况下,我选择了一个测试图像应用到我的网络摄像头空间。

如果你想这样做,同样,你的图像粘贴到文档中。确保含有该图像层是对AB奥雅纳,我们已经指定了网络摄像头的空间的黑色方形。

然后,选择图像层,然后右键单击(在PC)或保持控制并单击(在Mac上),并选择创建剪贴蒙版结果菜单。现在,我们将看到这个空间内显示的样本图像。

Adding a test image

第19步

让我们添加一个空格为我们的用户目标,太!我想这看起来像一个进度条,所以我留了个心眼创建这些形状时。

做一下进度条本身不担心,只是还没有,只要确保有一个空间吧,而且它在视觉上我们组成的其他部分相匹配。按照相同的步骤来创建我们的黑内容空间背后的蓝色渐变的外观。

Adding a progress bar

步骤20

我决定添加一些附加的Decora略去元素,我的布局。

在这种情况下,我创建一个新层。然后,我用矩形选框工具绘制一个水平选择。然后我用油漆桶工具来用黑色填充这个空间。听起来很熟悉?

Creating a long line

第21步

正如你可能已经猜到了,我再次使用相同的过程来创建这个长长的黑线下方的蓝色渐变线!我试图保持视觉这里是一致的。

按照你喜欢的任何颜色相同的步骤!

Finalizing the lines

第22步

我们没有坚持直线 – 事实上,我们的布局使用了一些有趣的对角线,所以我想这可能是有趣的创造底线起控制作用的。再次,这是相同的处理前一行。

试验不同的视觉直接离子!

Bottom lines

4。如何准备显卡的流叠加

步骤1

在这一点上,我对自己很满意的布局,让我们做好准备它OBS!

首先,确保删除或隐藏任何测试内容,如姓名或照片,你把你的布局,只是作为一个例子。

然后,我们需要有选择地合并我们的层。例如,我想我的“顶线”文件夹中的内容将合并到一层,这样我就可以将其导出为一个图像。

按住Shift键的同时选择图层要合并。然后右键单击(在PC)或Control键(在Mac上),并选择合并图层从出现的菜单中把它们结合起来。

不合并都在一起!合并的具体内容,使他们不再有多层的康波堂费。想想你要作为一个单位,你想独立保持什么样的图像。

Merging Layers

步骤2

这里有一个例子我层,之后的所有已合并。没有更多的文件夹,没有更多的多个部分,以我的布局的每个组成部分。

下面,只有最上面的信息栏是可见的(你可以打开和关闭通过点击“眼睛”切换可见相邻的层) 。请注意,再次,这是所有在一个层黑色多边形,他们背后的蓝色多边形,和文本。

让你想导出选定的层。

Merged Layers

步骤3

现在,我们需要选择该内容。去选择>所有以选择整个画布。

Selecting all

步骤4

然后,复制(编辑>复制)并创建一个新文件。

现在,粘贴(编辑>粘贴)-Photoshop应粘贴我们从我们的布局复制,如下面的例子中的内容。但是请注意,这是完全的人,合并后,我们已经选择了我们布局的一部分。

保存此内容作为PNG文件所以背景停留透明。

重复这个过程中布局的每个部分。你可以在理论上导出整个布局为一个透明的PNG,但我常常宁愿保持不同部分分开。选择是你!

Isolated part of layout

5。如何使用流叠加

步骤1

现在,让我们把我们的工作,并讨论如何将流叠加添加到OBS。虽然我们会专门在本教程中使用Streamlabs OBS,前提是在OBS类似的工作室,将在您的源码ES,这样你就可以与他们的广播。

请确保您有Streamlabs OBS装。如果不这样做,或您有关于安装问题,请从Streamlabs本教程。

开始通过创建一个新的场景。根据该说的场景面板,点击加号来建立一个新的场景。当你这样做,你会被提示命名您的新景象。

我决定把我的场景“我的叠加”。名称你任何你想!

Creating a new Scene

步骤2

但是,我们的场面没有了什么东西呢!这是因为我们还没有定义任何资源。

同样,点击加号,此时在Sources面板。

Adding a Source

步骤3

这样做带来了一个选项一大堆!但是,我们要与图片开始,前前后后M的可能的源列表中。

选择图像作为源,然后单击添加源。

Adding an Image Source

步骤4

以下是所得的弹出的选项。我们要添加一个新的来源,而不是,给它一个名称,然后单击添加源。

如果我们不切换“添加一个新的来源,而不是”,我们可以从我们已经定义的老污染源进行选择。便利!

Defining a source

步骤5

现在,选择您想要的图像导入,这将是我们从Photoshop导出的图像之一。

在该实例中,下面,我选择含有我们的三个黑色的多边形透明PNG。

一旦你选择了你的形象,点击完成。

Importing an Image

步骤6

现在,你会看到Streamlabs OBS进口了图像到我们可见的AREA。

点击并拖动到你想它在布局显示图像的位置。

重复这一过程,并继续导入图片。

Positioning Images

步骤7

让我们来看一个例子。

在这种情况下,我已经导入两张图片,我有一个在我的布局(我已经被称为“顶线”),和我的三个多边形(我已经被称为“顶云行通知“)。

然而,他们在错误的顺序这里,行不应该是我通知的顶部。

Images in Order

步骤8

幸运的是,重排的来源是容易!

只需点击和拖动重新排列来源。现在,我有我我的多边形后面线,所以他们放在一起显示,因为我打算在我的设计。

Rearranging Images

步骤8

这里就来看看我的Streamlabs OBS,我已经导入我的所有影像后。

(I包括一个静态的背景图像,以及,只为可见性。这是我有我的游戏或流的画面)。如果你是如何导入图像不确定,请返回步骤2

但是,我们还没有完成!那我们的通知?在你的源代码,点击加号,再次添加新的来源。

Imported Imagery

步骤9

然而,这一次我们不希望选择图像 – 我们想要流标签。

从来源列表中选择流标签,然后单击添加源。

Stream Labels

第10步

就像当我们增加了一个图片,我们要选择添加一个新的来源,而不是创建一个新的来源。

给你的新源的描述性名称,FO[R参考,然后单击添加源。

Adding a New Source

第11步

我们有这么多的选择,当涉及到我们的流标签!

更重要的是,一定要看看标签类型。下面,我选择最近的追随者,因为这是我想显示的信息。采取措施,通过清单一看,但是!有这么多不同的事情,你可以选择在这里,像你的最大捐助者为一个月,最近的欢呼,以及更多!

您可以更改字体,颜色,透明度,一大堆的选项这里!其更改为最适合您的设计。例如,我在我的字体系列设定前往Quinta Pro中,尺寸36和颜色#0000faff

点击完成,当你很高兴与您的选择。

Adjusting Stream Labels

步骤12

现在,只需导入图像时一样,单击并拖动以调整您的文本布局。我定位矿上,说:“新的跟随者”对应的黑色多边形的一个顶部。

Adjusting Stream Labels

步骤13

重复此过程在布局任何其他动态文本。

同样,有这么多的流标签可供选择,我选择了工作,我最新的追随者,我最新的用户,我的最新捐赠。

Adding Stream Labels to your Overlay

第14步

现在,让我们在我们的订阅目标添加!通过添加新源开始。

纵观添加源选项,再次,我们可以选择认购目标,而不是图片或流标签。它位于下小工具。

Streamlabs Widgets

步骤15

熟悉了吗?添加而不是与工作的新来源现有的,并给你源的名称,供大家参考。然后,单击添加源。

Adding a New Source

步骤16

下面就来看看我们的认购目标设置。

继续前进,放在您喜欢的值。例如,给你的目标标题,设置你的目标量,添加起始量,如果你喜欢,和结束日期。你还可以编辑的设置上部左手部分的宽度和高度。

点击开始目标一旦你认为自己的特性。

Stream Subscription Goals

步骤17

一旦我们点击开始进球,我们可以看到我们的收费栏的预览。

如果你想更改属性,请单击最终目标,并对其进行调整。

,如果你与你的价值观快乐,单击完成。

Previewing Stream Goal

步骤第18页

现在,我们与以前的来源一样,单击并拖动来调整和调整您订阅的目标吧。您也可以从这个预览只是使用缩放柄调整的事情。

Adding a Subscription Goal to your Stream Overlay

第19步

让我们来看看其他一些常见的来源,你可能想在你的流布局中使用。

首先,检查出的显示捕捉。这捕获整个显示器。我喜欢用这个,如果我使用一个以上的程序在同一时间,例如,如果我想分享Photoshop和后遗症(我的整个屏幕)。

Stream Display Capture

步骤20

然后,我们有游戏捕获。这将捕获一个游戏,你玩你的电脑上。一般来说,大多数的我的电脑游戏已经正确地与此源工作。简单地定义游戏,瞧!

Stream Game Capture

第21步

窗口捕捉器这听起来像,它抓住了你的计算机上的特定窗口。如果我想完全流Photoshop和没有别的,例如这是非常方便。

Stream Window Capture

步骤22

视频捕获设备是当我想显示我的摄像头我通常使用的源。我可以把它定义为我的视频源,然后预览我的相机,内Streamlabs OBS。

Video Capture Device Streamlabs

,这仅仅是个开始!

正如你可能已经猜到了,有这么多的事情,你可以用你的流叠加做。我喜欢和GIF动画和mp4文件,例如尝试。您可以在Streamlabs OBS这里添加文本,您可以在屏幕上显示您的聊天,和更多!你甚至可以有一个片头字幕!

Hopefully,这给你一个味道到一些可能的! Streamlabs对如何开始一个真棒教程,如果您有关于安装问题,流设置,以及更多!

这仅仅是你能创造什么味道,你怎么能创建它,祝你流叠加!

how to setup stream overlay obs

我喜欢新的尝试东西为我流的视频,面板,照明,它的所有很多的乐趣!如果你可以在定制流和频道寻求额外的帮助,你可能想看看Placeit!这是一个人性化的流叠加制造商,“流起步不久”叠加制造商,以及更多!

有这么多的内容来定制,这是超级好用。快来看看吧!

stream starting soon overlay obs

如果你喜欢这个教程,这里有一些OT她可能会喜欢!

AdvertisementAdvertisement

人已赞赏
平面设计

如何使在Photoshop中的半色调图案

2020-10-24 22:22:29

平面设计

如何使一个审美在Photoshop中编辑(毛刺效果)

2020-10-25 22:21:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索