V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pagepan
V2EX  ›  设计

PS 手绘秋日花草扁平风插画(创作过程详解)

  •  
  •   pagepan · 2021-12-15 10:21:09 +08:00 · 2464 次点击
    这是一个创建于 1079 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    植物,在插画创作中的作用太万能了,它就像是一个巨大的视觉素材库,连接抽象和具象的桥梁,介于自然和人文之间。利用植物环绕人物进行创作,已经形成了一款相对稳固的“视觉公式”。

    这篇文章我们就将通过这套人物和植物的创作演示,带领大家一起贯穿创作的逻辑,并在其中体会在将其运用到 UI 运营插图、文创素材时的灵活自由。

    在整个创作中,我们会利用手绘的方式去表现扁平插画,并且利用简约的光影关系表达这一风格逻辑。在细节刻画上,利用带颗粒质感的粉彩笔刷将能表现出更为丰富的色彩光感,让纯色平涂呈现出渐变效果。其中的难点是人物面部的刻画,因为涉及到人物五官比例以及细节表现的问题,在这里我尝试了用线条的方式去表现人物五官,尽量简化五官的复杂度,但同时也可以比其他的卡通式简略五官表现更为具象,让插画风格看起来更具有成熟和知性的感觉。

    image

    要准备什么

    软件:Photoshop 、手绘板、

    笔刷:kyle's 干介质-快乐 HB 、终极粉彩派对(皆为 2020 版本的 PS 自带默认笔刷)

    难度:进阶

    草图探索:源自照片又高于照片

    草图的探索过程是比较繁琐的,我们将在这一环节省略,直接呈现最后结果。原创的核心也是从这里开始,如果草图过程无法原创,可以直接临摹即可。

    STEP 01

    草图可以在纸上画出,或者直接用 PS 手绘也可。这里,我们可以去网上浏览一些摄影图,找找感觉。比如我在 pin 上看到这样一张照片,女孩的表情和拿着花朵的姿态非常有意境,这里就可以利用这张照片做一些元素延伸。注意,我们平时临摹照片,不要完全抄照片,而是学会从照片出发,看看还能加入或者删减一些什么样的元素,让你的插画内容变得更为丰富有趣。

    image

    STEP 02

    在这里,我们用植物来丰富画面,先画大一些的植物叶片,再加入较小的细节化的植物。植物一般放 3 种以上不同的形态,就会让画面开始变得丰富了。

    image

    色彩方案

    画好草图,我们就来开始规划一下配色方案。因为刚好写这篇文章的季节是秋天,秋天的色彩是相对比较浓郁和温暖的,表现这种感觉,暖色系是合适的,并且,为了突出植物的感觉,运用绿色作为对比,能把画面渲染得更活跃跳脱。绿色可以用整体色调偏蓝且饱和度和明度都较低的色彩,这种低调的绿色具备一定的质感和重量感,让画面会表现出一定的知性和成熟度。

    image

    基础形

    基础形是整个配色造型的关键一步,这一步体现整个画面对色彩的分配,在此基础上的一切色彩和造型都仰赖基础形的表现。

    STEP 03

    首先画人物,在此之前我们先设定好背景色,有了背景色的衬托,再用白色表现人物皮肤颜色。白色能和所有色彩进行搭配,所以白色也是百搭色。根据草图提示,使用快乐 HB 笔刷画出人物的头颈部分。

    image

    STEP 04

    再继续画出人物的身体部分,衣服的色彩运用比较暗的色彩,这样就能帮助烘托植物。画衣服的时候,先画出整体的形状,再在这个完成的形状内画出人物的手部。虽然上手臂和身体分属不同的部分,但在这里运用同样的颜色,看不出区隔,这需要接下运用光影去进一步表现。

    image

    STEP 05

    人物手中的花朵,可以画出主要的花冠和花枝。这里可以将人物图层和花朵的图层分开,方便我们日后对细节光影的单独打磨。

    花朵的基础形会更为细节化,将不同的红色运用到花朵上,就能让花瓣表现不同的层次。

    image

    STEP 06

    人物的基础形完成后,我们可以继续画出大片植物的基础形。先表现出最大的几片植物,这些植物的造型分两种形状,一种是较窄的梭形,还有一种是较宽大的鱼头形,边缘可以多一些起伏的细节。色彩主要运用暖色。

    image

    image

    基础大形完成后,我们可以从整体看看色彩的搭配效果,如果不合适的可以在这里进行调整。基础大形一般我采用单色平涂的方式处理,这样画有个好处就是调整色彩也相对容易。

    人物的五官细节

    现在开始进入难点,也就是人物的五官细节。每一种风格的人物五官画法都不一样,根据风格的视觉特征,我在这里选用一种相对简约但又能保持五官的具体性的方式,那就是用线去表达。

    STEP 07

    在人物的图层之上新建一个图层,在这里画出我们的五官。先画眉眼,再画鼻子和嘴唇。大家可以看到在这里我采用线条和点状简化了光影关系,但并没有让光影完全消失,这种做法让人物的面部比较突出且立体,但又不会脱离整体的简约风格。

    画眉眼的时候一定要注意线条的成熟度,也就是不要过分僵硬也不要过分扭曲,五官的情况就是失之毫厘差之千里,稍微一点点改变都会让人物变得很不一样,这也是五官要另起一个图层的原因,随时可以调整和改变,而不会影响到面部图层。直到看起来顺眼为止。

    image

    插播一下:在研究扁平插画五官表现的时候,我试过用小豆点表达眼睛,也试过整个五官空白去表现整体的形色抽象组合,但始终还是回到创作上,发现人物如果少了五官传递,始终在某些角度上,比如近距离时显得比较没有神韵。但扁平插画并不像漫画,漫画人物的眼睛都画得特别大,也特别复杂,和扁平的风格也并不搭配。而小豆点的眼睛看上去又显得有点幼稚,有时不一定能和这样的风格融合。最终,琢磨出来的表现方式较好的就是用一种相对克制的方式去表现具象的五官画法。

    我在人物的眼角给人物增加了一粒粉色的颗粒,我发现这样的效果很好,人物的眼神会有一种温暖的感觉,并且用线和点共同表现面部光影,用稍显夸张的厚嘴唇来突出人物的脸部,面部的神韵就出现了。这里大家可以自由发挥一下,试试运用更多更有趣的表现方法。每个插画创作者都可以自己探索出属于自己的人物表现方法,如果你已经有了习惯的表现方式,这里可以尝试和原有的方式做一些结合的尝试,所有方法都自己摸索出来,这是创作的精髓,也是其本质所在。

    image

    前景植物和云朵

    除了大片的叶片,接下我们可以画出前景的植物和花朵,这些植物对人物身体有所遮挡,会将人物包围起来,形成一种沉浸式的视觉效果。

    STEP 08

    先从画花朵开始,这里我会用红色来强调花朵,作为主色,能让画面显得更为热情绚丽。花朵表现得可以自由一些,形态可以不一致,画出花朵再画花的枝蔓。

    image

    STEP 09

    再在枝蔓上添加叶片,叶片的色彩运用绿色,这个绿会偏向蓝色一点,也和辅助色为同一个色调的变调。

    image

    STEP 10

    最后再补充一些简单的植物和云朵造型,植物的造型可以更为细碎一些,在整个画面中,植物从大到小,不同款式不同尺寸,就会让植物的氛围变得热闹。

    image

    光影细节

    我们在文章一开始说过,这幅画中的光影运用的是简化的方式,也就是运用线条来表现。

    STEP 11

    首先,我们还是从人物开始,要为头发增加光影前,先让头发表现得更松散更随意一些,画上一些飘逸的发丝是让人物显得更活灵活现的方法。然后再利用线条开始画出头发部分的高光和阴影线条。

    image

    STEP 12

    再来画出人物的身体光影,最重要的两个需要重点表现的部分是下巴和脖子的分界光影以及手臂和身体躯干的分界光影。

    在画光影线的时候注意两点:

    1 )高光线条未必是白色,只要是本色更亮的颜色皆可,比如这里在衣服部分的高光线,我运用了和衣服本色无关的金色来表现一种光明温暖的感觉。

    2 )所有的光影线都保持同一尺寸,除了手指部分可以稍小一些,因为会刻画得更为细节。不要忽大忽小。

    image

    STEP 13

    接下来,给人物补充一些装饰类的细节,这些细节能让人物更灵动和丰富。再为人物手持的花朵增加光影线条细节。

    image

    STEP 14

    最后为周围的植物选择性的给出一些光影线,用线不需要太多,注意线条对整体造型的作用。到这里为止,基础形和细节都完成了。

    image

    渐变颗粒光感效果

    进入我最喜欢的营造光感效果阶段,可以看做是这篇文章的另一个难点,但同时这一步也可以绝对自由发挥。这里我们要换为另一个画笔:终极粉彩派对,这个画笔能很灵活的表现颗粒感,运用手绘板的力度,可以让画笔表现不同的质感。

    STEP 15

    仍然是从主角的头发开始,一点点渲染出不同的颜色。在人物图层之上新建一个图层,将这个图层设置为人物图层的剪贴蒙版。开始用粉彩画笔进行渲染,色彩运用可以大胆一些,但也要维持住整体的色彩基调。下笔力度要轻柔,慢慢的多刷几次,也不要一笔下得太狠。

    首先刷上比本色更深一些的棕色。

    image

    再添加红色以及黄色,强化整体的暖色基调,最后增加蓝绿色。画颗粒时注意有些颗粒可以画出一定的造型,和头发的弯曲度保持一定的呼应。所有运用的颜色皆是画面中已有的色彩,或者进行微小的变调。

    image

    STEP 16

    为人物增加光影,这里人物的皮肤可以选用肉粉色来作为阴影用色,衣服的部分,除了本色之外也可以加入周围环境的色彩以及比本色稍亮和稍暗的两种用色。人物手持的花朵可以多一些色彩的复杂层次,并为花朵增加代表花蕊的圆点。

    image

    STEP 17

    为前景植物增加不同的颗粒色彩,这里我们可以大胆一些,将叶片描绘出撞色渐变,让画面多一些视觉趣味。

    image

    STEP 18

    画出背景植物的时候,色彩依然延续相同的法则,多用暖色,最后点染一些对比色蓝色。注意颗粒不是均匀铺上的,而是有轻重缓急,有造型,且有疏密之分,整体看上去会更生动。

    image

    STEP 19

    最后,我们为云朵增加一些渐变颗粒,在增加颗粒的色彩时,注意用色不要太饱和,考虑到和本色的融合以及整体配色的效果。

    image

    在画质感颗粒的色彩时,尽量选择较亮的色彩,这样会让画面看起来带有光感,这也是我们这组插画的特点。利用颗粒表现光感。

    STEP 20

    运用快乐 HB 画笔来最后画出几颗较大的漂浮的圆点颗粒,这些圆点具有装饰活跃画面的作用。到此,我们的作品就完成啦~

    image

    效果展示

    我通常会将插画运用到 UI 运营配图当中,比如 Banner 、网页 UI 配图等。

    image

    有兴趣也可以做一些文创的素材,比如我家里就做了自己作品的装饰挂画。

    image

    image

    其实,因为这组配色很符合秋天的感觉,我就创作了一个系列,为我们接下要做的网页模板配图。可谓是百搭百用,一画多得~

    image

    @飞屋睿

    6 条回复    2021-12-17 18:06:51 +08:00
    root01
        1
    root01  
       2021-12-15 14:02:57 +08:00
    请问一下,学手绘,需要 ps 基础嘛? 还是直接买手绘板
    qqdaiyu55
        2
    qqdaiyu55  
       2021-12-16 13:44:18 +08:00 via iPhone
    水平太高了,希望多发帖
    1596384882
        3
    1596384882  
       2021-12-16 19:56:41 +08:00
    我感觉我又会了
    pagepan
        4
    pagepan  
    OP
       2021-12-16 21:06:42 +08:00   ❤️ 1
    @root01 要有一点 PS 基础的,再学点美术手绘基础。
    hpeng
        5
    hpeng  
       2021-12-17 00:10:01 +08:00 via iPhone
    脑子:学会了。手:你没有。
    Thinkerous
        6
    Thinkerous  
       2021-12-17 18:06:51 +08:00
    感觉非常费时间啊,起码一天
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3142 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 14:26 · PVG 22:26 · LAX 06:26 · JFK 09:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.