MBE风格小插画来自照片的灵感!

先来一张成品展示…

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

再看看照片和成品的对比…

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

1.整体构思 

因为是画一个独立的小插画,主体物的动态又很好,所以准备画以圆为基本轮廓,主体物部分在圆里,部分在圆外,使画面整体更有层次。

 

2.确定画面元素,有取有舍

页面除了主体物,我留了一只飞鸟和一个轮船,其他全都舍弃了。留下船是因为需要有物体来表达这是一个海平面,留下一只飞鸟是为了丰富天空,如果天上只有云就少了一份“海阔凭鱼跃,天高任鸟飞”的自由~(太能扯了)

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

3.勾轮廓

细化的部分用5px的描边,主体物用10px的描边,最外层的圆用了20px描边,为的是让画面更有层次感。需要注意的是,我们这个插画是平视,照片的海面稍微有些俯视,我们要根据自己定的海平面,来画大致物体的方位和走向,注意部分细节的勾画,细节要有,但不要多,这里我选择细化鲸鱼嘴下的纹路。

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

4.背景

如果把海和天整个放在圆里,觉得整个画面不够丰富,所以把背景的右侧拉出来,长到可以包含主体物。与背景同理绘制出两片云。

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

5.上色

a.海和天根据明暗关系做成渐变色,其他元素做成单色(因为其他元素后面要加阴影和高光,这里再加渐变就不合适了)

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

b.画阴影

整体的光是从上向下的,所以鲸鱼的腹部和鱼鳍的下方需要加阴影,小山的阴影,模拟一些棱角、起伏即可。

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

c.打高光

高光打成白色有些夸张,但是却可以提升整体的亮度与质感。

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

6.断线

在适当的地方做断开处理,使画面更有呼吸感。

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

7.完成

MBE风格小插画来自照片的灵感! - US - UI设计素材库

 

8.总结

绘制的过程中肯定会遇到这样那样的问题,但千万不要因此放弃,因为画完成品后的成就感,是超级美妙的~

297