2

轻松上手,描边插画海报速成法

 2 years ago
source link: http://www.ui.cn/detail/605585.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

近几年来,描边插画成为流行趋势。那么如何在工作中轻松上手描边插画?接下来我将分享一些经验。

3911214.png

前言

在各大平台的运营活动、品牌宣传、UI界面中涌现出很多优秀的描边插画作品。以下我将分享在工作中如何轻松上手描边插画

3911215.png

目录

一、作品赏析
二、4大步骤

       2.构图草稿

       4.刻画主体
三、举一反三
四、总结

一、作品赏析

3911225.png

设计师MBE,他整体的设计非常简洁可爱、易上手

3911226.png设计师Rami Niemi擅长线性人物插画的设计,他的设计简约有趣、幽默顽皮感

3911290.png

(图片来自网络,如侵请告知删除)

从出现到现在,描边插画经历了不断的演变。针对画面,设计师们对插画进行优化升级,沉淀出一些具有代表性的风格。观察分析以上优秀的描边插画,我们可以提炼出一些共性:

3911313.png

二、4大步骤3911347.png

1.灵感

前期准备:从接到需求开始,一步步拆解分析、找到关键词、记录设计灵感、运用合适的手法,我们可以用2W1H思维模型-根据主文案《招募骑士》分析,提炼出关键词:骑士、金币奖励、福利

3911358.png

1.1联想

从关键词“骑士、金币奖励、福利”进行联想,描绘一个故事情节,增加画面生动性。讲好故事,利于品牌的传播,所以一个运营活动也可以有属于他的故事,让画面注入灵魂,更具说服力。

3911360.png

1.2照片素材

找一些高质量的图或者照片,从中借鉴构图、动态、光影,也可运用公司已有的图片资源。最好不要凭空想象人物的比例、动态,徒然增加设计难度。

3911361.png

 (迪士尼动画师角色创作)

根据联想好的故事情节及关键词展开搜索,选照片的时候可以根据马斯洛需求理论,尽量挑选活力、健康、阳光的形象来满足骑士的尊重需求。

3911363.png

货物箱的灵感、右手臂的灵感、整体形象的灵感

2、构图和草稿

 简单勾勒草图,确定画面主体。提前做好构思,可以节约软件操作的时间。画好草图后可与需求方尽早确定视觉主画面,进一步提升效率。

3911367.png

2.1.构图方式

这里介绍6种常用的设计构图:曲线、中心、三角形、斜线、三分、向心式构图,建议选用更合适的方式构图。

3911368.png

3911369.png

3911370.png

(图片来自网络,如侵请告知删除)

在《招募骑士》的海报设计中,我运用了中心构图:主体骑士放在中心线的位置,起到突出主体的作用,氛围元素分散在周围,丰富画面,同时让画面更具冲击力。

3911371.png

2.2.初步草图

根据找好的素材进行融合设计,注意构图、比例、动态的体现,最后再次调整。

3911374.gif

根据活动需求对整个画面进行排版设计,增加标题、内容文案、Logo等信息,注意区分主次,明确景深关系

3911377.png

3.构型

画好草图后,接下来一般会在PS/AI中进行构型上色。

 3.1.描边

对照草图,在新的图层用矢量工具勾一遍物体的形状,勾线描边的颜色默认黑色。建议前期草图画得较精细,这样在描边时对照勾线就行。如果前期草图比较潦草,勾线的同时需参考照片再次仔细优化造型。

3911384.png

3.2.色彩

配色的技巧原理:从摄影照片中提取物体的固有色,找到协调的配色方案。饱和度高的颜色能表现强烈的色彩感,更容易传达冲击力和吸引力,所以整体的配色可以在吸取的固有色上提高一些饱和度。

3911392.png

一般我们会依次按照主体物、辅助物体、氛围元素、背景的顺序上色,也可按物体面积的大小依次上色。

3911394.png

场景色可根据画面需求进行调整。为协调画面,场景色一般使用与主体物主色调相近的色系,并相应降低饱和度,亦或使用主体物主色调的对比色系做场景色来突出主体。整体颜色搭配好后,继续调整排版设计。

3911396.png

讲到上色,这里简要的说下我的配色技巧。详细查看我之前的教程《3步打造扁平插画》

配色小技巧

1.用色感性一点,构图造型理性一点
2.平时多欣赏好的油画、摄影、服装、自然美景,从中提取好的配色与构图
3.多欣赏好的电影、动画片、游戏作品

3911406.png 

A. 同色系、类似色、临近色是我经常使用的配色,这样配出来的颜色会比较统一。要注意的就是整体降低纯度用颜色明度来拉开空间关系。

3911407.png

B. 对比色的配色技巧就是大统一、小对比。在大的暖色调或者冷色调确定之后,来一点冷色或者暖色作为互补,避免暖色系的颜色过于火,冷色过于冷淡。在暖色调中,处理冷色的方法就是降低冷色的纯度,使其更协调,反之亦然。

3911409.png

《Weather story》

C. 中性色的配色技巧就是注意整个颜色的融合,对比度。

4.刻画主体

刻画方法:添加暗部、添加亮部、修饰描边、画面调整、局部刻画

4.1明暗刻画3911413.png

添加暗部3911417.png添加亮部

4.2轮廓

调整外轮廓的描边颜色及粗细,可以用黑色作为描边,也可将物体固有色明度加深作为描边,具体方案可根据画面的效果来选择。

3911430.png

画面调整:画面的排版,氛围元素的调整、标题的调整刻画,注意整个画面保持统一的刻画程度。

3911458.png

4.3局部刻画

头部、手臂、衣服、箱子依次进行刻画:增加高光、环境色、投影等。为了凸显骑士主体,可在描边外整体再次增加一层白色轮廓描边。

3911460.png

《骑士招募》的描边插画海报完成。

3911464.png

三、举一反三

整体梳理下操作方法,同样的配方用在了618系列设计中。

1:灵感(联想+照片素材)

根据活动主题联想好画面场景,搜索合适的照片素材。

3911467.png

(左边图片来自网络,如侵请告知删除)

2:构图和草稿(构图方式+初步草图)

运用构图技巧做好照片素材的构图,画出草图原型。

3911473.png

3:构型(描边+色彩)

将画面做好描边,再一步步铺大色,也就是先大面积上固有色。

3911474.png

3911475.png

4:刻画主体(明暗部+轮廓+局部刻画)

从明暗部开始塑造,再增加轮廓描边,最后刻画重点局部。

3911476.png

四、总结

这种运用照片找到主体及构图的方法,能够非常高效的解决设计中灵感匮乏、主体物不够吸引、透视等一些问题。运用好照片素材,轻松上手插画设计。这种方法不仅适用于描边插画,其他扁平插画、复古插画、潮流插画等均可适用。

3911477.png

以上观点均是个人技能心得,欢迎补充交流。希望这次分享对大家有些帮助,不要局限于某个当下流行的教程,放开自己的脑洞去创作吧。

希望大家能在这篇教程中受益,最后祝大家乘风破浪、扬帆起航!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK