简单易学-场景插画

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
979 0 2 2021-08-30
不管是在banner,icon等UI设计还是H5等营销活动中,相较于照片图片,插画的可控性更强,更加定制化,不仅容易发挥创意,而且能够精准的表达情感,拉近与用户的距离。所以从内容到细节,使用插画都能在一定程度上超过现有的图片。
近期看了Ethank的一些视频,梳理总结了场景插画的绘制步骤,记笔记的同时也希望能通过输出来达到理解巩固的作用。


步骤1、调研需求:调研风格,调研颜色

通过平时图库的积累和潮流风格的研究确定插画设计风格,如肌理、扁平等。根据内容及品牌特色确定色彩基调。以下为整理的几种插画风格类型(图侵删)

步骤2、提炼关键词:去形容词,确定主副词

Case:文案“一手资讯,权威发布”,设计场景插画。

1、去掉形容词,留下名称和动词,理解关键词。即“资讯”“发布”

2、关键词挂钩人物形象。想象人物场景。

3、关键词衍生。“指引”“消息框”“点赞”等

4、主副元素区分。主体“指引”辅助元素“消息框”“点赞”等。


步骤3、寻找参考:双图库思维,即形状参考图库和绘画参考图库

形状参考图库指的是具体的照片等现实图库,用于主体结构的参考;

绘画参考图库指绘画等图库,用于参考造型的优化,形状的简化和细节,如头发手指如何绘制。

步骤4、确定画面

1.绘制草图,构图的设计思考。

各个元素按照设计的位置、大小排列在画面中,就能形成一张画最基础的模样。那么最基本的构图有如下这么几种

2.钢笔绘制场景轮廓

场景轮廓可以根据内容进行调整,将图象抽象成几种形状的合成,适当减少复杂的细节,通过布尔运算或钢笔调整形状。


步骤5.上色:三种颜色上色(三角构图上色:对角线+邻近色)

人类的视觉感知系统,对于颜色是第一位的,其次是形状。

插图的颜色往往能决定观者的第一印象。对于配色,我们需要注意两点:

1、颜色的配比

决定画面整体色调的颜色,一般占画面60%以上,余下有30%的辅助色,10%的点缀色。画面中可以出现多余三个颜色,但是三个纬度的颜色需要尽量在色相上保持接近。

2、颜色的对比

颜色三要素是:色相、明度、纯度。相应的对比也分为色相的对比,明度的对比,纯度的对比,当然更多时候是混用的。对比的作用有很多,较强的对比可以使得你的画面更富层次感和视觉冲击力,较弱的对比则营造一种柔和自然的感受。


Tips:其中最简单快速的方式是可以在平时存储的图库中,选取现有插画配色,直接使用在画面上,但要注意合理性。


4.质感、噪点添加:

确定明暗交界线,确定高光暗部灰部投影和反光(可以简化为只表现亮部暗部和投影)。

可以通过噪点、渐变、纹理等表现出不同的明暗关系,提升画面的层次感和细节。

可默认选取右上角为光源处,确认明暗关系,在暗部做噪点设计,越暗噪点越密集,注意过渡

以下为自己一些插画的设计

小巴游杭州:https://www.ui.cn/detail/386924.html?nopop=1

小巴游台州:https://www.ui.cn/detail/470840.html?nopop=1

小巴游宁波https://www.ui.cn/detail/425733.html?nopop=1


Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票