美狮美高梅-美狮美高梅官方网站

美高梅视点
美高梅曾经做过哪些事情?美高梅的发展怎样
字母人像插画组合视觉造型
发表时间:2019-07-26

美狮美高梅

【直营信誉】MGM,美狮美高梅官方网站最具公信力的博彩集团官网、更有高质料的游戏平台、打造在线博彩第一直营,美狮美高梅不单拥有环境上最多样化的游戏投注平台,再是为衣食父母供给实时、刺激、高信誉的效劳保证和高质料的游戏。

What is 组合视觉造型

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

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

 

所用的制作技巧:素材来源

虽然有了组合方式,吾们灰子 且运夭模ㄈ讼瘛⒆帜福┙凶急浮W帜缚梢院艽易于 侄玫玫剑讼竦幕竦弥饕辛礁隼丛矗

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

B、插画(自行绘制)

这两个Plan都各有利弊,照片能得到比较细腻的带有实感的人物皮肤纹理,但不易获取到源素材,而且来源有限。而插画则可以自由创作,只是在纹理上会更扁平化。吾们今天采取应用的是第二种方式,除了以获得素材为鹄的,也是想通过这一绘制过程帮众家更好把握人像的矢量绘制,拓展插画在平面策划中的用途。

 

所用工具

Photoshop(2018) + Illustrator(2019)

 

临摹人物照片

人物的照片是吾们最常用的素材来源,如果发现有构图和色彩都不错的素材,可以通过临摹绘制的方式将其转移为自己所需。

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


STEP 01

临摹人像起首就需要通过照片素材将人物拖入到 AI(Iillustrator) 当中,然下按照照片的提示来绘制。吾们可以参考原有照片的色彩、光影、人物特征等。在您所拖入的照片图层之上新建一个图层,照片图层可以进行锁定。



绘制整体轮廓

STEP 02

在布置细节之上,吾们要对人物整体的轮廓进行描摹。这时,照片作为一个非常要紧的提示线索,吾们要尽量将其作为参考。人物的皮肤作为边缘时,吾们要严格遵循它的边缘线轮廓,而人物的头发、衣服等部分则可以部分调整轮廓线。

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




边缘线不够平滑的区域要用【平滑工具】进行再次调整为平滑状态。这是由吾们的插画性状style所决定的。

STEP 03

接下吾们要绘制人物的头发的部分,这部分最要紧是要取得下方的轮廓线,上方的轮廓线已经和上一步所绘制的较小的轮廓线保持一致了。所如该方的形状绘制只需要超出较小的轮廓线,然下末了采取应用【形状生成器工具】,按住键盘上的ALT键就能删减掉外围多余的部分,并且生成头发的部分。


绘制细节轮廓

除了完整体的大轮廓,吾们来绘制细节的轮廓:眼睛、鼻子、嘴、脖子、耳朵、垂下的头发等。这是人像绘制中的精华部分。

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

STEP 04

在不揣摩光影的环境下,吾们起首绘制那些能直接表现面部特征的对象(眼、鼻、嘴)。这是一个非洲籍的女性,和吾们亚洲人的面部特征比较不同,易于 最好能参考照片来绘制。



STEP 05

还有两束头发比较细,这时可以采取应用加粗的线条(并不是制造轮廓线的方法,而是让线条本身来作为形状)来绘制,线条的样式(变量宽度配置文件)中决定第4个变量宽度配置,也就是针形的那个。



然下记得将这些线条扩展外观,使其成为填充的形状,这时描边是关闭状态。

到这一步,吾们就可以开始填色了,虽然还有很多的细节没有绘制,但是只要大形细目下,细节在填色状态下会更好的和整体形状保持融合。

 

填充大形

众家可以发现,这张人像的色彩莫过于非常easy,单就人物来说大面积的色彩就只有两个:头发和皮肤。而这时人物的皮肤和头发的颜色也比较接近

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

STEP 06

绘制一个矩形作为背下,将其填充为Blue(#153d5f),然下将人物的皮肤填充为略带Blue的褐色(#242b35),以及人物头发的颜色(#090d11),这是三个最主要的颜色。



完竣细节

STEP 07

剩下是人物面部的细节(眼、鼻、嘴),眼睛吾们沿用头发的颜色,鼻子莫过于只是下沿的阴影部分需要填色,而嘴的颜色吾们要找一个略带红,但仍然和其他颜色处于同一深度的色彩。还有人物的脖子的点缀物,需要安排为一个比较亮的米白色。




STEP 08

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



STEP 09

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




STEP 10

人物身体的其他部分的阴影也需要增加,采取应用更深一些的色彩就能描绘出不同的阴影造型。末了再修饰一下线条,人物的部分就绘制完成。





STEP 11

在使用上,您需要末了再调色,按照实际环境,将整体色彩调得再暗一些。



这时您需要从AI当中导出一张不含背下的透明背下的人像PNG图片,透明背下的PNG图片可以作为素材在任意场所使用。

 

策划思路

起首,您在使用素材上要清楚它的使用方向,譬喻在这里,我将要策划的是一个网站的 landing page ,也就是用户进入网站起首看到的画面。我打算采取应用同样性状style的三张图片作为滚动幻灯来找子 久朗栏呙贰T诰∈呋希夹枰宰钪粘晒懈龃笾碌募苹子 这般实际的环境是可以见招拆招。

 

安排合适的字母

要和字母组合,吾们起首应该选用适合的字母,对于ABCD……这样的字母外观要有一定的认识,看到字母本身背下的骨架造型,然下决定和人物有呼应的部分。譬喻这里我选用的是字母Z。

STEP 12

然下打开PS,新建一个1980*1080的新文档,这是一个大网页的尺寸。



STEP 13

在新建的文档上,运用文字工具写出一个Z,这时要决定一个比较有表现力的字体,在这里我使用的是「Nouvelle Vague Black」。字体大小为750,字体的颜色为吾们在AI绘制人物时使用的背下色,同款。



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

在插画准备的阶段,吾们所临摹的照片已经将色彩定了一个基调,特别是色彩的亮度上,大部分都选用了亮度较暗的色调。易于 这般众家不用担心看不出彩度,因为吾们末了会调整白色背下,将背下调暗以下,就不会出现这样的视觉上的小case了。

 

和插画融合

STEP 14

这时将您在 STEP 12 做好的人物PNG图片导入到文档里,安排在字母的图层之上。缩小到和字母差不多大小。这时按照外观特征,人物需要进行水平方向的对称的翻转,这时点击右键执行【水平翻转】,将两者的地位安排得恰到好处。



STEP 15

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



STEP 16

人物要和字母产生融合,还需要有一些部分暴露出来,就像噬想遮挡的成果。这时需要在蒙版上采取应用白色的硬边圆画笔(记取要选中蒙版),把您需要的部分「画」出来。



STEP 17

为了让字母变得更具有「实体」的成果,吾们可以给字体的图层增加图层样式【内阴影】。这是很多纸艺图案造型当中经常会使用的一个技巧。



STEP 18

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

然下利用【画笔工具】当中的【喷溅画笔>压力把握】,将画笔大小调到45,上景色设置为白色。


在新的图层上用画笔画出星星点点的白色斑点,有点像漫天繁星的造型。由于字母和人物都噬系色,易于 白色的斑点看起来就特别亮。


STEP 19

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



使用场景

在网页当中作为轮播的Banner使用,需要准备多张可切换的画面。为了性状style统一,这里我准备了三张同样性状style的画面。

性状style的统一最主要是体Now颜色上,这里的配色,众家可以看出三张图片的背下色都处于同样的暗度,采取应用大致同样的饱和度和明度。



其余两张图片的人物,我也是采取应用同样的画法,只噬涎原来照片中的人物的色彩进行了改动。

众家可以单击这里进入链接查看滚动的成果:https://qing.pagepan.com/demo/1017/



写在下面

摄影名作 一直是网页策划中主流的素材来源,可是我一直觉得找到好素材部分也依赖上游摄影师的创作能力,相对来说,自己创作插画会是一个更具有原创性的方向,避免版权纠纷的再是,也能带给人不一样的视觉感受。

把策划局限在某一个范围内,也许只是不愿走出 Confort Zone 的表现。对于插画这种素材的探索,吾们今下还会尽可能多的去找寻更好优质有趣的表现方式。



——美高梅分享,作者飞屋睿UIdesign



XML 地图 | Sitemap 地图