用3D灯泡和类型创建一个艺术场景

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

预览

下面你可以看到本教程的最终图片。点击查看全尺寸

教程资源

步骤1:在Photoshop中制作文本

我们将开始使用Photoshop创建3D文本(然后,Cinema 4D)。首先,在Photoshop中打开一个新文档,尺寸:1280px * 1024px。然后选择水平文字工具(T),用粗体书写你的文本。

我用两行写了“Ideas are all around us”,第一行用的是Avenir 85 Heavy (175 pt),第二行用的是Avenir 95 Black。要更改字母之间的空格,打开字符面板并将跟踪值修改为-35。

步骤2:将文本转换为形状图层

现在我们需要将文本图层转换为形状图层,以便稍后将文档导出为Illustrator路径,并在Cinema 4D中打开它。右键单击每个文本层,从菜单中选择转换为形状。

步骤3:保存路径

为了将形状图层导出到Illustrator路径中,我们需要先保存文本路径。选择第一个形状层,进入路径面板(窗口>路径)。单击右上角的按钮,并选择New Path。

对第二个形状层做同样的事情。

步骤4:导出文档

打开文件>导出>路径到Illustrator,给你的文件一个名称,然后单击保存。将使用. ai (Adobe Illustrator)扩展名创建一个新文档。现在你可以关闭这个Photoshop文档了。

步骤5:在Cinema 4D中导入文档

打开Cinema 4D。然后转到文件>打开,找到你从Photoshop导出的。ai文件,然后单击打开。将出现一个新窗口。

保持导入设置不变,然后单击OK。现在我们可以使用路径来创建3D文本。

步骤6:合并路径

在对象面板中,你可以看到一个空对象(就像Photoshop中的组)。单击空对象旁边的加号按钮展开它。按住Ctrl/Cmd键,从Objects面板中,选择第一行文本的所有路径。

然后右键单击其中一个路径并选择Connect + Delete。这将把所有路径合并为一条路径。对其余的文本行执行相同的操作(如果您有多个文本行)。

步骤7:创建3D文本

从“text”空对象中选择第一个路径。然后按住Alt/Option键,点击并按住HyperNURBS按钮,选择挤出NURBS。这将把活动路径直接放到挤出NURBS对象中。

你会注意到你的第一行文本现在是三维的。对第二个文本路径执行同样的操作。

步骤8:设置第一个对象的属性

选择第一个挤出Nurbs对象(“text 1”),转到属性面板,然后单击“Coord.”选项卡。将Z轴改为4。然后选择Caps选项卡并使用下图中的设置。

步骤9:设置第二个对象的属性

对第二行文本(“text 2”挤出NURBS对象)重复前面的步骤,但这一次,将Z轴设置为3.5。

步骤10:添加环境

现在我们将为3D场景添加一个工作室环境。Cinema 4D有一组我们可以使用的默认环境。单击Content Browser按钮并找到Environments文件夹。

然后双击“7_StudioA_Environment”,关闭内容浏览器窗口;确保“StudioA_Environment”空对象在“TEXT”空对象下面。这个环境将提供我们所需要的光线和背景。你会在场景中看到一个红色的目标;这就是我们放置3D文本的地方。

别担心,红色目标只是作为位置参考,在渲染场景时不会出现。选择“TEXT”空对象,并使用移动工具(E)移动文本。如果你想改变文本的大小,你也可以使用缩放工具,如果你想改变文本的角度,你也可以使用旋转工具。

步骤11:为灯泡创建路径

现在我们已经完成了创建3D文本,我们将继续使用Photoshop和Cinema 4D创建一个灯泡。下载这张照片并在Photoshop中打开。我们将只使用它作为参考照片,我们将跟踪我们的路径。

激活Photoshop标尺(Ctrl/Cmd + R),点击并按住垂直标尺,然后拖动一条参考线到灯泡照片的中间区域。选择钢笔工具(P),确保选项栏中的形状图层选项被激活,然后在灯泡的右侧区域创建一条路径。形状的颜色并不重要。

创建形状后,转到路径面板,单击右上角按钮,选择保存路径。给路径一个名称,然后单击OK。

步骤12:为灯泡的金属部分创建一个路径

再次选择钢笔工具(P),在灯泡金属区域的右侧创建一个形状。然后进入路径面板并保存该路径。

步骤13:导出路径到Illustrator

打开文件>导出>路径到Illustrator,并保存。ai文件在您的计算机上。

步骤14:在Cinema 4D中导入灯泡路径

打开导出的灯泡的。ai文件。在Objects面板中,您将看到一个空对象,其中有两条路径。

步骤15:创建3D灯泡

选择第一个路径,按住Alt/Option键,点击并按住Hyper NURBS按钮,选择车床NURBS。你会看到你的路径将被转换成一个3D形状,看起来像一个圆柱体而不是一个灯泡——我们将很快纠正这个错误。

步骤16:修正3D灯泡

选择车床NURBS对象内部的路径。然后选择移动工具(E),点击红色箭头(X轴箭头),并将其拖到左边,直到你有灯泡形状。

步骤17:修正灯泡的3D金属部分

对于第二个路径也重复前面的两个步骤。灯泡的底部部分不会被正确放置,所以你必须选择车床NURBS对象,并使用移动工具将其移动到灯泡的下面。

步骤18:设置灯泡的属性

按住Ctrl/Cmd键并选择两个车床NURBS对象。然后单击属性面板中的对象选项卡,并将细分设置为120。

步骤19:把灯泡放在舞台上

点击“灯泡”空对象并复制它(Ctrl/Cmd + C),然后从窗口菜单中选择初始文档并粘贴灯泡(Ctrl/Cmd + V),如果你的灯泡太大了,使用缩放工具(T)将其缩小。

然后使用移动工具(E)移动灯泡上方的3D文本。

步骤20:添加一些材料

现在我们已经有了所有我们需要的3D对象,我们将添加一些材料给他们的表面。点击Content Browser按钮,找到以下三个材料:

  • chrome1 (Cinema 4D > Materials > Channel > chrome1)
  • chrome2 (Cinema 4D > Materials > Channel > chrome2)
  • glas001 (Cinema 4D > Materials > Basic > glas001)

找到每个材质后,双击它,将其添加到材质面板。你看到的其他材料来自我们之前添加的工作室环境。

步骤21:应用材料

将“chrome2”材质拖到“TEXT”空对象上。然后将“glas001”材料添加到灯泡(“车床NURBS”对象),将“chrome1”材料添加到灯泡的金属区域(“车床NURBS.1”对象)。在下图中,你可以看到渲染的场景。

现在看起来好多了。你怎么看?

步骤22:渲染3D场景

点击渲染设置按钮(渲染设置如下图所示)。我将图像的大小设置为1500px * 1200px, 72dpi, JPEG格式。然后您可以关闭渲染设置窗口。

使用3D场景右上角的导航按钮将视角移动到文本的正前方。找一个你想要渲染场景的角度。在我渲染的图像中,我试图通过放置尽可能低的视角来使3D元素看起来大而有气势。

在你找到最适合你的角度后,点击渲染图片查看器按钮。等待图像渲染完成,然后关闭此窗口。图像将保存在您的计算机上,在您选择的指定路径。

现在我们已经完成了Cinema 4D,我们将在Photoshop中完成该项目。在继续之前,不要忘记保存C4D文件,以防以后需要修改它。

步骤23:在文本中添加图案

在Photoshop中打开刚刚从Cinema 4D中导出的JPEG图像。我们将首先为文本添加一个图案,使其看起来更有趣,并赋予其触觉纹理。选择魔棒工具(W);在选项栏中将公差设置为12。

按住Shift键,点击每个字母的正面,直到你选择了整个文本。按Ctrl/Cmd + J创建一个新图层使用选定的区域。命名新图层为text pattern,双击打开图层样式窗口,按照下图设置图层样式。

步骤24:将灯泡从背景中分离出来

点击图层面板中的背景图层,使其成为活动图层。选择矩形选框工具(M)在灯泡周围创建一个选区。选择魔棒工具(W),按住Alt/Option键,然后点击矩形选区内的背景区域,直到你得到一个刚好是灯泡周围的选区。

然后按Ctrl/Cmd + J创建一个新图层使用选定的区域。命名这个新图层为light bulb,把它放到一个图层组中(Ctrl/Cmd + G),然后命名这个图层组为light bulb。

第25步:给灯泡一个外部发光层样式

双击“灯泡”图层,查看图层样式对话框窗口,给灯泡一个外发光图层样式。

步骤26:创建亮度/对比度调整图层

按住Alt/Option键,点击并按住图层面板底部的创建新填充或调整图层按钮(它看起来像一个半白半黑的圆圈),然后选择亮度/对比度。这将打开一个新窗口。勾选“使用上一层创建剪贴蒙版”选项,并按照下图进行设置。

通过使用“灯泡”层作为剪贴蒙版,调整层将只影响“灯泡”层,而不会影响它下面的任何其他层。

创建颜色平衡和照片滤镜调整图层

添加一个新的色彩平衡调整层,并确保勾选使用上一层创建剪贴蒙版选项。然后添加一个照片滤镜调整图层,设置颜色为#e2dab2,密度为25%。

第28步:刷一些光线反射

创建一个新层,选择一个软尖的白色画笔工具(B),并使用它在灯泡内部创建一些柔软的圆圈。改变画笔的主直径,这样软圆就会有不同的大小。将你的软圆图层命名为“lights”,右键单击它,然后选择转换为智能对象。

然后选择滤镜>模糊>径向模糊来软化白色圆圈,使其与背景更好地融合。右键单击该图层并选择创建剪贴蒙版。然后设置该图层的不透明度为75%。

步骤29:添加华丽的矢量形状的场景

现在我们将使用Adobe Illustrator在灯泡后面添加一些华丽的矢量。打开Illustrator,创建一个新文档。转到符号面板(窗口>符号),单击该面板右上角的按钮,打开符号库,选择Florid矢量包(Illustrator CS中包含的标准矢量包)。

将您喜欢的一些符号拖到画板中。我只使用了两个符号(如下图所示)。使用选择工具(V)选择你的第一个矢量,复制它(Ctrl/Cmd + C),回到Photoshop并粘贴你的矢量(Ctrl/Cmd + V)作为智能对象。

对剩下的向量做同样的处理。现在在Photoshop中,把这些智能对象放到一个图层组中(Ctrl/Cmd + G),并命名为florid vectors,这样我们可以保持我们的工作有组织。使用自由变换(Ctrl/Cmd + T)来改变这些华丽的矢量的大小,位置和尺寸。

复制它们(Ctrl/Cmd + J)你想要的次数,并以你喜欢的方式将它们安排在灯泡的右侧。在下面的图片中,你可以看到我是如何一步一步创建我的华丽装饰。给每个图层添加一个颜色叠加图层样式,给它们一个深紫蓝色(#403f67)。

将所有这些智能对象重新分组,并将组命名为“right”。右键单击此组并选择复制组。点击编辑>变换>水平翻转,将这个组移动到灯泡的左侧。

命名这个组为left。你也可以在灯泡中间添加一个引导线来帮助你对称地安排你的图层。

步骤30:使灯泡透明

现在我们将使灯泡看起来像半透明的,使它看起来真实。复制florid vectors组,并按Ctrl/Cmd + E将其合并为一个图层。将合并图层放在“light bulb”组的上方。

右键单击它并选择转换为智能对象。选择滤镜>模糊>高斯模糊,设置半径为1.4px。然后点击滤镜>扭曲>球化,按照下图进行设置。

我们希望这个图层只在灯泡内部可见。为此,我们将使用蒙版。转到“light bulb”组,按住Ctrl/Cmd键并单击“light bulb”图层的缩略图,在其周围放置一个选区。

然后点击“florid vectors”智能对象使其激活,然后转到图层>图层蒙版>显示选择。选择一个又大又软的黑色刷子(B),在灯泡的金属区域涂上油漆,擦掉该区域的华丽装饰。设置此图层的不透明度为10%。

复制图层组

从florid vectors组中复制right组。按Ctrl/Cmd + E将这个组合并为一个图层。右键单击该图层,选择转换为智能对象,然后将其放在“text pattern”图层下面。

使用自由变换(Ctrl/Cmd + T)来改变这个图层的大小,并旋转它,如下图所示。复制这个图层(Ctrl/Cmd + J),点击编辑>自由变换(Ctrl/Cmd + T),旋转这个新图层并向下移动。将这两个图层分组,命名为right。

然后给两个智能对象添加0.3px的高斯模糊。

复制右边的Florid向量

复制“正确”组,点击编辑>变换>水平翻转。然后使用移动工具将新组移动到图像的左侧。命名这个组为left。在图层面板中选择“右”和“左”图层组,按Ctrl/Cmd + G自动将它们放到另一个组中,并将新组命名为“blurred florid vectors”。

第33步:删除部分的Florid矢量重叠的3D文本

点击图层面板底部的添加图层蒙版按钮,为“blurred florid vectors”图层组添加一个蒙版。选择一个黑色的硬笔刷,主直径约为10px,用它来擦除覆盖3D文本的华丽装饰区域。一旦你完成了蒙版,设置图层组的不透明度为15%。

步骤34:制作更多的灯泡

从“light bulb”组复制“light bulb”图层(按住Alt/Option键,点击该图层并将其拖到组外)。然后右键单击该图层并选择转换为智能对象。把这个图层放到一个组中,命名为small light bulb。

移动这个图层到左边,使用自由变换(Ctrl/Cmd + T)使它更小。按Ctrl/Cmd + J复制这个图层,将新图层移动到左边,使用自由变换(Ctrl/Cmd + T)改变它的大小。重复这个过程,直到你有四个灯泡。

把这四个图层放到一个组中,命名为left。

步骤35:增强灯泡的深度感知

使用不同的值为小灯泡层添加高斯模糊滤镜。灯泡越小,高斯模糊值越高。这会造成一种错觉,大灯泡离我们近,小灯泡离我们远。

步骤36:复制灯泡

复制“左”组,点击编辑>变换>水平翻转,使用移动工具将新组向右移动。命名此组为“right”。

步骤37:颜色调整

我们将对小灯泡进行与大灯泡相同的颜色调整。按住Ctrl/Cmd和Shift键,在图层面板中,点击所有小灯泡图层的缩略图来选择它们。在所有其他图层之上创建新组(图层> new > group),命名为“light bulb adjustment”。选择仍然是活动的,(按Shift + Ctrl/Cmd + D如果你不小心取消选择)到层>层蒙版>显示选择。

现在我们在这个图层组中放置的所有东西都将只在小灯泡的区域可见。

步骤38:创建一些调整图层

按住Ctrl/Cmd键,从“灯泡”组中选择三个调整图层。然后按住Alt/Option键,将这些图层的副本拖到“灯泡调整”组中。

用Photoshop笔刷添加一些纹理

现在我们将使用一些水彩笔刷创建纹理。下载这些刷子并安装它们。选择其中一个笔刷(B),打开笔刷面板(F5),按照下图进行设置。

要保存画笔,单击面板底部的“创建新画笔”按钮。创建一个新组,命名为textures,然后将图层组放在Background图层的正上方。然后,在这个新组中创建一个新图层,命名为画笔。按D键重置前景色为黑色,背景色为白色,然后用你创建的笔刷在这个层上绘制。

通过设置该图层的混合模式为柔光,并将不透明度降低到20%来混合纹理。

步骤40:创建并使用另一个笔刷

选择另一个水彩笔刷,打开笔刷面板,使用下图中的设置创建一个新的笔刷。创建一个新图层,用你创建的画笔绘制。设置此图层的混合模式为柔光,不透明度为15%。

步骤41:添加一个Grunge纹理

下载这个纹理极端难看的东西纹理包。在Photoshop中打开图片。然后转到图像>调整>通道混合器,勾选单色框,使用下图的设置将该纹理变成黑白。

从工具面板中选择移动工具(V)将图像移动到你的第一个文档中,然后将它放在textures组中。点击编辑>自由变换(Ctrl/Cmd + T),按住Shift键改变纹理的大小。命名此图层为texture,然后设置混合模式为柔光,不透明度为15%。

步骤42:场景上的颜色调整

现在我们将对整个图像进行一些颜色调整。新建一个图层组,命名为adjustment(调整)。添加一个新的色彩平衡调整层,使用如下所示的设置。

添加渐变贴图调整图层

在我们之前创建的色彩平衡调整层上面添加一个新的渐变贴图调整层。创建渐变,我使用的颜色:#393956和#eef3f4。一旦你完成了渐变贴图的设置,设置图层的混合模式为柔光,并将不透明度降低到30%。

创建另一个颜色平衡调整图层

在渐变贴图调整层的顶部添加一个新的色彩平衡调整层(其设置如下所示)。

创建一个照片滤镜调整图层

添加一个新的照片滤镜调整层使用下面的设置。

添加通道混频器调整层

添加一个新的通道混合器调整层,并使用如下所示的设置。设置该图层的不透明度为40%。

步骤47:应用高通滤波器

我们将使用一种技术来锐化我们的场景。在所有其他图层之上创建一个新图层。单击“Image > Apply Image”,单击“OK”。

右键单击该图层并选择转换为智能对象。在图层上运行滤镜>其他> High Pass,设置滤镜的半径为0.7px。

教程汇总

好了,我们结束了!在本教程中,我们介绍了大量的技术。我们做的一些事情是在Cinema 4D中构建3D元素,使用Illustrator中的矢量包,添加纹理,利用调整层来发挥我们的优势,等等!

最后,我还展示了一个使用高通滤镜增强整个构图清晰度的小技巧。创建这个场景对我来说绝对是一个有趣和享受的过程,我希望通过本教程,你也能体验到这种享受。请在评论中分享你的想法并提出问题!

下载源文件

WebFX职业

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

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