一路学文雅感原创UI插画界面

插画利用到UI、网页界面是一种新的趋向，而用什么气概范例的插画，以及插画和其他元素之间的关系则是需要设想师斟酌的事，更进一步来说，假如你学会了插画，实在自己便可以自在利用在任何场景了。

这篇文章中将带你一路从草图起头画出文雅感的UI界面插画，而且学会在这个进程中去体味外型、色彩的表示力，应用AI+PS组合技绘制插画又会有着意想不到的创意欣喜！起头吧~

学会画插画草图

草图很是重要，它是插画最初成形的一个蓝图试探。草图没有色彩，所以自己只是在一个纯线性的层面临外型的表示演示。

草图可以画在任何地方，用任何你习惯的方式：ipad、手绘板、纸笔。草图可以尽能够突出一个概念，找到一个表达的概念今后再肯定所要表示的工具——人物，并对人物的场景停止扩大，反复表达好概念并丰富场景。

画草图还需要明白一个就是你所要应用的场景的尺寸，比如用在网页上，那末这个配图的位置是在那里，和其他元素（笔墨、按钮这类）之间的位置关系。比如这里我将插画放在右侧，右侧是出血的设想（我们把这类插画可以称为半封锁式的结构）。这在构图上就要留意，草图阶段就应当明白插画的尺寸和利用方式。

STEP 01

我在这里用的是PS里的铅笔停止勾画，画出一个女生和四周的普通平常的气象（城乡连系部？）。实在插画很多时辰纷歧定需要场景何等奇异，最重要还是形色关系。

AI构建根本大形——人物

我们说画插画可以有两种方式，一种就是间接开画，想到哪就画到哪，不需要草图，这是针对那些天生在这方面出格有自在度且表达力也很强的人（想想儿童涂鸦，天生灵力！），另一种就是绝大大都像我们这类需要思考构造而且依照计分别步调停止的，草图就是后者最好的工具。

STEP 02

有了草图打底，在AI傍边塑形就很是轻易了。首要操纵的是AI的钢笔工具，辅之外形工具、锚点工具等就能轻松组合出任何想要的图案。这时让我们先画焦点人物。

翻开AI，新建一个1600*1600px的文档，色彩形式挑选CMYK。将草图拖入到AI中，然后新建一个图层（草图位于最上层），操纵钢笔工具，对照草图画出人物的头颈部分。先画人物侧脸，再画头发的部分以及颈部。虽然头部和颈部是同一个外形，但最好是分隔两个外形画出来。

色彩添补的色值参考以下图：

有色彩形式疑问的看下面：

这里需要说明一下为什么用CMYK，大师也许发现过偶然辰你用RGB形式在电脑上调好的色彩到了手机、平板上显现就出格“亮”，甚至会很刺眼。特别是那些高饱和度的色彩在移动真个屏幕上显色出格不自然。我用过最好的处理法子就是换成CMYK，CMYK和RGB相比色彩不会过分饱和，会温顺一些，即利用到最高饱和度的色彩也不会发出刺眼的亮色，而移动端屏幕稍微提亮一点色彩就会看起来很是舒适饱满，而与此同时电脑上也会是合适的。这样就平衡了电脑、移动真个屏幕显色差别题目。

STEP 03

起头画出人物的身材。这时大师可以观察一下草图，草图上我设想了很多布景的外形、有山、远景、楼房……这些外形会用到比力多色彩，所以这里人物的身材部分我就筹算用红色来中和这类风光中的多色彩表示。可是在这里我们的布景是红色，假如这时画红色就看不出，是以我们就需要先增加一个布景，这个布景不是肯定的色彩，只是用来突出红色的，画完布景的时辰也许便可以删掉的。

这一步需要留意的地方是人物身材的弧度和流线型。

STEP 04

然后再画出人物的手脚，先画手臂和手。手的画法会比力难，很多初学者也是会轻易疏忽手的表达，画的时辰很是笼统。所以我们在画上肢的时辰，就要把手臂和手掌分隔来画。

先画脱手臂，再画脱手掌。最初记得画出另一只手臂，比肤色的色彩更深，暗示两只手臂做出不异的行动。从侧面看两只手类似是堆叠在一路的。

STEP 05

最初画出人物的腿部，补充完人物手中握住的杯子。

AI构建根本大形——近景

人物画好今后，我们就来画人物四周比力近的景。

STEP 06

首先是离得比力近的动物，三片叶子比力大，可以用分歧的绿色。还有一些细碎的小叶片这可以留给更细节的部分去画。

STEP 07

然后再画出人物地点的桌子和椅子。桌子和椅子不需要画得太具体，可以笼统简化一点，重点突出人物和整体的空气。

这时所应用的色彩主如果绿色，绿色也是我们全部画面的主色彩。而肉粉作为辅色，同时也能起到冷暖搭配，相得益彰的感化。

STEP 08

最初画好桌子上的平板侧面，一个支架。还记得我们之前为了画红色衣服，所以给全部画面设备了一个浅色布景吗？这时便可以把这个布景的矩形停止改变，变成以下图的外形。

AI构建根本大形——远景

好，这下可以画远景了。画法仍然用钢笔工具，这里需要留意表面的流利感。

STEP 09

新建一个图层，这个图层作为远景放在人物近景的下方。画出三块分歧的动物，按照草图的提醒，外形很好控制，色彩的搭配留意奥妙的在绿色彩上的变化。

STEP 10

继续补充更多的景色，表现更丰富的条理感。

STEP 11

画出远景中的桥梁，桥梁的设想可以沿袭最简单的多少组装式画法，桥洞的画法可以用外形天生器减去响应的外形。步调以下：

将桥梁放置于插画中后的结果：

STEP 12

完成修建体的部分，画法仍然和画桥梁是一样用矩形停止简单的组装。这里的修建用的是红色，是以是一个很点睛的色彩，在全部配色系统中处于点睛之笔的职位。

STEP 13

继续画远处的大山外型，这部分的外型可以从棱角的外形起头画起，再转为圆弧。

AI中描细节

STEP 14

最初增加需要的细节，比如山上的三角作为树的一种简化的表征（在扁平插画中这类表征类的外形是很多的，首要就是不需要把每件物体都很是具体的表示出来），还有为远景增加叶片动物，这时远景是在另一个图层上，留意图层之间的切换。

好的，这一步为止，AI就完成它的使命了。按照草图固然我们有很多细节还没完成，但没关系，接下就由PS来接手。

也是从这一步起头，插画的难度就会提升，实在很多插画在AI这部分完成便可以拿去用了，平涂的方式看起来相对简洁，在很多极简气概的设想中，间接用这样的插画并不违和。可是假如要打磨更高品格的插画便可以继续进阶，那就看下去吧~

从AI搬场去PS

要从AI搬场去PS，需要的不但仅是复制粘贴，而是要学会分红份歧的部分停止复制粘贴。这也是为了方便我们在PS里的继续加工。

STEP 15

翻开PS，新建一个文档，这个文档巨细可以设备为2000*2000，色彩形式记得连结和AI里分歧。

这里需要将分歧图层的部分别离编组，编好组今后再别离复制曩昔，粘贴为智能工具。远景的两颗动物由于比力特别，所以再编一个组。那末终极到PS里会出现4个图层。这4个图层长这样。

PS手绘细节

STEP 16

这时用手绘板，操纵硬边沿压力巨细的画笔，在人物这个图层根本之上新建一个图层，操纵画笔自在的画出各类细节。这些细节的感化是为了增加画面的丰富感，是以你可以肆意展开设想，比如给人物增加耳饰、帽子、包包、增加桌面的物件等等……画的时辰只管在色彩上配合已有的色彩，外型上合适整体的气概。

然后可以把这个新建的图层和原有人物这个图层停止合并。

STEP 17

用一样的方式画远景的细节。手绘的方式画出的气概有一种随性的感受，虽然在AI中我们也能画小树木等等细节，可是表示的气概是有差此外，而且AI没有PS手绘这么间接。

STEP 18

给近景的动物也增加小圆点，圆点不要太多，否则就轻易鹊巢鸠占。

颗粒的饱满质感

接下我们为全部画面增加颗粒感，颗粒感的增加需要的是颗粒画笔。现在颗粒画笔的素材虽然多，但我感觉最好用的还是自己便宜的颗粒感画笔以及另一种subtle的颗粒质感画笔。

可以经过这个链接下载这两款画笔（其中一个是比力多颗粒画笔的调集，你也可以用其他的颗粒画笔，这个画笔集是我在网上买的画笔）。

颗粒感画笔.zip (6.3 MB, 下载次数: 898)

2021-4-9 15:05 上传

点击文件名下载附件

STEP 19

起头连系钢笔的利用，采用类似水彩画中“晕染”的手法停止描画。首先从人物这个图层起头，在这个图层之上新建一个图层，然后右键建立一个剪贴蒙版，颗粒的质感便可以增加在这个蒙版之上。

应用我便宜的颗粒感画笔轻易在细节上动手画出很是自然的颗粒的突变过渡，让细节的质感饱满。

从上图可以看到颗粒大致可以分为三种：

亮点颗粒：属于受光的部分，颗粒的色彩更亮 暗点颗粒：属于阴影的部分，颗粒的色彩更暗 增色颗粒：增加了其他复杂色彩的颗粒

画面的质感就从平涂转为了立体，更增加了画面的立体感和兴趣性。

STEP 20

用另一个颗粒画笔来画面积比力大的部分，比如女孩的红色衣裙，增加色彩更深的subtle颗粒，这个颗粒大面积涂抹会看起来比力轻盈，适适用在比力平淡的阴影上，阴影的外形也沿袭着裙子的表面。

STEP 21

为远景增加风趣的颗粒细节，这部分是很自在的。特别树的部分，可以多一点颗粒质感更轻易让视觉逗留。

STEP 22

最初为近景增加颗粒质感，动物大部分可以为增色颗粒，让动物看起来色彩更丰富。

描画光感

光感的增加可以用最根本的画笔就能实现。

STEP 22

应用PS里最根本的柔边圆画笔，将画笔的笔头调到最大，然后对这4个图层（人物、远景、远景、布景）别离停止涂抹上色，固然条件也是需要别离新建一个剪贴蒙邦畿层。涂抹的时辰画笔可以把流量开到20%左右，这样色彩就不会用力过猛。

终极结果

经过最初的调剂，插画终极结果以下。

利用在UI设想中时，我将它用在一个网页的配图中。

最初：慎用绿色

一路头，我们转达了文雅这个主题，文雅相对来说就不需要太高调，所以全部配色中只管挑选比力相对低调的色彩，而避免用高饱和度的色彩。特别是绿色，在很多插画进修者的进修进程中，绿色都是一个轻易出错的色彩，由于绿色带着黄色的刺眼光芒，是以越接近黄色的绿色，越是要留意在饱和度上不要过清楚显，否则就轻易带上黄色那种亮堂堂的光，而和我们的主题轻易错位。

蒙太奇手法，高

老实说，从专业角度来看，楼主的帖子根本不值一顶；但既然已经上当进来，把帖子点开，不顶，则意味着少积1分，失去早日升级的机会。 顶，还是不顶？我的思想进行着激烈的斗争。 顶，可以为自己增加可耻但宝贵的1分，但崇高的信仰与无暇的品格毁于一旦；不顶，高尚的风范得以保全，若干年后，还可以对孙子说: 很久以前，爷爷曾今有过一个机会……， 但毫无疑问永远成为论坛的落后分子。 我不断地踟蹰着，彷徨着，犹豫着。。。眼看从沙发降到了板凳，又从板凳降到了地板，再不顶，估计首页都不能保住了。。。 我一狠心，一咬牙，决定还是顶一个！

不吃饱哪有力气减肥啊。

你总不能被预设的困难打倒吧。

吾日三省吾身：早上吃什么？中午吃什么？晚上吃什么？

为天地立心，为生民立命，为往圣继绝学，为万世开太平。

足够优秀再大方拥有。

你要明白拥有也是失去的开始。

人有的时候真的是奇怪，选择了的会后悔，放弃了的会遗憾。但完美只能是一种理想，而不可能是一种存在。