使用喷绘技术使杰出的类型

Trevin是WebFX的业务开发高级总监。他参与过450多个营销活动,20多年来一直在建设网站。他的作品被《搜索引擎土地》、《今日美国》、《快公司》和《公司》推荐。

预览

点击下面的预览图来查看作品全面使用喷绘技术使杰出的类型

教程资源

  • PSD: ghostfighting 3r制作的沙发PSD
  • EPS(可选):illustrious.eps作者:Eric Vasquez(就是我)
  • 字体:脚本字体(找你最喜欢的这个列表

步骤1:创建一个新的Illustrator文档

首先,我们要创建一个新的Illustrator文档,这可以是任何你想要的大小,因为矢量图形是可伸缩的,但为了本教程的目的,我使用8×8英寸。接下来,我使用一种名为“可爱的错觉”的字体(现在很难找到),用文字工具(T)在画板上输入单词“Illustrious”;我们希望字体相当大,因为如果需要的话,我们总是可以减小大小。

你可以找到一个相似的列表在字体松鼠脚本字体如果你没有我使用的字体,可以免费下载。或者,只需使用您已经安装的脚本/草书字体。你也可以输入除“显赫”以外的任何单词,并使用任何你想要的字体,但我真的很喜欢我们将创建的草书/脚本字体。

此外,当使用这些技术时,草书L和S形状工作得很好。创建一个新的Illustrator文档

步骤2:创建轮廓

接下来我们要做的是从文本中创建轮廓,这样我们就可以单独控制每个字母的位置。要做到这一点,用选择工具选择你的文本,然后输入>创建轮廓(或者你可以使用快捷键Shift + Cmd/Ctrl + O)。

创建轮廓

步骤3:手动字距调整

既然我们现在有了轮廓字母,我们可以单独选择每个字母,然后随意移动它们。要做到这一点,我们必须通过选择工具选择文本,然后选择对象> ungroup (Shift + Ctrl/Cmd + G)。为了达到想要的结果,我们想要移动每个字母,然后将它们连接在一起,使我们的文本成为一个连续的形状。

使用下面的图像作为指导,并尽可能地匹配它。手动字距调整

第四步:整合

一旦我们有字母几乎接触,我们将使用钢笔工具(P)将字母连接在一起。如果您熟悉这个工具,这一步对您来说应该很容易。

如果没有,我建议你在网上查看一些使用钢笔工具(P)的教程,因为它是Illustrator中最重要的工具之一。这个想法是选择一个没有轮廓的黑色填充,并尝试遵循脚本字体的自然弧度将字母形式连接在一起。把它放在一起您可以使用钢笔工具(P)单击一个锚点,然后在选择另一个点后,您可以在释放鼠标之前按住该点来控制曲线的形状和大小。

把它放在一起把它放在一起我们现在可以将我们的文档保存为Illustrator文件或EPS文件,因为我们稍后会使用这个。为了您的方便,或者只是为了以防您在使用钢笔工具(P)时遇到一些困难,我在上面的教程资源列表中提供了最终的EPS文件,以便您可以使用它,而不是执行前面的步骤。提示:如果您还不熟悉钢笔工具(P),我强烈建议您自己尝试并尝试熟悉它。

第五步:跳转到Photoshop

现在我们已经准备好了我们将使用的文本,我们可以开始设置我们的Photoshop文档。打开上面教程资源列表中提到的Sofa PSD(文本的背景),这样我们就可以开始为我们的教程定制它了。跳转到Photoshop

步骤6:停用一些图层

一旦Sofa PSD文件打开,我们想要关闭它的几个层。

我圈出了我们要关闭的三个图层。停用一些图层这将是一个保存文件的好时机,以防你还没有保存。你可以保存它,或者做一个文件>另存为保存原始;完全由你决定。

停用一些图层

步骤7:PSD的更多调整

接下来,我们要选择三个图层(图层6,色相/饱和度调整图层和纹理3),并将它们在图层面板中按图层堆叠顺序往上移动,以便它们在“墙”图层组之上。接下来,我们将通过双击色相/饱和度调整层来降低纹理层的饱和度。PSD的更多调整一旦调整图层对话框窗口打开,我们将拖动中间的饱和度滑块一直到左边来降低这个图层的饱和度。

PSD的更多调整

第八步:去除墙纸

你现在会注意到,一些纹理墙纸层实际上是重叠的地板下面的木制装饰。为了纠正这个问题,我们要用矩形选框工具(M)选择纹理3图层的部分。选择重叠的区域,然后简单地按Delete键删除所选区域。

剥去壁纸

步骤9:修整

现在看看我们的作品,沙发和沿着地板的装饰是我们作品中最高的对比点。我们想把它调低一点,这样“显赫的”文本就会最突出。现在我们在图层面板中选择“图层10”(红圈),点击图像>调整>色相/饱和度。

修整修整接下来,我们将再次拖动中间的滑块到左边,只到-55左右。修整修整

第十步:降低不透明度

在壁纸的Texture 3图层上,我们将不透明度降低到50%左右。降低不透明度

11 .全新沙发

接下来,在图层面板中展开“Sofa”图层组,查看文件夹中的所有图层。你会注意到这个文件夹中有几个图层,包括一个色相/饱和度调整层。

全新沙发双击色相/饱和度调整图层,将饱和度滑块滑动到-90,将明度滑块滑动到-75。全新沙发

步骤12:准备喷枪!

到目前为止,我们主要是在准备和修改文件。我们现在可以将图像压平并保存它。将图像压平的最快方法(如果你之前不确定如何做到这一点)是右键单击一个图层,从菜单中选择“压平图像”。

在顶部还有一个图层面板菜单(通过不透明度选项),它用一个向下的箭头指示;当你点击这个,你会看到许多命令,包括扁平化图像。准备喷枪!

步骤13:非常智能的对象

现在我们要打开之前在Illustrator中创建的EPS文件(illustrious.eps),然后用选择工具(V)选择文本。一旦你选择了文本,按Cmd/Ctrl + C复制文本。

回到Photoshop,按Cmd/Ctrl + V将复制的文本粘贴到Photoshop文档中。当你将文本粘贴到Photoshop中时,你会被粘贴对话框窗口提示,它会询问你是否想要将对象粘贴为智能对象——点击OK。现在,矢量形状应该被粘贴在沙发的平展图像上方。

非常智能的物体

第14步:把我涂坏

下一步,我们将通过选择一个坚实的基础颜色开始在我们的文本着色。为此,双击图层面板中的矢量对象图层,打开图层样式对话框窗口。选择颜色叠加,单击颜色叠加选项中的小色块,然后将颜色叠加设置为明亮的霓虹灯绿色(#8aff00)。

给我涂坏颜色在这一点上,我们想要保存我们的工作,以便为真正的乐趣开始的下一步做准备。检查点:你的工作应该如下图所示。给我涂坏颜色

第15步:不要插队!

接下来,我们将开始润色的字母首先添加一些高光。

要做到这一点,在画笔面板中选择一个中等大小的,柔软的圆形画笔(如果你看不到面板,请按F5),并将画笔的不透明度选项降低到20%左右。之后,确保画笔的前景色为纯白色。现在,按住Cmd或Ctrl并单击包含文本的智能对象层。

现在,您应该在文本周围看到那些行进的蚂蚁,这表明您已经在文本周围进行了选择。在文本上方创建一个新图层,同时保持选区处于活动状态(如果你不小心取消了选区,只需使用Shift + Ctrl/Cmd + D执行重新选择命令)。开始沿着一些字母的边缘在新图层上刷。

通过沿着边缘刷,你应该开始得到一些漂亮的,平滑的高光表明光源。通过选择文本,你可以确保你所有的笔触都停留在行进的蚂蚁内部——就像一本填色书一样!不要太担心在这一点上你的高光画得有多深,因为我们以后总是可以擦掉一些。

我们的主要目标是对技巧有个感觉。(当然也是为了玩得开心)。守规矩!

步骤16:继续前进

现在,在这一点上,我继续使用低透明度笔刷,试着想象我们的字母的最外面的部分有点薄,因为它们逐渐变细——这是我们会注意到光线穿过的地方,几乎就像它在字母后面一样。

顺便说一下,我用的是鼠标而不是平板电脑,这有时会有点棘手(如果你是天生的左撇子,那就更棘手了)。如果你有平板电脑,我强烈建议你使用它,因为这个过程——用平板电脑——应该更容易。守规矩!

步骤17:检查点

在此工作一段时间后,你现在可以看到整个单词的高光。

您还会注意到,我沿着连接字母的底部曲线也添加了高亮。通过摆弄这个,也许用低透明度的橡皮擦擦掉一些部分,你可以开始看到它的走向。我鼓励你尝试一下,因为它会很有趣。

箭头作为指示器,显示光源的建议方向。守规矩!

步骤18:进入下一个

在继续下一步之前,将我们刚刚完成的图层命名为“Highlights”,以保持内容的组织性。现在,在highlight图层上方创建一个新图层,命名为Shadows。我们将使用类似于我们在前面步骤中使用的技术,但不是使用纯白色,我们将使用比原始绿色(#8aff00)稍深一些的颜色。我选择了#559d00,因为它看起来像是一个不错的,稍深的绿色阴影。我们不想太暗的原因是,我们希望阴影是微妙的和渐进的,使颜色值的变化更可信。

守规矩!

步骤19:在阴影中

使用这个较暗的绿色阴影,我们将再次按住Cmd/Ctrl,然后单击我们的智能对象层,在原始文本的对象周围做出一个选择。在我们完成主动选择后,选择“阴影”图层,开始在字母内部刷添加微妙的阴影。一开始你可能不会注意到很大的区别,但是通过打开和关闭这个图层,你可以看到有阴影和没有阴影之间的区别。

此时,为了安全起见,我建议再次保存您的工作。在阴影里

步骤20:额外的阴影

一旦你保存了你的作品,在之前的“阴影”图层上创建一个新的图层,并将这个图层命名为“额外的阴影”。正如新图层的名字所暗示的,我们想要添加一个额外的更暗的阴影层。使用相同的软笔刷,选择一个稍深的绿色阴影(#498601),并重复我们在上一步中使用的相同技术来应用这些阴影。这将有助于增加一点变化和深度的字母形式。

额外的阴影

步骤21:添加一个外部发光图层样式

现在我们要做的是双击智能对象图层,打开图层样式对话框,这样我们就可以添加一个外层发光图层样式。对于发光的颜色,使用明亮的绿色(#88f05a),并应用如下图所示的设置。添加一个外部发光图层样式这个图层样式将有助于在字母周围增加一点扩散的模糊性,也可以帮助它们看起来更柔和,更圆润。

步骤22:添加投影图层样式

接下来,我们将从图层样式对话框窗口中添加更多的样式。选择投影来应用这个图层样式,颜色:#012c03,这是一个非常暗的绿色(接近黑色)。应用下图所示的设置,然后单击确定,同时应用辉光和阴影。

添加投影图层样式

步骤23:差不多了!

现在您应该拥有如下图所示的内容。我们已经接近完成了,只剩下几个步骤了,所以让我们继续吧!对照一下你的工作:添加投影图层样式

步骤24:分组类型

接下来,我们将智能对象与我们添加的高光和阴影一起分组,将它们放在一个图层组中。

一种方法是点击图层面板底部“添加新图层”图标旁边的小文件夹图标。将它拖到图层堆栈的最顶部,并将该图层组命名为Type。现在我们已经创建了这个图层组,只需将与文本相关的图层拖到组中。通过这样做,我们可以通过移动图层组来移动类型和所有的高光/阴影。类型分组

步骤25:缩小角度

现在我们已经把我们的类型很好地组合在了“type”图层组中,我们将在图层面板中选择文件夹,并将其拖到新的图层图标上,复制该组和其中包含的所有图层。

一旦你有了一个组的副本,点击小的“眼睛”图标来关闭原始组的可见性。点击刚刚复制的图层面板文件夹中的“Type”图层组的新副本,然后按Ctrl/Cmd + T进入自由变换命令(或选择编辑>自由变换)。同时按住Shift键保持尺寸成比例,减少类型的大小,使它变得更小。

另外,字体的角度要稍微大一点,这样右边就会指向上方。这将使字体更有活力,而不是让它完全笔直地坐在沙发上。到目前为止,我们一直保持它的直,这样我们就可以更容易地喷枪高光和阴影(这将是更困难的用倾斜的类型)。

一旦您对您的免费转换感到满意,只需按Enter提交更改。减少和角度

步骤26:反射光

接下来,创建一个新图层,就在Background图层的上面,在Type图层组的下面。选择浅绿色(#6bff67),从工具面板中选择渐变工具(G)。

选择一个径向渐变,从纯绿色渐变到完全透明(在渐变工具的选项栏中设置这些选项)。在我们创建的新图层上,点击并从中心向外拖动,创建径向梯度。更改此图层的混合模式为叠加,并将其放置在一些前几个字母的后面,这样它看起来就像环境光反射在沙发垫子上。

复制该图层几次,并将它们分散在字母后面,以增强效果。反射的光

步骤27:合并图层

选择你在上一步中创建的最上面的渐变层,按住Shift,选择最下面的渐变层。这应该会选择你所做的所有径向梯度层。

只需按Shift + E将它们合并到一个图层,就像我们在教程前面所做的那样。注意:一旦你合并图层,你将不得不再次改变合并图层的混合模式为叠加。合并图层

步骤28:增强光线

好了,最后一步!

现在我们已经合并了创建环境光的渐变,在图层面板中选择时按Cmd/Ctrl + J再次复制该图层。接下来,将复制图层的不透明度降低到50%左右。作为画龙点睛之笔,使用橡皮擦工具(E),选择一个圆形软笔刷的低透明度设置。

用橡皮擦工具,擦掉一些反射光洒在墙纸上,使它看起来不那么刺头和突出;我们只是想把这个调低一点,把重点放在字体和沙发上。增强光线

教程汇总

您已经成功完成了本教程!我们已经讨论了很多内容,但我希望您从中找到了一些有用的技巧,可以在您自己的工作中使用。

润色可能需要一些时间才能完成,但就像他们说的,重要的不是目的地,而是到达目的地的过程。使用喷绘技术使杰出的类型

下载源文件

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!