前言

之前给大家详细的剖析了PS的噪点插画教学，我发现很多设计师对噪点插画还是非常感兴趣的，不过在和大家沟通中发现了有些设计师做噪点插画时习惯用AI构图，然后再导入PS进行噪点添加，相对而言这种噪点插画的处理方式不仅繁琐而且太浪费时间。

其实AI也可以进行噪点的制作，虽然在处理方式上不及PS，但是在某些性能上其实还优于PS，总而言之它们都各有利弊。今天就出一期超详细的AI噪点插画教学，希望为大家解除疑问。（文章内有超多AI小技巧以及黑狮力自制噪点画笔，可免费下载）

本次教学减少文字的输入，加入了大量的动图方便大家理解，在看本文之前建议先看我之前发的PS噪点文章，会做对比讲解。

目录

一：PS噪点与AI噪点的五大对比

二：AI噪点插画的三大使用类别

三：AI噪点插画最佳使用方法

四：AI插画的复用方法

五：案例步骤详解

六：总结及素材分享

一：PS噪点与AI噪点的五大对比

1、画笔的使用对比

1-1画笔大小

在画笔大小的调整上PS与AI有非常明显的区别，PS调整画笔大小只需要按左右括弧就能够轻松的完成，并且大小的调整也非常细致。

在ai中画笔其实是没有大小的，画笔主要是通过路径和路径描边实现的，所以想要间接调整画笔大小那就可以调整描边。

对比分析：在调整画笔大小上AI的确没有PS方便，也不直观，操作比较繁琐，不过正因为AI里画笔是根据描边调整的，所以可以在绘制完后随意调整描边大小，也可以自由的调整描边的形态甚至重新更换噪点类型。

1-2画笔模式

不管是PS还是AI都可以调整画笔的模式，不过对于我们做噪点插画来讲最大的不同就是PS可以调整溶解模式，而AI却没有溶解模式的选项。（PS点击溶解模式后普通画笔会自动变为噪点画笔）

PS操作方式：选取画笔-点击上方画笔模式即可调整。（仅支持画之前选取，画后不能改变）

AI操作方式：打开透明度窗口-选择任意模式。（支持画前画后选取，可以随意改变，与图层共用）

1-3画笔不透明度

在PS中，画笔的透明度在不同模式下可以触发不同属性v，在溶解模式下透明度越低，画出的噪点就越少，反之则越多；在其他模式（除溶解模式的任何模式）下，只具备基本的透明属性。

在AI中，画笔仅仅只具备基本的透明属性。

2、智能噪点的对比

在PS中可以用的智能噪点途径非常多，例如“杂色”、“混合模式溶解”、“Camera RAW滤镜”（具体详情可查看我发布的PS噪点文章）。在AI中能用到的智能噪点有两种，一种是通过点状化实现的噪点，另外一种则是通过颗粒实现的噪点。

在图形的智能处理上PS的确更高一筹，不过AI也可以通过类似的方式达到相同的噪点处理目的。（文章后面会详细解析）

3、矢量化噪点处理

在PS中设计噪点插画并不是矢量的，所以我们一般在PS中设计噪点插画时都会把尺寸做到相对最大，以便于适应更多的场景应用。而AI不同，画笔的噪点大小可以随时改变，不会因为整个图形扩大而变得模糊不清，以至于AI的应用场景也更加广，灵活度也非常高。

4、软件处理流畅度

在做噪点插画中PS只有图层上千了才会出现慢慢卡顿的现象；而AI做噪点，如果绘制的噪点过大，那么每次都会出现卡顿的现象，或者噪点过50也会慢慢卡顿，这样就造成了AI并不适合噪点反复摩擦叠加使用。（主要还是看电脑的性能，性能如果真的很一般，那么不建议用AI做噪点插画）。

5、可复用性

是否可复用是我们设计师老生常谈的问题，在噪点插画中PS难以做到可复用性，而AI却大不一样，虽然没有像Sketch一样强大的组件替换功能，但是我们可以用AI中独有的符号工具实现一些简单的储存应用以及快速的颜色变化，对于我们做一些特定的插画有非常大的帮助。（后面会举例说明）

二、 AI噪点插画的三大使用类别

1、智能噪点

在用AI设计噪点插画时，会经常用到智能噪点，它一般用在最终整体画面的处理，当然也可以结合图层蒙版与形状做区域类的噪点。（案例中会提到）

1-1点状化实现的智能噪点

在AI点状化智能噪点中，我们可以实现两种效果，第一类为粗糙型噪点，第二类则为密集纸屑噪点。

粗糙型噪点操作路径：复制图层（ctrl+c，ctrl+f）-效果-像素化-点状化-选择柔光模式

在操作的过程中，我们要注意2点，第一在选择点状化单元格大小的时候，保持在3-8之间是最为合适；第二在做完所有操作后，如果觉得噪点过于粗糙可以加一些透明度。

最终效果：

密集纸屑噪点操作路径：复制图层（ctrl+c，ctrl+f）-效果-纹理-颗粒-选择变暗模式

最终效果：

1-2颗粒实现的智能噪点

颗粒实现的噪点效果与PS中的杂色实现效果相似。

操作路径：复制图层（ctrl+c，ctrl+f）-效果-纹理-颗粒-选择柔光模式

我们在选择颗粒参数时一定要选择点刻，其余参数可以视情况而定，在设置完后我们可以适当加一些透明度，不然会显得非常粗糙。

2、手动噪点

手动噪点就是使用画笔来进行手动绘制噪点，不过AI中的默认画笔并没有噪点画笔，不过别怕，我有！！！我这里给大家分享我经常用的7个圆形噪点画笔、3个尖形粗糙噪点画笔、3个碎点画笔（低中高密度）、1个辅助噪点的肌理画笔。（文章末尾有下载链接）

2-1圆形噪点画笔：

圆形细腻类型是指噪点的形成大部分都是根据圆或者椭圆构成的，这类噪点画笔是最常用的，也是最柔和的。

2-2尖形粗糙噪点画笔：

尖形粗糙类型是指噪点的形成大部分都是根据尖形形状或半尖形形状构成的，这类噪点画笔适合粗糙类噪点插画，它类似于PS的喷枪高密度噪点。

2-3碎点画笔：

碎点画笔在噪点插画中往往起到的是点缀作用，下面是我常用的3种碎点画笔，分别为低、中、高密度碎点画笔。

2-4肌理画笔：

在AI里面我很少用辅助噪点的肌理画笔，因为肌理画笔很多时候需要反复涂抹，如果画笔用多了在AI里用起来有点小卡顿，我常用的就一个简单的肌理画笔，在插画中我只会小范围使用。

3、自定义噪点

AI与PS一样，都可以进行自定义噪点，不过AI制作噪点的流程以及噪点的使用与PS有很大不同。

3-1自定义噪点画笔制作流程

操作路径1：画出基本噪点图形-选择画笔工具栏-点击右上角更多按钮-新建画笔-散点画笔-确定

操作路径2：当画笔添加完后，我们就可以选择此噪点，用画笔工具随意画出一条线，点击画笔选项进行画笔的预设，预设完后点击确认添加（注：建立画笔时也可以调整选项，不过没有预览，只有建立后才会有预览选项）

3-2自定义噪点画笔的制作技巧

在自定义画笔时我们需要注意的点非常之多，从绘制基础图形开始就要万分注意，我这里就针对于制作噪点画笔的注意事项来讲解。

3-2-1 如何绘制噪点基础图形

在绘制噪点的基础图形时我们需要注意三点：

1/中间大而密、两边小而疏（占面）

2/尖角多则更粗糙，圆角多则更柔和

3/以圆形区域为基础造型更有规律，以方形区域为基础造型则更不规则

3-2-2 如何设置选项

3-2-3 如何在别人的噪点上自定义

当你有基础噪点时，觉得对噪点的分布有些不满意，那么就可以去参数里面调整，并且不破坏原有的噪点分布。

操作路径：画笔工具栏-所选对象的选项-修改选项-完成

3-2-4 黑狮力噪点画笔预览（2大类别，可免费下载）

黑狮力规律圆形噪点（圆形区域造型）

黑狮力不规律圆形噪点（方形区域造型）

三、AI噪点插画的最佳使用方法

1、智能噪点

智能噪点的单独使用仅针对画面整体的处理。

2、剪切蒙版+噪点画笔

这一类使用方法与PS的噪点画笔使用方法类似，都是通过剪切蒙版进行噪点绘制，我们绘制完后可以很轻松的就能调整它的属性，只需要选中画笔描边就可以任意调整它的噪点类型、锚点、颜色、大小，如果后期想改变噪点风格，那么操作起来就十分简单。

操作如下：选择图形-点击内部绘图-选择画笔并填选描边颜色-绘制（文章前有介绍操作方法）

3、智能噪点+图层蒙版+形状渐变

利用AI任意形状渐变的优势来做噪点插画，需要AI CC 2019及以上版本才能使用，它的优势是能够非常柔和的处理颜色之间的过渡，缺点就是只能做一种噪点颜色，如果在同一图层想做多个噪点颜色，就需要重复再建立图层，那样就太麻烦了。如果你需要多个噪点颜色的绘制，那么建议使用方法2。

操作步骤1：复制所选图形-点击蒙版-在蒙版内部绘制全黑色图形-用任意形状渐变进行绘制（黑透白不透）-留取想要的区域

操作步骤2：效果-纹理-颗粒-选择属性-处理完成（特别注意：必须选中蒙版做噪点）

特别提醒：在AI中使用智能噪点时有个非常好的小技巧，可以通过效果-文档栅格效果设置来进行噪点的外观改动：

当分辨率越低噪点的数量就越少，随之就越粗糙，当分辨率越高噪点就越多，随之就越柔和，常用3种分辨率下的展示效果：

四、AI插画的复用方法

AI想要得到可复用性，那就得用到“符号工具”，“符号工具”虽然没有Sketch的symbols那么智能与强大，但是面对轻量化的替换还是绰绰有余的。

1、如何把图形存为符号？

如果是单个物体操作则比较简单，直接拖入符号工具即可形成符号，在做可重复性的单个物件时可以用到，例如我在做货架时，单个插画小物件是经常都要复用的，所以我就把它作为符号储存，后面需要使用时就非常方便：

如果是组件，那么就把组件的底层建立一个透明框，以便于制作替换元素不被错位，透明框需要稍微放大一些，因为有些元素的替换可能面积稍微偏大，这里给大家举例如何做人物的符号，如下：

2、如何使用符号？

2-1单个元素使用：直接从符号面板拖入即可。

2-2重复使用或不规则使用：使用符号喷枪工具。

2-2-1 我们可以使用符号喷枪工具迅速获得多个相同符号：

我们还可以设置符号喷枪工具的参数来快速达到想要的效果：

操作路径：右键符号工具-点击三角形更多按钮-双击符号工具进入弹窗调整属性

2-2-2 可以调整强度和密度来做出有趣的样式：

2-2-3 可以打开符号的旋转，让符号进行不规则的旋转：

2-2-4 可以打开符号的染色，快速让符号进行变色：

注：当然还可以进行更多的操作，这里就不一一举例了。

2-3组件元素使用：如果是要替换组件，那么我们就可以直接使用符号的替换功能。

虽然AI的替换并没有像Sketch那么强大，紧紧只有一个层级，不过它可以应用到任何元素上，包括噪点插画的组件，相对来说为AI噪点插画提供了一定的组件替换功能，在做轻量化的噪点插画还是非常实用的。

五、案例步骤技巧解析

步骤一：根据需求进行构图

在构图时我们可以用手绘也可以用鼠绘，噪点插画与常规插画构图并无大的区别。

技巧1-基础图形的加减法：可以运用布尔运算与形状生成器

例如我在做发型时，就用到了布尔运算与形状生成器，两者结合很快就能得到自己想要的图形。

技巧2-多余线条的去除：使用形状生成器（减去状态）

有些设计师习惯用手绘来构图，在构图完成后会有很多支出的线条，我们就可以用形状生成器的减去功能很快的把多余的线条给删掉。（选中形状生成器的状态下按住alt）

步骤二：对画面元素进行补充

因为此案例人物造型是按基础图形来绘制的，所以做步骤一时人物的造型基本完成，我们接着可以把货柜的元素全部填充上去。

步骤三：对画面元素进行上色

上色一绝：建议使用实时上色工具（K）。

步骤四：噪点绘制

噪点绘制阶段是噪点插画的核心，根据AI软件的特性，总结出了以下几点注意事项：

1、在同一元素上的噪点绘制尽量不要超过3条，最好一次性完成，否则当画面噪点堆积较多时会非常卡，文件也会随之增大。

2、想要绘制某个元素的细致柔和噪点，可以选择智能噪点+图层蒙版+形状渐变操作，过度非常自然，并且可以调整分辨率来改变噪点的数量。（数量越多颗粒越小，画面就越柔和）

3、在常规图形上绘制噪点时，可以使用描边填充来实现，这样画出来的噪点更规则。

4、当你对画出的噪点不满意时，可以选择调整它的锚点、描边大小、噪点类型。

5、在噪点绘制时，要保持使用的噪点风格一致，这样画出来的噪点插画整体才会更协调，当你想要改变噪点风格时可以选择替换成其他噪点画笔即可，换噪点风格这一点比PS好用的太多，如果换成PS就必须要全部重新画。（注：因案例特性，我用的噪点类型偏多，实际项目中请不要这样玩儿）

6、可以利用肌理噪点来作为底层纹理，当然为了更方便甚至可以用图片来作为底层纹理。

用肌理噪点做底层纹理：

用图片做底层纹理：

步骤五：符号应用

完成：

六、总结及素材分享

总结：

AI噪点插画与PS噪点插画的使用各有利弊，PS做噪点插画应用类型更广，可以适应不同风格的噪点插画，缺点也显而易见，不能制作矢量噪点以及无复用性；而AI则更适用于轻量化的噪点插画，可以制作矢量噪点并且可进行一定的复用性操作。

如果你是UI设计师或者网页设计师，想必然在公司内部更多的是设计一些轻量化的插画，并且经常会考虑到复用性问题，所以用AI来做噪点插画是一个不错的选择。

素材分享：

本期素材一共包含三个块：案例源文件、噪点画笔（24个）、AI噪点临摹素材（35+）

案例源文件：

噪点画笔：

常用噪点如下

黑狮力自制噪点如下

临摹素材部分展示：

资源打包下载  

为防止链接被和谐，大家可以搜索公众号『 黑狮力 』，在后台回复发送『 006』，获取最新的下载地址。

作者：黑狮力

本文由 @黑狮力 原创发布。未经许可，禁止转载。

Powered by Froala Editor