如何创建令人惊叹和大胆的3D文本

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

如何创建令人惊叹和大胆的3D文本

在本图形设计教程中,您将看到创建具有一些美丽的灯光和纹理效果的有吸引力的3D文本的方法。我们将使用Adobe Illustrator和Photoshop来帮助我们完成工作。

最终结果

下面,你可以看到我们将一起创建的最终产品。点击下面的图片可以看到全面的形象我们将要创造的东西。

最终结果

开始之前

我们需要一些免费的库存图片。下载以下图片。

在Illustrator中创建文本

1我们将开始创建我们的3D文本对象到一个新的Illustrator文档;通过选择文件>新建(Ctrl+N)创建一个新文档。用文字工具在画布上添加文字:DdSR”。

2接下来,突出显示文本“Dd”,并将颜色更改为# CC3333

突出显示文本“SR”,并将颜色更改为# 00 a0c6

在Illustrator中创建文本

添加3D挤压和斜角效果

3.现在我们已经有了3D文本,我们将应用一个3D效果。我们要创建一个物体,它将停留在一个平面上,所以我们要给它一些微妙的角度。首先,选择选择工具(V),并点击我们的文本选择它。

4然后,选择效果> 3D >挤压和斜面打开3D挤压和斜面对话框。使用下图所示的设置来创建所需的效果。

添加3D挤压和斜角效果

展开3D对象

5选择对象>展开外观,将我们的3D对象变成向量点和线,这样我们就可以把它带入我们的Photoshop文档中。

展开3D对象

准备3D对象转移到Photoshop

6为了做一点准备,我们将调整3D文本两侧的颜色。首先,我们需要弄清楚光从哪里来。对于我们的构图,我们将有两个光源分别来自“Dd”的左侧和“SR”的右侧。

首先,我们需要取消3D文本对象的分组,这样做的第一步是使用选择工具(V)选择我们的3D文本。

7接下来,选择对象>取消分组(Ctrl+Shift+G)开始取消3D文本向量的分组。多次这样做(使用键盘快捷键使这个过程更容易),以确保没有任何东西被分组。

调整3D文本对象块的颜色,使其看起来像下图,选择比3D文本表面更亮和更暗的颜色。

准备3D对象转移到Photoshop

8打开Photoshop并创建一个新文档(Ctrl+N)。文档的大小并不重要,因为你可以调整3D文本对象的大小。

在本教程中,我将创建一个文档,画布大小设置为1680 pxx1050 px

9使用选择工具(V)在Illustrator中选择3D文本对象的所有部分。在复制粘贴到Photoshop之前,完全选择3D文本对象并调整其大小。

一旦你得到你想要的大小,把所有东西都带入Photoshop。选择3D文本对象,选择编辑>复制(Ctrl+C),转到Photoshop,选择编辑>粘贴(Ctrl+V)。

准备3D对象转移到Photoshop

改变图层的色相/饱和度

10我们将使用这个3D文本对象作为模板,这样我们就知道所有内容的位置。为了使它更容易看到我们的模板和来自Illustrator的作品之间的差异,我们将改变图层的色调和亮度。为此,选择图像>调整>色相/饱和度(Ctrl+U)。

你选择什么颜色并不重要;只要确保这个模板和我们将要引入的部件之间有一个良好的对比。

改变图层的色相/饱和度

将3D文本块带入Photoshop

11现在,我们可以开始从Illustrator中一个接一个地引入作品。他们应该很适合,但有两个我必须调整;你可以使用自由变换工具(Ctrl+T)。

将3D文本块带入Photoshop

添加背景辉光

12我们现在要开始在“Dd”后面添加背景辉光。首先,在其他图层下面创建一个新图层。

13从工具面板选择渐变工具(G),然后在选项栏中设置渐变类型为径向梯度

前景色更改为# CC3333在页面中间做一个小渐变。调整渐变的大小,让它填充画布的左侧,你可以通过选择编辑>自由变换(Ctrl+T)来实现。我们这样做是为了在不切断它的情况下调整梯度,如果你第一次让它变大就会发生这种情况。

参考下图。

添加背景辉光

将库存纹理纳入设计

14让我们从Flickr (质地005 -人造油漆).调整纹理的大小,使其覆盖整个画布的左半部分。改变混合模式为覆盖

15为了增加一点红光,我们将复制红色渐变层。为此,将混合模式更改为正常的并将不透明度设置为30%.用移动工具(V)移动我们的新渐变,使它在Dd的后面。

将库存纹理纳入设计

16接下来,我们要做另一个径向梯度,就像我们在前一步,但这一次我们将使用白色(# FFFFFF)作为前景色。渐变会在画布的左边就像第一个红色的一样。

将库存纹理纳入设计

为“SR”文本重复前面的步骤

17现在我们要为“SR”文本重复步骤12-16。我们还将使用一个不同的纹理,你之前从纹理爱好者下载的第二个纹理(Brown Stained Concrete #7) -我们将使用蓝色而不是红色(# 0099 cc)为了发光。调整渐变图层的不透明度,直到你得到你喜欢的效果。

为“SR”文本重复前面的步骤

添加斜面和浮雕效果

18现在我们要添加一个斜面和浮雕效果到我们的3D文本对象。这有点棘手,因为我们有两个光源,如果我们尝试为第二个照明改变光源,它会自动改变两个。为了解决这个问题,我们首先要在“SR”面上添加一个斜角。

首先,选择“SR”面图层。然后,点击添加图层样式在图层面板底部的图标,然后选择斜面和浮雕.按照下图所示设置。

添加斜面和浮雕效果

合并两个图层

19我们现在要把我们刚刚添加斜面和浮雕图层样式的图像压平。要做到这一点,我们将创建一个新层,然后将新层与我们的“SR”面层链接。要链接图层,在图层面板中按住Ctrl并单击这两个图层,然后单击链路层在图层面板底部的图标(或右键单击所选图层,选择链路层在上下文菜单中)。

20.然后通过选择图层>合并图层(Ctrl+E)将链接的图层合并为一个图层。现在我们有了一个带斜面的“SR”平面层。

21让我们继续使用上面相同的技术在我们的“Dd”面上添加一个斜角,但这一次,使用斜角和浮雕图层样式设置如下图所示。

合并两个图层

添加一些阴影

22现在我们要在logo的两侧添加一些阴影。为此,我们想要单击每个边缘的图层,这将是一个阴影区域,并通过选择图像>调整>曲线(Ctrl+M)来调整每个曲线对话框。

23我们还想在字母“d”顶部的一半上添加一个阴影,因为光线会照射到其中的一部分。

单击“d”顶部的边缘层,使其成为活动层,然后按Ctrl +单击该层的缩略图,在边缘层周围创建一个选区。

24从工具面板选择渐变工具(G),设置渐变样式为a黑色到0%不透明度和线性渐变,在“选项”栏。点击并拖动一个渐变,这样你就会得到我在下图中看到的东西。

对“SR”文本重复此操作。

添加一些阴影

25为了获得logo背后的阴影,按住Ctrl键并单击所有SR文本的图层缩略图,在“SR”文本周围创建一个选区;继续点击并添加到选框中,直到“SR”被勾勒出来。新建一个图层,用黑色填充(# 000000).

26现在我们想给黑色标志一个模糊,让它看起来更像阴影,所以选择滤镜>模糊>高斯模糊,给它一个25个像素模糊。切换到移动工具(V),按住Shift键,用方向键向左移动它,大约2个空格。

添加一些阴影

调整阴影

27现在我们要对阴影做一点修补。有一些部分有阴影,不需要它,像“SR”标志的右侧。开始,通过点击添加图层蒙版到阴影层添加图层蒙版图层面板底部的图标。

28点击图层的蒙版部分。在工具面板中选择画笔工具(B)。使用黑色(# 000000)刷在用刷子直径100 px而且0%刷掉我们不想要的区域很困难。

查看下图,看看阴影应该是什么样的。

调整阴影

29还有一些区域我们想要添加一些阴影。为此,我们想要返回到阴影层,并使用我们的黑色笔刷100 px0%硬度,20%不透明度,绘制我们想要变暗的区域。

调整阴影

30.重复步骤25-29的“Dd”文本。

调整阴影

为文本添加一些纹理

31现在我们要添加一些纹理到我们的标志。首先,让我们复制我们用于左侧背景的纹理,并将图层移动到最顶部。

32Ctrl +点击所有“Dd”图层(正面和边缘),然后点击添加图层蒙版在图层面板的底部添加一个图层蒙版。

这将消除除“Dd”区域之外的所有内容。

为文本添加一些纹理

33现在,对“SR”文本重复前面的步骤。我唯一改变混合模式的地方覆盖柔和的灯光因为它的质地对我来说太刺眼了。

为文本添加一些纹理

为文本添加光照和阴影

34现在我们要添加一些灯光和阴影的标志面。首先,我们要给“Dd”添加一个阴影。Ctrl +点击“Dd”面层。

使用渐变工具(G)线性渐变渐变类型,点击并拖动在画布上创建一个渐变朝向光,直到你得到你喜欢的东西。重复“SR”文本面。

为文本添加光照和阴影

35我们将创建更多的渐变,类似于我们在前一步中所做的。

不过这一次,渐变将在蓝色文本上设置为红色,在红色文本上设置为蓝色,以获得来自相反方向的光的反射。首先,按Ctrl +单击“SR”层。

36使用一个线性渐变# CC3333作为前景色。

点击并拖动画布,创建一个渐变,在上面创建一个微妙的红色暗示。

37改变混合模式为强光

38重复此步骤,“Dd”文本和颜色为# 0099 cc

为文本添加光照和阴影

给文本加一些高光

39由于我们想要给人一种来自文档边缘的明亮光线的印象,我们将为每个标志添加高亮。首先,Ctrl +点击“SR”面部图层,在它周围创建一个选区。使用一个白色到0%不透明度线性渐变,点击并拖动渐变,直到你得到你喜欢的东西。改变混合模式为覆盖

重复“Dd”标志。

给文本加一些高光

一些最后的细节

40我们将在整个画布上添加一些样式来完成它,所以首先我们想要平展图像。要做到这一点,选择图层>压平图像。

一些最后的细节

41我们将模糊左下角和右上角,给图像一点维度。

要做到这一点,我们将点击快速蒙版。要开始,请单击在快速蒙版模式下编辑图标在工具面板的底部,就在前景色/背景色的下面。

42单击并拖动黑色反射梯度在画布的中间使用渐变工具(G)。

点击工具面板底部的标准模式图标,关闭快速蒙版模式;这将从我们刚刚创建的梯度中给出一个选定的区域。这应该已经选择了左下角和右上角,这取决于你的设置。如果它选择了中间区域,只需创建一个逆选区,选择>逆(Ctrl+Shift+I)。

43选择滤镜>模糊>高斯模糊,设置模糊值为2 px

一些最后的细节

44最后,你可以使用一些照片滤镜或其他调整图层来获得你想要的效果。您可以通过单击创建新的填充或调整层在图层面板底部的图标,然后选择照片过滤器(或任何其他调整层)。

一些最后的细节

这样就完成了!

如果你跟着我,你应该会看到如下图所示的东西。

最终结果

相关内容

WebFX职业

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

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