五分钟教你绘制符合设计主题的插画banner

工作几年了都没有看看自己的主页，如今一看都是上学时候的小练习，特别稚嫩。三年前的练习对比现在工作中的作品，我感觉自己有了很大的进步。大学那会儿就会PS画位图，让我画个矢量插画跟要我命似的，如今只要给我一个需求，构思好了Sketch就能直接做，一上午时间就能给定稿😁特地发此文章帮助一些跟我当年一样懵懂的小伙伴，同时也记录了现阶段的设计功力。

UI插画设计得好，能在界面中起到烘托氛围、锦上添花的作用，一定要根据需求来设计，接下来为大家讲解一下具体步骤。

厘清项目背景

首先要弄明白项目需求，这个插画是为什么而设计，比如说我今天要举例的插画是基于我们公司的官网而设计的，用于产品页的头部大banner上。

那么项目需求就是“官网产品页的头部banner，风格没有限制“

情况是公司内部目前没有好看的图可用，素材网的图又不是很契合，要重新找，可是整个网页的进度很赶，没有时间浪费在找图上，根据我的界面风格来看，完全可以使用插画，所以选择了自己迅速画一个。

目标用户

调研员、调研团队、数据分析员

拟定插画主题

我们的产品是城市建设协助调研员进行协作调研的产品，主要功能有调研协作、数据分析、记录数据等。通过思维发散可以得出插画中可能体现的关键词：调研、专业、道路、数据、便捷

根据关键词制作情绪板

也就是找灵感图，收集与专业词相关的图片，包括人物动态、人物职业、相关场景等，随后根据这些图片颜色，结合色彩情绪、需求背景设计插画色板，风格要结合界面去做衍生，千万不要在网上随便搜一套配色就拿过来用，很容易就会跟设计的界面风格相悖，只有结合界面色调去制定插画配色和风格才能做到最大程度的和谐。

确定画面中存在的内容并画出草图

从关键词和情绪板中确定画面中人物一男一女的调研人员；根据产品相关业务加入可视化数据图表、问卷；根据产品的操作平台，要运用插画中的人物情景体现我们的产品具备PC端和移动端，同时也体现着我们产品可以便捷地协同进行调研工作。

确定好画面中的主要物体之后就可以用这些物体组合城草图了，如下图所示：

随后运用任意一款你顺手的绘图软件对草图进行细化，要包括大部分细节。我们可以围绕关键词去进行细化，比如为了体现数据，我们加入数据图标；为了体现专业，调研员佩戴眼镜，让人感觉就很有学问的样子；另外用三个圆圈里的图标体现产品核心的技术：数据云端储存与分析、数据下载、精准定位。最终产出草图如下

色彩草稿

根据产品调性和情绪板提取的颜色进行插画的颜色配给，这里的主色为科技蓝，并加以对比色进行点缀。用色控制在三种以内，保持风格的稳重和专业，同时又不失活力

绘制矢量图

使用我们熟练的工具进行绘制即可，我这里使用的是sketch，绘制期间可以在符合需求的前提下进行微调，丰富画面细节，提升纵深感。

目前插图雏形略显沉闷，我在色彩上进行了微调，让画面更有活力。

我们可以进行多种尝试，根据需要再加一些与主题相关的小装饰营造画面氛围，交代插画的故事背景，然后选择最适合的版本就好啦～

希望我的分享对你有帮助～