学会这个教程，可以把任何一张人物照都变成插画风格

@飞屋睿UIdesign ：简单的10步教你把人物照片变成极简主义的插图！这种效果一直很受欢迎（我会说淘宝卖20元），但要实现它非常简单，今天的教程会一步一步地带你开始。

我曾经在《全面科普网页设计中的个性化插图风格》中简单地说过UI设计中的图片匹配问题。然而，这只是一个开始。如何使用不同风格的插图需要我们进一步“开发”。

每个艺术家的插图都有自己创造的节奏和风格，在接下来的一段时间里，我们将学习绘制不同风格的插图，并体验隐藏在图案外观下的难以形容的兴趣和技能。

学习时尚极简主义插图的目的是使用它，而极简主义插图是UI设计中非常合适和聪明的图片对象。特别是在与时尚相关的网页上，它可能是最不容易被忽视的亮点。

以照片为参考

当时我们是按照照片给定的轮廓画的，虽然细节有突破，但还是没有逃脱照片的约束。

在这个时候，我仍然想说，离照片更远一点！图片和照片实体之间应该是幻影关系，而不是一对一的简单复制。在绘画过程中添加我们自己的想象力，这将帮助你一步一步地接近绘画的本质。当然，这太远了，但目标是一步一步地回顾它。

符号轮廓：标准化基础形状

绘制的对象有符号化的趋势。就像图标一样，模糊所有个性化细节，使其符号化。当然，绘制的主题不是表达人物造型的细节，而是突出一定的氛围。让我们绘制的基本形状倾向于某种完美的公式。

STEP 01

让我们打开AI，创建一个宽1600px高1200px的新文档。

然后将参考照片放入其中，锁定照片层，然后新建图层作为绘制层。绘制时可使用钢笔工具，

STEP 02

关闭并填充钢笔工具绘制的形状，将线条设置为红色，将线条大小设置为0.5px。

在这里选择红色是为了照顾视觉的可辨性，你也可以选择与照片本身有很大区别的颜色。

根据照片提示的轮廓绘制并不需要完全模仿照片。就像在这种情况下，我们可能不需要完全模仿模型的发型。基本形状中的每个形状都应完全关闭，以满足颜色填充的需要。

STEP 03

画五官，尤其是眼睛的时候，要注意保持每个形状的封闭。这时候你要很清楚自己的填色逻辑，不要被线条误导。

面部特征保持最简单的形状，去除所有繁琐的细节，并保持视觉上的“合理性”。

STEP 04

处理角色的其余部分。这时，你可以发挥一点创造力。例如，我在这里增加了头发的长度和弧度。从那时起，我们就放弃了对照片的依赖。关闭照片，从线条的角度看整个图片。

STEP 05

调整线条，使其更加“丝滑”，并对形状进行合并和删除。

其目的是需要填充颜色，所以仔细选择合适的形状对象。保持“光滑”的前提是不要过度扭曲和角落，你需要放大细节来调整。

处理形的本质是学会趋向于简单几何。

简约配色

在这里，我们将学会控制颜色。在绘制肖像时，人物的面部特征将是突出的焦点。例如，我们想在这里突出嘴唇，所以嘴唇和皮肤的部分是在颜色上区分的。

此时，最好不要超过三种整体颜色。以色彩为视觉引导，在人物的重要部分使用不同的色彩对比。

STEP 06

为图片增加背景色，与唇色相呼应。让颜色看起来干净。基本色彩填充完成后，一般人物形象一目了然。在这里微调面部特征的细节将是一个进一步的“象征性”过程。

阴影的点睛作用

有趣的是，虽然我们丢弃了所有的阴影细节，但这并不意味着我们不需要它。使用阴影可以画龙点睛。例如，在这幅画中，我们在脖子上增加了头部的阴影，脖子和头部有视觉层次，增强了立体感。

STEP 07

我们选择与唇色相同的粉色作为阴影颜色。将阴影的混合模式改为“正片叠底”，透明度降至30%。

STEP 08

为眼睛增加阴影会增加眼睛的力量。“眼影”的混合模式仍然是“正片叠底”，透明度为60%。

STEP 09

为了增加面部的立体感，我们还应该使用阴影来“润色”。此时，阴影不仅是对光线投射的实际描述，而且具有一定的“装饰”意义。同时，它突出了面部轮廓，并利用线条在关键部位的柔和性来表达面部轮廓的起伏。

填色后的混合模式还没有“正片叠底”，透明度为15%。

制造焦点

我们还谈到了正负交错的用法。也就是说，背景和绘制对象主体的颜色可以相互融合。根据完形法，我们的眼睛可以从一些线索中判断对象。

STEP 10

将背景变成黑色，与黑色的头发和眉毛相连。将桃色背景缩小到一个较小的圆圈，以突出焦点。在焦点处添加焦点。

手段的目的是手段本身

说起来，这句话有点绕。换句话说，在当前“只有结果论英雄”的思维方式下，我们应该更加关注过程本身。很难不受结果的影响，但至少我们可以在享受过程的某个小时刻退出。

其实一开始是想讨论网页设计中插画的方向。设计师深有体会。有时候，为了找到一个好的素材，翻遍各大免费摄影网站可能不合适。疲惫不堪，加深了我们对DEADLINE的焦虑。所以，与其求助，不如求助。我想到了用插图自己设计材料。

这不是我自己突然的想法，而是我在看projectt。 runway(美国服装设计大赛，请自己百度或谷歌)获得灵感。在projectt中 runway中有一个竞争环节叫做非常规材料竞赛。具体来说，参赛者设计服装的材料不是普通的布料，而是垃圾堆或其他不寻常的废料，如塑料纸、灯泡、金属片、鸡毛等。此外，作品的选择标准不仅是使服装“美丽”，而且根据设计师在多大程度上改造原材料，将这些“废物”制成可穿戴材料，充分发挥服装的特点和美感。有些困难？然而，大多数设计师在这个环节会感到兴奋，只有在这个环节，他们才会觉得他们可以充分发挥自己的设计技能和想法。他们更喜欢“创造”“布”，而不是直接从布料中找到好的布料进行切割。

嗯，回到我们的用户界面设计，它实际上是相似的。当我们在图片的海洋中寻找高质量的资源时，就像找到一块好布一样，事实上，即时最终的作品非常优秀，部分是由于“运气”（找到漂亮布的运气），运气的中奖率往往不太高。更可靠的方法是创建自己的“布”，也就是说，他们自己的图片材料，这可以让你的设计技能脚踏实地，虽然你可能比别人慢，但不依赖运气，也就是说，享受过程将使道路越来越开放。

插图的风格多种多样，一个人可以形成自己的风格。在形成你自己的风格之前，你只需要再次了解每种风格。在轻风格的网页中，可用的插图风格属于扁平风格和线条风格，每个类别都有几个小方向。因此，我们将继续介绍这种风格的绘制方法，它们不仅可以作为图形，还可以作为图标或其他更多的UI组件风格。

或者回到我们的主题，插图本身就是一种手段，也是一种目的。假如你真的喜欢设计，就不能忽视绘画过程中的美感体验。

「用一个案例教你学东西系列」

智能对象“使用实用教程，让你学习智能对象”方形图，“使用后期教程，帮助你学习使用方形图破解图像的方法”层风格，“做一个实用的战斗教程，让你学习层风格9技能”设计过程，“使用实际的战斗案例，帮助你理解完整的设计过程”主任的思维方式，“使用一个简单的体重记录功能，揭示UI设计主任的思维过程”交互思维方式“使用一个文本框架，让你学习交互设计师的逻辑思维方法”交互面试问题，“使用一个框架，帮助你学习最常见的交互面试问题”数据验证交互，“使用实际的战斗案例，帮助你学习使用数据来验证产品设计”

原文地址：ifeiwu

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有190万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com