PS+AI字母人像插画组合视觉造型

  • 操作系统:
  • 适用软件:
  • 素材格式:
  • 素材大小:
  • 版权信息:©学习参考,请勿商用! (免责声明)
  • 使用帮助:遇到问题? (查看帮助)

What is 组合视觉造型

提到组合,这是平面设计中经常会用到的视觉技巧,一般来说是把表面不太相关的事物拼合在一起,维持视觉上的统一性。被用来组合的对象可以是植物、动物、人物也可以是字母、形状等。

形成混搭的前提条件G ~ g u是它们在视觉上有形成融合的「契机」,可能是相同的纹理、同一个方向脉络或者是结构相似。今天我们要融合的就是人物和字母,它们能融合在一起的契机g b ; o s在于字母的结构能「容纳」人物的侧影(如果是正面的人物则需要选择特定的姿态)。

所用的制作技} . P Z . G c C y巧:素材来源

虽然有了组合方式,我们还是要对素材(人像、字母)进行准备。字母可以很容易得到,3 a ? i人像的获得主要有两个来源:

A、照片(通过抠像的方式得到)

B、插画(自行绘制)

这两个方案都各有利弊,照片能得到比较细腻的带有实感的人物皮肤纹理,但不易获取到源素材,而且来源有限。而插画则可以自由创作,只是在纹理上会更扁平化。我们今天采用的是第二种方式4 ] ) @ D $ ~ Q n,除了以获得素材为目的,也是想通3 [ u t过这一绘制过程帮大家更好掌握人像的矢量绘G + . H E制,拓展插画在平面设计中的用途。

所用工具

Photoshop(2018+ ! - * J I / C) + Illustrator(2019)

临摹人物照片

人物的照片是我们最常用的素材来源,如果发现有构图和色彩都不/ , 5 D WQ \ m X A的素材,可以通过临@ e h摹绘制的方式将其转移为自己所需。

这是我在网上发现的一张不错的素材来源(来自 pinterest),这张素材的尺寸比较小。

PS+AI字母人像插画组合视觉造型

STEP 01

临摹人像首先就需要通过照片素材将人物拖入到 AI(Iillustrator) 当中,然后根据照片的提示来绘制。我们可以参考原有照片的色j 8 J m 2 G . h U彩、光影、人物特征等。在你所拖入的照片图层之上新建一% t k个图层,照片图层可以进行锁定。

PS+AI字母人像插画组合视觉造型

绘制整体轮廓

STEP 02

在布置细节之前,我们要对人物! j ]整体的轮廓进行描摹。这时,照片作为一个非常重要的提示线索,我们要尽量将其作为参考。人物的皮肤作为边缘时,我们要严格遵循它K 6 w U c S P (的边缘线轮廓,而人物的头发、衣服等部分则可以部分调整轮廓线。3 , 0 { -

可以使用【钢笔工具】,采用高亮色的描边来绘制,这是为了让我们能随时都能看到线条,和背景要有明显的区分。

PS+AI字母人像插画组合视觉造型

边缘线不够平滑的地方要用【平滑工具M [ } F H y _】进行再次调整为平滑状态。这是由我们的插画风格9 ` X v所决定的。

STEP 03

接下我们要绘制人物的头发的部分,这部分最重要是要取得下方的7 p z |轮廓线,上方的轮廓线已经和上一步所绘制的最大的轮廓线保持一致了。所以上方的形状绘制只需要超出最大的轮廓线,然后最后采用【形状生成器工具】,按住键盘上D + k a的ALT键就能删减掉外围多余的部分,并且生成头发的部分。

PS+AI字母人像插画组合视觉造型

绘制细节轮廓

除了完整# L u 4 | E . D -体的大轮廓,我们来绘制细节的轮廓:眼睛、鼻子、嘴、脖子、耳朵、垂下的头发等。这是人像绘制中的精华部分。

这时原有的照片能提供的信息特别丰富,对于我们上面谈到的视觉重点都有大量的小细节,但是我们在绘制的时候不能全部都临摹出来,这时我们要学会取舍,找到最能凸出m G A h 3 n l人物特点的部分,而省略其他的细节。

STEP 04

在不考虑光影的情况下,我们首先绘制那些能直接表现面部特征的对象(眼、鼻、嘴)。这是一个非洲籍的女性,和我们亚洲h N \ y B人的面部特征比较不同,因Q 1 R z此最好能参考照片来绘制。

PS+AI字母人像插画组合视觉造型

STEP 05

还有两束头发% ! f比较细,这时可以采用加粗的线条(并不是制造轮廓线的方法,而是让线条本身来作为形状)来绘制,线条的样式(变量宽度配置文件)中选择第4个变量宽度j & A p A ^ ; S配置,也就是针形的那个。

PS+AI字母人像插画组合视觉造型

t w . _ [ )后记\ [ : j J J \ D a得将这些线条扩展外观,使其成为填充的形状,这时描边是n 2 I O F ; \ ~关闭状态。

到这一I r 1 ? L p步,我们就可以开始填色了,虽然还有很多的细节没有绘制,但是只要大形确定后,细节在填色状态下会更好的和整体形状保持融合。

填充大形

大家可以发现,这张人像的色彩其实非常简单,单就人物来说大面积的色彩就只有两个:头发和皮肤。而这时人物的皮肤和头h S y 4发的颜色也比较i a 2 i f接近

原片的背景也有色彩,我们可以填充背景的色彩,和原有照片的色调保持一致。

STEP 06

绘制一个N + 3 y矩形作为背景,将其填充为蓝色(#153d5f),然后将人物的皮肤填充为略带蓝色的褐色(#242b35),以及人物头s D M a ` 1 }发的颜色(#090d11),这是三个最主要的颜色。

PS+AI字母人像插画组合视觉造型

完善细节

STEP 07

剩下是人物面部的细节(眼、鼻、嘴),眼睛我们沿用头发的颜色,鼻子其实只是下沿的阴影部分需要/ 9 ~ + S i s填色,而嘴的颜色我们要找一个略带红,但仍然和其他A 5 T颜色处于同一深度的色彩。还有人物的脖子的装饰物,需要n Y C R a安排为一个比u H I : D较亮的米白色。

PS+AI字母人像插画组合视觉造型

STEP 08

我们继续修饰人物的五官细部,增加唇部和眼部的阴影。

PS+AI字母人像插画组合视觉造型

STEP 09

再给人物增加耳朵的形状,耳朵的绘制主要以阴影来表现。我们找出两块最能表现耳廓造` b o v ^ - Z 5型的形状来作为绘制对象,并且为人物配上耳钉。

PS+AI字母人像插画组合视觉造型

STEP 10

人物身体的其他部分的阴影也需要增加,采用更深一些的色彩就能描绘出不同的阴影造型。最后j J z再修饰一下线条,F ~ q r a T a ^ d人物的部分就绘制I R a完成。

PS+AI字母人像插画组合视觉造型

STEP 11

在使用前,你需要最后再调色,根据实际情况,将整体色彩调得再暗一些。

PS+AI字母人像插画组合视觉造型

这时你需要从AI当中导出一张不含背景的透明背景的人像PNG图片,透明背景的PNG图片可以作为素材在任意场所使用。u n [ U l ( G l

设计思路

首先,你在使用素材前要清楚它的使用方向,比如在这里,我将要设计的是一个网站的 landing page ,也就是用户进入网站首先看到的画面。我打算采用相同风格的三张- & G k 9 0 X # W图片作为滚动幻灯来展示首页。在任何设计前,都需要对最终效果有p n v v 7 9 f ^个大致的规划,当然实际的情况是可以见招拆招。

安排合适的字母

要和字母组合,我们首先应该选用适合的字母,对于ABCDa : K……这样的字母外观要有一定的认识,B ! d = /看到字母本身背后的骨架造型,然后选择和人物有呼应的部分。比如这里我选用的是字母Z。

STEP 12

然后打开PS,新建一个1980*1080的X 6 P 1 a C L新文档,这是一个大网页的尺寸。

PS+AI字母人像插画组合视觉造型

STEP 13

在新建的文档上,运用文字工具写出一个Z,这时q Y \ N %要选择a q g ] 2 4 _ d d一个比较有表现力的字体,在这里我使用的是「Nouvelle Vague Black」。字体大小为750,字体的颜色为我们在AI绘制@ e !人物时使d V $ Z用的背景色,同款。

PS+AI字母人像插画组合视觉造型

在白色背景上它显得特别黑,比较看不出色彩的彩度。

在插画准备[ 9 i 2 R k v x 5的阶段,我们所临摹的照片已经将色彩定了一& Y D , D l U e p个基调,特别3 @ c L r , ? l是色彩的亮度上,大部分都选用了亮度较暗的色调。当然大家不用担心看不出彩度,因为我们最后会调整白色背景,将背景调暗以后,就E G p不会出现这样的视觉上w M % L % z Y的问题了。

和插画融合

STEP 14

这时d I 7将你在 STEP 12 做好的人物Pb J n Q : UNG图片导入到文档里,安排在字母的图层之上。缩小到和字母差不多大小。这时根据外观特征,人物需要进行水平方向的对称的翻转,这时点击右键执行【水平翻转】,将两者的位置安排得恰到好处。

PS+AI字母人像插画组合视觉造型

STEP 15

调出Z这个字母的选区,然后单击图层面部下方的x q | 4 \【添加图层蒙版】的小图标,给人物的这个图层增加蒙版。由于保持了Z字母的外轮廓选区,因此这个图层蒙版自带选区就将字母轮廓外的部分的人像遮挡了,看起来它们之间呈现下图,像是人物「住进」了字母里。

PS+AI字母人像插画组合视觉造型

STEP 16

人物要和字母产生融合,还需要有一些部分暴露出来,就像是半遮挡的效果。这时需要在蒙版上采用白色的硬边圆画笔(c . w ) K记住要选中蒙版),把你需要的部分「画」出来。

PS+AI字母人像插画组合视觉造型

STEP 17

为了让字母变得更具有「实体」的效果,我们可以给字体的图层增加图层样式【内阴影】。这是很B = 2 1 K } e I 3多纸艺图案造型当中经常会使用的0 h L ^ m P ^ n *一个技巧。

PS+AI字母人像插画组合视觉造型

STEP 18

在字母图案的上方增加一个新的图层,在新图层上单击鼠标右键,选择【创建剪贴蒙版】。

然后利用【画笔工具】当中的【喷溅画笔>压力控制】s t & o,将画笔大小调到45,前景色设置为白色O G z J m p . b

PS+AI字母人像插画组合视觉造型

在新的图层上用画笔画出星星点点! Z P n的白色斑点,有点像漫天繁星的造型。由于字母和人物都是暗色,因此白色的斑点看起来就特别亮。

PS+AI字母人像插画组合视觉造型

STEP 19

最后把整个画面的背景色调整为#7d7777,改为一个较暗的颜色,然后在图形的下方增加一行白色文字。下图就是最后的效果:

PS+AI字母人像插画组合视觉造型

使用场景% { / i R

在网页当中作为轮播的Banner使用,需要准备多张可切换的画面f A ^ 5 ^ $ c。为了风格统一,这里我准备了三张相同风格的画面。

风格的统一最主要是体现在颜色上,这里的配色,大家可以0 t H w I看出三张图片的背景色都处于同样的暗度,采用大致相同的饱和度和明度。

PS+AI字母人像插画组合视觉造型

另外两张图片的人物,我也是采用同样的画法,只是把原来照片中的人物的色彩进行了改变。b \ a k 5 (

大家可以单击这里进入链接查看滚动的效果:https://qing.pagepan.com/dem4 o ( [ U 7 ! {o/1017/

PS+AI字母人像插画组合视觉造型

VIA: ifeiwu

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请联系站长处理!

2.如果您喜欢我们,可开通终身会员,享受全站资源免费下载!

3.本站所有内容只做学习和交流使用。 版权归原作者所有。

0 条回复 A文章作者 M管理员
表情包
  • AC01
  • AC02
  • AC03
    暂无讨论,说说你的看法吧
购物车
优惠劵
搜索