Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Hand Lettering
Design

如何在PS中创建一个手写的暖房海报

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Home Sweet Home.
How to Draw a House Step by Step
Best of the Design Web: April 2017

Chinese (Simplified) (中文(简体)) translation by Alfred Y. Zhu (you can also view the original English article)

Final product image
What You'll Be Creating

在此教程里,我们将要创作一个手绘字母海报,它会使我们的家居更舒适,让室内更有温暖的气氛。我们将使用Adobe Photoshop的各种绘图工具和功能,从头开始创建漂亮的字母,并将我们的笔迹数字化,将其从纸张转移到Photoshop并编辑它,使其适合我们的海报。

在本教程结束的时候,您将学会一些提示和技巧,将启发您创建更多的文字插图,就类似这些文字海报。如果您想知道当您的海报打印并放置在框架中是什么样子的,您可以尝试这些海报框架模型,看看它在现实生活中看起来如何。

让我们开始吧!

1. 如何使用钢笔工具创建一个字体

步骤1

所有的东西都是从头开始的。首先,我们需要有一个我们要创建什么的大致概念,由于我们是要准备创建一个暖房的海报,我已经决定来选择一个很好的金句来衬托舒适的氛围。我已经自己在纸上画了几个大概的缩略版的草稿,并写了“心在哪,家就在哪”,我还放大了“家”这个字。

在第一个草稿上,我尝试着添加金句到一个房子形状里面,但是在这个情况下,我觉得图片整体看起来总是有一点太紧而且画面充满了并不需要的细节而变得非常的繁忙,并且主体的成分——文字本身——看起来太单调了。除此之外,整体的造型并没有和“心”这个字产生互动,而它又是整段句子里面另一个不可或缺的元素,用来平衡“家”这个字。

想到这里,我创建了另外的一个大致的草稿(你可以看到,甚至变的更草了...),在这里我清楚的放大了那两个最重要的文字。 我同时添加了一点象形的细节,描绘了一个风格化的屋顶到文字“家“的顶部,并且防止了一个字”心“到一个心型的形状里面。现在,所有的东西都看起来更平衡而又富有意义了。让我们用第二个草稿为样例来创建一个海报吧!

thumbnail sketches

如果你希望使用和我一样的草稿作为你的参考图片,你可以鼠标右键点击下面的截图并且将它存储到你的电脑里。

home lettering sketch

步骤2

让我们创建一个3000 x 3000像素,300 ppi的新文档,并且将你的草稿放置在这里。

使用吸管工具(I)来从草稿上选择深蓝色的颜色并使用油漆桶工具(G)将其运用到背景图层上。

草稿不透明度调整到25%,让其变成一个半透明的状态这样它就不会太碍眼了。

place sketch into photoshop

步骤3

现在,让我们切换到钢笔工具(P)然后开始为文字”家“制作线描,使用多边形的线条来画出文字”H“的主干部分,闭合线条并开始画右边一个主干,右边的会稍微细一点。

use the pen tool to trace the letter

你可能会感觉使用钢笔工具的时候自己不太自信?别担心,你只需要更多的一些练习! 这个工具真的使用起来其实并不是像表面上看起来那样的可怕!来看看下面这几个轻松易懂的关于钢笔工具的教程!

步骤4

制作一个长方形的形状来形成连接两边的横杠,并且我们要合并我们所有的元素!使用直接选择工具(A)选择它们所有,并在控制面板的顶部找到路径操作菜单。 在这里,让我们选择菜单最下面的合并形状组件合并形状。这样我们就完成了!现在我们文字的所有部分就都被合并了!

 Combine Shapes in Path Operations

步骤5

让我们接着来描绘字母”O“,它看起来是由多个元素组成的,所以让我们从主体的部分开始。 尝试着在每次创建锚点的时候使用控制点制作一个平滑弯曲的线条,整体的制作一个椭圆形然后在里面画另外一个来形成”O“的内圈。

使用直接选择工具(A)然后选中两个椭圆,这次我们将使用路径操作菜单里面的排除重叠形状,点击合并形状组件来将内部的圆形减去。

Exclude Overlapping Shapes in the Path Operations menu

步骤6

我们可以将我们的文字填充一个颜色来检测我们的路径操作是否工作,让我们打开路径面板(窗口 > 路径)然后在面板的底部点击用前景色填充路径,这样就添加了前景色也就是现在我们的颜色面板里面设置的白色。

Fill path with foreground color in the Paths panel

步骤7

让我们撤销/后退一步(Control+Alt+Z)刚才我们的操作来移除填充的颜色并继续我们文字的设计。

使用钢笔工具(P)来制作字母”O"的手写体小尾巴,使用草稿为底来在上面描绘它,从"O"字母的左上角部分开始并且逐步的向右移动,创建一个香蕉形状的弧度。

add a swash to the letter

步骤8

记得你可以改变路径的方向而且并不需要松开鼠标键(或者你绘图板的笔)并且并不需要在工具之间切换, 简单的点击并拖动来让锚点的控制点变的可见,然后按住鼠标键,点击Alt键,旋转并向上移动锚点。现在再通过连接最开始的锚点闭合小尾巴的路径。

我们始终可以使用直接选择工具(A)来移动锚点,让线条变的更平滑。

add a swash to the letter 2

步骤9

让我们选择两个"O"字母的元素,然后使用合并形状命令,再点击合并形状组件来整合形状。

use the Combine Shapes and Merge Shape Components functions

步骤10

让我们继续使用钢笔工具(P)来画出字母"M"的多边形线条。

use the Pen Tool to draw out the letter M

步骤11

接着我们来到了字母"E";这个字母对比起前面的有点点的复杂,首先我们使用钢笔工具(P)开始创建一个类似我们前面字母"O"的椭圆形的形状。 使用直线条来完成字母尾部的形状,然后继续回到曲线来绘制"E"内侧的部分。

Continue to the letter E

步骤12

逐渐的向上移动,按住Alt键来改变控制点的方向来为字母"E"创建横梁位置的转角部分,以完成整个字母的剪影并闭合路径。

change the direction of the anchor handle to make a crossbar

步骤13

添加一个水滴的形状来为文字的中间(字母包裹的部分)做造型,现在我们选中两个元素并使用排除重叠形状(别忘了在选择我们想要的路径操作之后执行合并形状组件

我们可以使用在路径面板填充白颜色的方法来检测我们的字母。

Add a drop-like shape for counter of the letter

步骤14

现在我们来为文字中部交叉横梁处添加反向的小尾巴,使用钢笔工具(P)来制作曲线。

add a swash to the opposite side of the crossbar

步骤15

选中字母的两个部分并在路径操作里面合并形状,最后点击合并形状组件来应用效果。

Combine Shapes in the Path Operations

步骤16

不错!所有"家"文字的字母都已经准备好了,让我们来观察一下它们并使用路径面板的工具来填充文字。

现在让我们来为填充添加一些效果来使文字看起来更有趣且多变。

use the Paths panel to fill the letters

2. 如何添加阴影和渐变

步骤1

让我们使用渐变工具来为文字提供一些重量。使用渐变工具(G)(你可以发现它在和油漆桶工具一样的下拉菜单里)

首先,在图层面板里面对我们"家"的文字图层锁定透明像素,这样所有我们的操作都仅仅会作用到我们的字母上,而不是周围的区域。

现在看向颜色面板,设置蓝色为前景色,白色为背景色

然后切换到渐变工具(G),从下向上在文字"家"上拖动,应用一个垂直的从蓝色到白色的线性渐变。你可以在顶部的控制面板里面查看渐变的设定,选择你期望样式的渐变。

apply linear gradient

步骤2

让我们在文字的边上创建一个投影到背景上,这样能使文字"家"变的凸出一点,在"家"的图层下面创建一个新图层。 现在,保持新建的图层是选中的状态,按住Control键并点击"家"的图层,这样就可以在文字周围创建一个"行军蚁"选区。

颜色面板里设置前景色到深蓝色,切换到油漆桶工具(G)并点击画板来填充,创建一个深蓝色的文字的复制到新图层上。现在我们可以将底下的图层向右边和下边移动几个像素,来让深蓝色的阴影变的可见。

create a shadow from selection

步骤3

现在让我们来看看我们可以如何添加一些柔和的阴影到我们的文字上,来让它们看起来更立体。我们将要用到钢笔工具(P)或者自由钢笔工具来创建形状。 让我们放大(Control - +号键)到字母"E"上面并且画一个连接小尾巴和横梁的区域,正如下面截图所示。

继续来创建我们的路径,制作一个长方形的形状,它并不需要是非常完美的——只需要确保它比字母要宽一点就好了。

use the Pen Tool to connect the swash with the crossbar

步骤4

图层面板中选中"家"图层,按住Alt键,然后点击创建新图层按钮,在弹出的新图层窗口,勾选使用前一图层创建剪贴蒙版选项来创建一个链接的图层。 你会看到新建图层的边上会有一个小的箭头,这说明我们在其上绘制的图形会仅仅显示在其主图层对象的边界以内。

让我们来看看它是如何工作的,右键点击路径并建立选区,使用渐变工具来应用一个从蓝色到白色的斜对角线性渐变。

Make Selection and apply gradient

步骤5

切换链接图层的混合模式正片叠底,让白色部分的渐变变的透明,这样我们就创建了一个柔和的阴影,从字母"E"的主体横梁(以及其小尾巴)分离了中间的横梁。

添加一个相似的阴影到交叉横梁的顶部,这一次我们改变渐变的方向到相反的方向。

Switch the Blending Mode to Multiply

步骤6

使用同样的方式来添加阴影到字母"O"上来分离小尾巴和文字主体。

现在,整体的文字看起来就比较三维了,我们就完成啦!让我们接着下面的元素。

add the shadow to the letter O

3. 如何添加自定义形状并数码化你的文字

步骤1

我们接下来需要做的就是添加一个心形的形状。幸运的是,我们不需要手动的来画出它,我们可以使用自定义形状工具,使用我们的草稿作为参考来选择合适尺寸的心形

create a heart with custom shape tool

步骤2

切换到直接选择工具(A)然后移动锚点的控制点来使心形的底部更加膨大且圆滑,如果你看不到控制点,使用转换点工具点击并从锚点拖动出控制点。

在控制面板的顶部,我们可以在填充描边颜色间切换(或者两个都使用,又或者都不使用),从下拉菜单选择你期望的颜色。

我设置了填充颜色到,因为我需要看到我在背后画的心形内部的文字草稿。

reshape the heart

步骤3

让我们接下来开始文字"心”,对于这种手写风格的手绘文字,我其实更偏爱使用一个真实的笔刷和纸张。 如果你始终会尝试着使用手写字,这是一个好的开始,如果要渲其中一个最好的画笔用来作为开始,Tombow Fudenosuke是一个不错的选择,或者它可以是任何你选出的画笔。

你可以同时只是使用一个普通的中性笔或者甚至一支铅笔,创建一个叫做"假笔迹"的东西,将那些粗一些的笔划部分手动的填充颜色。在我们今天这个情况下,只要看起来好看,无所谓你如何来做出这个手写的效果,反正我们要使用Photoshop来做进一步的微调。

所以你只需要画一个文字到一张纸上,将文字放置到差不多是一个心形包裹感觉的区域里面,如果字母们并没有应对我们的心形,我们之后可以再微调它们每个字母的位置,所以也不用担心。但是还是要尝试着让它们看起来接近我们所拥有的草稿的造型。

扫面你的文字(或者拍张照片)并且将它拖动到Photoshop中。打开图片 > 调整 > 色阶(Control+L) 然后从这里开始我们需要升高整体的对比度和亮度,这样可以让文字黑色的地方变的很黑而且北京颜色变的更白,这样纸张的质感就会消失不见。

为了完成这个,拖动黑色的滑动条到右边然后反面的滑动条(白色)到左边,将它们放置到比较接近中间的滑动条的位置。在调整过程中你会看到两个滑动条位置变化所带来的效果,让图片变的锐利且干净即可。

digitise your lettering and use Levels

步骤4

一但你满意了整体的文字对比感觉,打开选择 > 色彩范围来打开选项窗口。在这里,你会有一个吸管工具默认的选中的,使用它来移动鼠标到"心"的位置然后点击黑色文字的任何地方。 保持颜色容差滑动条在40%,或者调整它到预览图中你觉得不是所有黑色区域都可见的时候位置。完成后点击确定,你就能看到虚线选区出现在文字周围。复制(Control+C)文字。

use Select Color Range to select black letters

步骤5

现在我们可以粘贴(Control+V)"心"的文字到我们的海报上然后按Control+T来用自由变换重新修改图层的尺寸和角度,使它贴合心的形状。

如果有一些文字并不贴合心形,使用套索工具(L)来选择文字(只需要在其周围画即可),然后再一次点击Control+T并旋转/缩放我们所单独选出的字母。

让我们使我们的文字变的可见且明亮,选择"心"的图层然后打开图像 > 调整 > 反相,改变文字的颜色从黑色到白色。

Paste and Invert the layer

步骤6

让我们来添加一些细节到文字的周围,使用画笔工具(B)然后要么打开画笔面板(窗口 > 画笔),要么按鼠标右键来打开画笔的列表来选择硬边圆画笔

如果在你的列表里你并没有看到这些,在右上角点击小的齿轮图标打开下拉菜单并找到大小可调的圆形画笔,点击它并选择要么替换或者追加该画笔到你的列表里。

open the brush panel or list of brushes

步骤7

你可以在控制面板的顶部找到画笔设定,我将不透明度流量都控制在100%,让线条锐利且较粗,我使用手绘板在文字"H"周围画了一个点以及一条线。

add minor details

步骤8

接着在其它文字周围添加描边和点,一但你完成并觉得结果是乐观的,选中心形图层,切换到自定义形状工具来让控制面板顶部的形状菜单变的可见,然后设置填充颜色为红色,用来填满心形的内部。

fill the heart with red color

步骤9

让我们给我们的"心"更多金色或者金属的质感,我们来添加一个简单的线性渐变,从黄色到白色。这样它看起来就更立体了。

apply gradient to the lettering

步骤10

下一步,我们将要画一个字"在",这个字总共使用了两次,所以你其实可以写两遍来使所有的元素都看起来唯一的而且更像是手写的,或者你也可以简单的复制一个你已经有的。

我使用了同样的硬圆边画笔,以我的草稿作为参考,使用我的手绘板绘制了一个小一点的字母"i"。你可以看到,我先画了上下两条横向的线,然后添加了两个垂直的线来作为字母的侧边,用来定义宽度。 最后,我使用了一个几乎是白色的淡蓝色,填充了文字内部。

然后,我使用了完全一样的技巧来绘制字母"S",我画出了它的剪影然后再为其填充内部颜色。

write with hard round brush

步骤11

这里我们可以看到到目前为止我们的海报是长什么样的了,我使用了复制的"在"图层(Control+J)来添加到心形的最下面。

use the copy of the is layer

步骤12

现在我们可以继续下一个元素了,我们将添加”哪"的文字到心形的正上方。(译者按:可能看到这里读者们会觉得语法以及文字都怪怪的,完全是因为在英文的语法和表达以及设计中,他们的文字顺序和中文都不同,如果想了解本设计的细节请各位参考英文原文,或者作者给出的截图示例来进行理解,不足之处请见谅!)

如果你有一个坚定的双手或者手绘板,你可以使用Adobe Photoshop的硬圆边画笔花体画笔来尝试不同的实验,最后创造出手写的效果设计。或者你可以跟随以下的类似我们制作"心"文字的步骤来进行操作。

所以让我们在纸上使用画笔写出”哪"的句子,然后将它带到Photoshop中使用色阶(Control+L)让它变得干净且具有高对比度。 下一步,使用选择 > 色彩范围来选择黑色的文字,复制(Control+C)然后粘贴(Control+V)到海报中,使用自由变换(Control+T)来旋转/缩放文字,使它们适合心形顶部的形状。

别忘了使用图片 > 调整 > 反相图层来让文字变成白色。

你可以从下面的截图中看到,我同时为心形的周边添加了类似"心"文字周围的红点以及线条作为装饰,它们能为整体的海报设计带来更多有趣且精细的设计感。所以让我们添加更多此类的细节吧。

scan and digitize your hand-lettering

步骤13

继续在心形周围添加那些细微的装饰元素,使用不透明度流量为100%硬圆边画笔

ad minor decorative details around the heart

步骤14

当我们完成了心形之后,让我们回到海报的顶部,我们需要画出一个样式化的屋顶来作为装饰性的样式。创建一个新图层,设置前景色为淡蓝色,然后调整笔画的尺寸,画出一个三角拐角的屋顶基本形状,然后再在其周围添加点和线来完善它。

我在屋顶的右侧添加了一个卷曲元素的装饰,这个描绘出了一个非常简单,甚至有点抽象的从壁炉的烟囱里面飘出来的烟。

下一步,我在”家“的文字下面又添加了一些线条,并且将它们弯折一下来对应屋顶的形状。

draw a stylized roof of our house

步骤15

让我们继续创建一个新图层来放置我们其他的装饰性元素,在这里,我使用了一个更加深的颜色并在"家"的文字周围添加弯曲的元素、线条、点等。 如果你觉得线条太暗了不太好操作,你可以使用图片 > 调整 > 反相该图层,然后在最后再反相回去到正常的效果。

create another set of decorative elements

步骤16

我们的暗色调的装设就这样完成啦!让我们继续吧!

dark ornaments are finished

步骤17

在心形的周围,我们将要添加一些更多的卷曲装饰以及线条,我们从图片的左边开始填充装饰,然后再移到另一边,创建相似的装饰性元素来使整体画面感保持一致。

在最后,我们需要在海报的底部添加一些淡蓝色的横向线条到"在"的文字两边来完成它。

Finish up by adding light-blue horizontal strokes

家,甜美的家!我们的暖房海报就这样完成啦!

干得漂亮,同志们!我希望本教程将会启发你创建更多手绘质感的有趣的海报来运用在你的室内设计或者印刷素材。请随意的使用本文提到的这些技巧和诀窍,还有别忘了跟我们分享你的成果哦!

享受设计!

Our Housewarming Poster is Ready
Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.