用3D文字设计一张复古明信片

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

预览

点击图片查看全尺寸

教程资源

  • 字体:Molot(字体松鼠)
  • 资料图片:字段4 (Stock .xchng)
  • 资料图片:Rhino 3 (Stock .xchng)
  • 资料图:冬季景观(Stock .xchng)
  • 资料图片:Fulmor湖(Stock .xchng)
  • 资料图片:城市花卉(Stock .xchng)
  • 资料图片:芽庄(Stock .xchng)
  • 资料图片:胡志明市(Stock .xchng)
  • 图片来源:Mary (Stock .xchng)
  • 字体:蜂蜜脚本(字体松鼠)
  • 纹理:纸张纹理(未签名设计)

第一步:寻找灵感

我们将开始得到一些实际的复古明信片的例子,有一个类似的主题,我们要做的,与3D文本作为我们的焦点。我去了谷歌图片并从新英格兰和佛罗里达的旧明信片中寻找灵感。如果你有自己最喜欢的度假地点,搜索一下。

以下是我的发现:找到灵感通过查看这些,我们可以找到想要从中提取的一些元素,以及始终一致的元素。我们将使用的一些东西是黑色笔画和白色笔画在它里面,3D文本,和“Greetings from”文本在左上角。

步骤2:设置文本

现在我们有了一些引用,我们可以在Illustrator中打开一个1200x655px的文档。这个尺寸相当于11x6英寸,这是明信片常见的尺寸之一。你可以去设计师工具箱找到更多尺寸的明信片。

使用文字工具(T)和Molot用字体在画板上写上“设计指导”。Molot是一种很好的粗体字体,也有一种复古的外观和感觉。找到灵感

步骤3:给文本添加一个弯曲

我们在研究中看到的一些明信片的文字是弯曲的,我喜欢这种风格,所以我们要稍微模仿一下。我们可以通过点击效果>弯曲>上升来使文本弯曲。将弯曲度改为12%。

找到灵感我们最终得到的文本看起来是波浪状的。找到灵感执行“对象>展开外观”。这将改变我们的文本为点和线形状,这将更容易为下一步工作。

步骤4:改变描边和填充颜色

我喜欢红色和黑色阴影的强烈对比,就像在麻萨诸塞州明信片,所以让我们把这个概念引入我们的设计。我们现在需要做的就是改变文本的描边为红色(#D22323),填充为白色(#FFFFFF)。我们将在接下来的步骤中完成这个外观。

找到灵感

步骤5:制作3D文本

要制作3D文本,点击效果> 3D >挤压和斜面。调整挤压和斜角选项,使文本具有类似于下图所示的角度,文本面向上方和左侧。设置挤压深度为80pt。

找到灵感找到灵感

步骤6:添加黑色描边

转到对象>展开外观,将我们的3D文本转换为向量点和线。选择3D文本,通过对象>取消分组。每个字母的周围应该有一个红色的笔画。

点击每一个,并改变他们的颜色填充为黑色。添加黑色描边

步骤7:添加一个黑色阴影

接下来,我们要开始添加阴影的黑色部分。根据你使用的字体,你可以在信的每一面都有一些额外的部分。添加黑色阴影首先,确保探路者面板是可见的;如果不是,转到窗口>寻路器。

我们想要使用选择工具(V)选择所有的碎片,然后,在探路者面板,单击添加到形状区域按钮。之后,改变填充颜色为黑色。每一面朝下都这样做。

现在可以忽略曲线形状。添加黑色阴影添加黑色阴影

步骤8:调整字母的曲率

现在我们可以手动调整一些字符的弯曲。我们要学习“D”、“R”和“S”的形状。首先,选择曲线形状,然后复制它通过编辑>复制(Ctrl/Cmd + C),然后编辑>粘贴在前面(Ctrl/Cmd +F)。

将复制对象的颜色更改为黑色。切换到钢笔工具(P),点击如下所示的锚点删除它们。删除锚点,直到你完成曲线的一半。

调整字母的曲率

步骤9:连接红色阴影

就像我们在第7步(使用黑色阴影)中所做的那样,我们想要选择彼此相邻的所有红色形状,并将它们与添加到形状区域命令。改变我们之前使用的红色(#D22323)的填充颜色。连接红色阴影

步骤10:添加白色描边

我们想要在文本内部创建一个白色描边,所以首先,我们要做的是通过按住Shift并单击每个字母来选择所有的字母面,并将它们添加到选区中。在选择所有这些后,将它们的填充颜色更改为白色。添加白色描边现在转到对象>路径>偏移量。

改变偏移量为-2px。将Offset命令创建的新形状的颜色更改为蓝色。

步骤11:将3D文本带入Photoshop

我们现在可以把文本带入Photoshop。首先,在Photoshop中创建一个1200x655px的新文档。通过从Illustrator中复制文本并粘贴到新的Photoshop文档中,将文本导入到Photoshop文档中。

调整文本的大小,使其适合画布。将3D文本带入Photoshop注意:通常,如果我们要创建一张用于打印的明信片,我们希望将文档设置为300 dpi,但在本教程中,出于文件大小的考虑,我们将其设置为72dpi。要阅读更多关于准备您的艺术品打印,请阅读我们的准备打印文件的指南

步骤12:去除蓝色部分

使用魔棒工具(W),公差为30,单击文本的蓝色部分。然后点击:图层>新建>图层,创建一个新图层,然后用油漆桶工具(G)为选区填充黑色。

当我们仍然有选择,去选择>修改>展开。将选区扩大2px。切换回原来的文本层,用白色填充选区。

这将摆脱蓝色,我们将使用带有黑色填充的图层作为稍后图像的蒙版。去除蓝色部分

步骤13:准备背景图像

现在我们可以开始添加一些照片了。让我们从明信片的背景开始。我们将使用Field 4的库存照片,因为它是一个简单的图像,不会从我们的前景(我们的3D文本)上分散很多注意力。

下载并在Photoshop中打开现场照片。接下来,我们要调整背景图像的颜色-通过点击图像>调整>曲线;调整曲线如下:背景图像准备现在我们想调整草的颜色,让它看起来更淡,这将很好地配合我们的复古主题。进入“图像>调整>替换颜色”。

按住Shift键,点击画布上的绿色区域,直到你选择了所有的东西。当您对颜色替换调整满意时,请按OK。背景图像准备是时候将处理过的现场照片带入我们的主Photoshop文档;把它作为文本后面的一个图层。

背景图像准备

步骤14:添加字母

让我们开始在3D字母中放置照片。我们将每两个字母配一张照片。让我们从Rhino 3的库存照片开始。

在Photoshop中打开它,然后把它带到我们的文档中。Ctrl-click/Cmd-click在黑色字母的图层(在步骤12中创建)上加载字母周围的选区。从工具面板中选择多边形套索工具(L),按住Alt/Option,然后在除前两个字母(" D "和" E ")外的所有字母周围创建一个形状。

这将删除除前两个字母以外的所有选择。在图层面板中,点击犀牛图层,点击图层>添加图层蒙版>显示全部。这将使犀牛的图像只显示在“D”和“E”字母中。

要更改图像的大小,单击图层和蒙版之间的链接图标,然后单击图层。这将允许你使用自由变换(Ctrl/Cmd + T)改变它的大小,并在蒙版内移动它。添加字母对其他字母重复同样的过程。

您可以使用上面教程参考资料部分中引用的库存图片,或者使用您喜欢的照片。添加字母

步骤15:在画布上添加边框

点击图层>新建>图层创建一个新图层。选择>全部(Ctrl/Cmd + A)加载画布周围的选区。点击编辑>描边,颜色为白色(#FFFFFF),宽度为20px,位置为内部

为画布添加边框

步骤16:添加问候文本

用水平文字工具(T)写出“Greetings From”(问候来自)蜂蜜脚本字体。将颜色改为黄色;你可以使用滴管工具(I)从其中一张照片中选取一种黄色。我们还将为问候文本添加一个粗体,黑色阴影。

在图层面板的活动图层中,选择“Greetings From”文本图层,点击图层>,图层样式>,投影,然后进行如下设置:添加问候语

步骤17:添加一些纹理

现在我们要引入这个纸张纹理,给我们的作品一个老化的外观。一旦你把它放在Photoshop文档中,改变它图层的混合模式为线性燃烧不透明度为50%。我们要把纹理调亮一点,所以转到图像>调整>曲线,并使用以下设置:引入一些纹理

步骤18:调整颜色

让我们进行一些颜色调整。切换到>图层,新建调整图层>色相/饱和度;使用下图所示的设置:调整颜色现在切换到>图层,新建>图层渐变贴图,设置如下:调整颜色

步骤19:创建一个微妙的小插图

选择矩形选框工具(M),在选项栏中,更改羽毛为60px。创建一个新层,然后拖动一个方框围绕整个画布。选择>反向,在新图层中填充反向选区的黑色,然后将图层的混合模式改为覆盖

创建一个微妙的小插图

步骤20:增加一些光线

最后,我们要在明信片的中间添加一点光。点击渐变工具(G),使用白色到0不透明度的径向渐变,用渐变工具在新图层中创建一个小圆。使用自由变换(Ctrl/Cmd + T),拉伸径向梯度到每一边。

之后,将混合模式更改为柔和的灯光增加一些光线

教程汇总

在本教程中,我们在Illustrator和Photoshop的帮助下创建了一张复古风格的明信片。我们从现有的明信片图像中收集灵感,使用Illustrator强大的矢量绘制功能(包括3D挤压和斜面效果),并在Photoshop中使用其方便的照片编辑功能完成了这幅作品。下面是最终结果的预览:

下载源文件

WebFX职业

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

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