前言

之前給大家詳細的剖析了 PS 的噪點插畫教學，我發現很多設計師對噪點插畫還是非常感興趣的，不過在和大家溝通中發現了有些設計師做噪點插畫時習慣用 AI 構圖，然后再導入 PS 進行噪點添加，相對而言這種噪點插畫的處理方式不僅繁瑣而且太浪費時間。

其實 AI 也可以進行噪點的制作，雖然在處理方式上不及 PS，但是在某些性能上其實還優于 PS，總而言之它們都各有利弊。今天就出一期超詳細的 AI 噪點插畫教學，希望為大家解除疑問。（文章內有超多 AI 小技巧以及黑獅力自制噪點畫筆，可免費下載）

本次教學減少文字的輸入，加入了大量的動圖方便大家理解，建議先看 PS 噪點文章，會做對比講解。

如果沒有看過 PS 噪點的可以點擊進入查看：

目錄

• PS 噪點與 AI 噪點的五大對比
• AI 噪點插畫的三大使用類別
• AI 噪點插畫最佳使用方法
• AI 插畫的復用方法
• 案例步驟詳解
• 總結及素材分享

PS 噪點與 AI 噪點的五大對比

1. 畫筆的使用對比

畫筆大小

在畫筆大小的調整上 PS 與 AI 有非常明顯的區別，PS 調整畫筆大小只需要按左右括弧就能夠輕松的完成，并且大小的調整也非常細致。

在 ai 中畫筆其實是沒有大小的，畫筆主要是通過路徑和路徑描邊實現的，所以想要間接調整畫筆大小那就可以調整描邊。

對比分析：在調整畫筆大小上 AI 的確沒有 PS 方便，也不直觀，操作比較繁瑣，不過正因為 AI 里畫筆是根據描邊調整的，所以可以在繪制完后隨意調整描邊大小，也可以自由的調整描邊的形態甚至重新更換噪點類型。

畫筆模式

不管是 PS 還是 AI 都可以調整畫筆的模式，不過對于我們做噪點插畫來講最大的不同就是 PS 可以調整溶解模式，而 AI 卻沒有溶解模式的選項。（PS 點擊溶解模式后普通畫筆會自動變為噪點畫筆）

PS 操作方式：選取畫筆-點擊上方畫筆模式即可調整。（僅支持畫之前選取，畫后不能改變）

AI 操作方式：打開透明度窗口-選擇任意模式。（支持畫前畫后選取，可以隨意改變，與圖層共用）

畫筆不透明度

在 PS 中，畫筆的透明度在不同模式下可以觸發不同屬性，在溶解模式下透明度越低，畫出的噪點就越少，反之則越多；在其他模式（除溶解模式的任何模式）下，只具備基本的透明屬性。

在 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 設計噪點插畫時，會經常用到智能噪點，它一般用在最終整體畫面的處理，當然也可以結合圖層蒙版與形狀做區域類的噪點。（案例中會提到）

點狀化實現的智能噪點

在 AI 點狀化智能噪點中，我們可以實現兩種效果，第一類為粗糙型噪點，第二類則為密集紙屑噪點。

粗糙型噪點操作路徑：復制圖層（ctrl+c，ctrl+f）-效果-像素化-點狀化-選擇柔光模式

在操作的過程中，我們要注意 2 點，第一在選擇點狀化單元格大小的時候，保持在 3-8 之間是最為合適；第二在做完所有操作后，如果覺得噪點過于粗糙可以加一些透明度。

最終效果：

密集紙屑噪點操作路徑：復制圖層（ctrl+c，ctrl+f）-效果-紋理-顆粒-選擇變暗模式

最終效果：

顆粒實現的智能噪點

顆粒實現的噪點效果與 PS 中的雜色實現效果相似。操作路徑：復制圖層（ctrl+c，ctrl+f）-效果-紋理-顆粒-選擇柔光模式

我們在選擇顆粒參數時一定要選擇點刻，其余參數可以視情況而定，在設置完后我們可以適當加一些透明度，不然會顯得非常粗糙。

2. 手動噪點

手動噪點就是使用畫筆來進行手動繪制噪點，不過 AI 中的默認畫筆并沒有噪點畫筆，不過別怕，我有?。。∥疫@里給大家分享我經常用的 7 個圓形噪點畫筆、3 個尖形粗糙噪點畫筆、3 個碎點畫筆（低中高密度）、1 個輔助噪點的肌理畫筆。（文章開頭/末尾有下載鏈接）

圓形噪點畫筆：

圓形細膩類型是指噪點的形成大部分都是根據圓或者橢圓構成的，這類噪點畫筆是最常用的，也是最柔和的。

尖形粗糙噪點畫筆：

尖形粗糙類型是指噪點的形成大部分都是根據尖形形狀或半尖形形狀構成的，這類噪點畫筆適合粗糙類噪點插畫，它類似于 PS 的噴槍高密度噪點。

碎點畫筆：

碎點畫筆在噪點插畫中往往起到的是點綴作用，下面是我常用的 3 種碎點畫筆，分別為低、中、高密度碎點畫筆。

肌理畫筆：

在 AI 里面我很少用輔助噪點的肌理畫筆，因為肌理畫筆很多時候需要反復涂抹，如果畫筆用多了在 AI 里用起來有點小卡頓，我常用的就一個簡單的肌理畫筆，在插畫中我只會小范圍使用。

3. 自定義噪點

AI 與 PS 一樣，都可以進行自定義噪點，不過 AI 制作噪點的流程以及噪點的使用與 PS 有很大不同。

自定義噪點畫筆制作流程

操作路徑 1：畫出基本噪點圖形-選擇畫筆工具欄-點擊右上角更多按鈕-新建畫筆-散點畫筆-確定

操作路徑 2：當畫筆添加完后，我們就可以選擇此噪點，用畫筆工具隨意畫出一條線，點擊畫筆選項進行畫筆的預設，預設完后點擊確認添加（注：建立畫筆時也可以調整選項，不過沒有預覽，只有建立后才會有預覽選項）

自定義噪點畫筆的制作技巧

在自定義畫筆時我們需要注意的點非常之多，從繪制基礎圖形開始就要萬分注意，我這里就針對于制作噪點畫筆的注意事項來講解。

• 如何繪制噪點基礎圖形

在繪制噪點的基礎圖形時我們需要注意三點：

中間大而密、兩邊小而疏（占面）

尖角多則更粗糙，圓角多則更柔和

以圓形區域為基礎造型更有規律，以方形區域為基礎造型則更不規則。

• 如何設置選項

• 如何在別人的噪點上自定義

當你有基礎噪點時，覺得對噪點的分布有些不滿意，那么就可以去參數里面調整，并且不破壞原有的噪點分布。

操作路徑：畫筆工具欄-所選對象的選項-修改選項-完成

• 黑獅力噪點畫筆預覽（2 大類別，可免費下載）

黑獅力規律圓形噪點（圓形區域造型）

黑獅力不規律圓形噪點（方形區域造型）

AI 噪點插畫的最佳使用方法

1. 智能噪點

智能噪點的單獨使用僅針對畫面整體的處理。

2. 剪切蒙版+噪點畫筆

這一類使用方法與 PS 的噪點畫筆使用方法類似，都是通過剪切蒙版進行噪點繪制，我們繪制完后可以很輕松的就能調整它的屬性，只需要選中畫筆描邊就可以任意調整它的噪點類型、錨點、顏色、大小，如果后期想改變噪點風格，那么操作起來就十分簡單。

操作如下：選擇圖形-點擊內部繪圖-選擇畫筆并填選描邊顏色-繪制（文章前有介紹操作方法）

3. 智能噪點+圖層蒙版+形狀漸變

利用 AI 任意形狀漸變的優勢來做噪點插畫，需要 AI CC 2019 及以上版本才能使用，它的優勢是能夠非常柔和的處理顏色之間的過渡，缺點就是只能做一種噪點顏色，如果在同一圖層想做多個噪點顏色，就需要重復再建立圖層，那樣就太麻煩了。如果你需要多個噪點顏色的繪制，那么建議使用方法 2。

操作步驟 1：復制所選圖形-點擊蒙版-在蒙版內部繪制全黑色圖形-用任意形狀漸變進行繪制（黑透白不透）-留取想要的區域

操作步驟 2：效果-紋理-顆粒-選擇屬性-處理完成（特別注意：必須選中蒙版做噪點）

特別提醒：在 AI 中使用智能噪點時有個非常好的小技巧，可以通過效果-文檔柵格效果設置來進行噪點的外觀改動：

當分辨率越低噪點的數量就越少，隨之就越粗糙，當分辨率越高噪點就越多，隨之就越柔和，常用 3 種分辨率下的展示效果：

AI 插畫的復用方法

AI 想要得到可復用性，那就得用到“符號工具”，“符號工具”雖然沒有 Sketch 的 symbols 那么智能與強大，但是面對輕量化的替換還是綽綽有余的。

1. 如何把圖形存為符號？

如果是單個物體操作則比較簡單，直接拖入符號工具即可形成符號，在做可重復性的單個物件時可以用到，例如我在做貨架時，單個插畫小物件是經常都要復用的，所以我就把它作為符號儲存，后面需要使用時就非常方便：

如果是組件，那么就把組件的底層建立一個透明框，以便于制作替換元素不被錯位，透明框需要稍微放大一些，因為有些元素的替換可能面積稍微偏大，這里給大家舉例如何做人物的符號，如下：

2. 如何使用符號？

單個元素使用：直接從符號面板拖入即可。

重復使用或不規則使用：使用符號噴槍工具。

我們可以使用符號噴槍工具迅速獲得多個相同符號：

我們還可以設置符號噴槍工具的參數來快速達到想要的效果：

操作路徑：右鍵符號工具-點擊三角形更多按鈕-雙擊符號工具進入彈窗調整屬性

可以調整強度和密度來做出有趣的樣式：

可以打開符號的旋轉，讓符號進行不規則的旋轉：

可以打開符號的染色，快速讓符號進行變色：

注：當然還可以進行更多的操作，這里就不一一舉例了。

組件元素使用

如果是要替換組件，那么我們就可以直接使用符號的替換功能。

雖然 AI 的替換并沒有像 Sketch 那么強大，僅僅只有一個層級，不過它可以應用到任何元素上，包括噪點插畫的組件，相對來說為 AI 噪點插畫提供了一定的組件替換功能，在做輕量化的噪點插畫還是非常實用的。

案例步驟技巧解析

步驟一：根據需求進行構圖

在構圖時我們可以用手繪也可以用鼠繪，噪點插畫與常規插畫構圖并無大的區別。

技巧 1-基礎圖形的加減法：可以運用布爾運算與形狀生成器

例如我在做發型時，就用到了布爾運算與形狀生成器，兩者結合很快就能得到自己想要的圖形。

技巧 2-多余線條的去除：使用形狀生成器（減去狀態）

有些設計師習慣用手繪來構圖，在構圖完成后會有很多支出的線條，我們就可以用形狀生成器的減去功能很快的把多余的線條給刪掉。（選中形狀生成器的狀態下按住 alt）

步驟二：對畫面元素進行補充

因為此案例人物造型是按基礎圖形來繪制的，所以做步驟時人物的造型基本完成，我們接著可以把貨柜的元素全部填充上去。

步驟三：對畫面元素進行上色

上色一絕：建議使用實時上色工具（K）。

步驟四：噪點繪制

噪點繪制階段是噪點插畫的核心，根據 AI 軟件的特性，總結出了以下幾點注意事項：

在同一元素上的噪點繪制盡量不要超過 3 條，最好一次性完成，否則當畫面噪點堆積較多時會非?？?，文件也會隨之增大。

想要繪制某個元素的細致柔和噪點，可以選擇智能噪點+圖層蒙版+形狀漸變操作，過度非常自然，并且可以調整分辨率來改變噪點的數量。（數量越多顆粒越小，畫面就越柔和）

在常規圖形上繪制噪點時，可以使用描邊填充來實現，這樣畫出來的噪點更規則。

當你對畫出的噪點不滿意時，可以選擇調整它的錨點、描邊大小、噪點類型。

在噪點繪制時，要保持使用的噪點風格一致，這樣畫出來的噪點插畫整體才會更協調，當你想要改變噪點風格時可以選擇替換成其他噪點畫筆即可，換噪點風格這一點比 PS 好用的太多，如果換成 PS 就必須要全部重新畫。（注：因案例特性，我用的噪點類型偏多，實際項目中請不要這樣玩兒）

可以利用肌理噪點來作為底層紋理，當然為了更方便甚至可以用圖片來作為底層紋理。

用肌理噪點做底層紋理：

用圖片做底層紋理：

步驟五：符號應用

完成：

總結及素材分享

1. 總結：

AI 噪點插畫與 PS 噪點插畫的使用各有利弊，PS 做噪點插畫應用類型更廣，可以適應不同風格的噪點插畫，缺點也顯而易見，不能制作矢量噪點以及無復用性；而 AI 則更適用于輕量化的噪點插畫，可以制作矢量噪點并且可進行一定的復用性操作。

如果你是 UI 設計師或者網頁設計師，想必然在公司內部更多的是設計一些輕量化的插畫，并且經常會考慮到復用性問題，所以用 AI 來做噪點插畫是一個不錯的選擇。

2. 素材分享：

本期素材一共包含三個塊：案例源文件、噪點畫筆（24 個）、AI 噪點臨摹素材（35+）

3. 案例源文件：

4. 噪點畫筆：

常用噪點如下

黑獅力自制噪點如下

5. 臨摹素材部分展示：

 

歡迎關注作者微信公眾號：「黑獅力」