AI腳本制作超強內陰影效果

 　　很長一段時間，我對 Adobe Illustrator 最不滿意的一點，就是 AI 中沒有內陰影效果，只能使用內發光效果大致模擬。不過內發光效果不能設置效果的偏移量，因此用起來有局限性。不過，最近，在網上找到了一種方法，能在 AI 中快速方便地創建內陰影效果：

　　首先，新建一個文檔，用圓角矩形工具，或者矩形工具+圓角效果，畫出這樣的圖形：

　　然後，執行菜單命令「效果」-›「SVG 濾鏡」-›「應用 SVG 濾鏡」命令，在彈出的對話框中，新建一個 SVG 濾鏡：

　　然後，把下面的代碼復制、粘貼替換掉文本框裡的內容，點擊確定：

　　最後，點「確定」應用效果，內陰影效果就出來了，帶有(5，5)方向的偏移：

　　如果發現圖形帶有鋸齒，類似這樣：

　　那麼，執行命令「效果」-›「文檔柵格效果設置」，勾選「消除鋸齒」，即可以了。

　　Done. 如果希望調整內陰影的偏移，調整 dx, dy 的值即可。改變內陰影的顏色和透明度，可以通過調整

　　標簽裡的 flood-color 和 flood-opacity 屬性來做到。這個方法應該是在 AI 中創建內陰影最省力，效果還不錯的辦法了。不過要注意，這個濾鏡通常應該放到「效果」面板的最後邊，因為圖形在應用這個濾鏡後就被柵格化了。

　　注：這個方法來自 StackExchange 上的討論： Inner shadow issue in Illustrator CS5 ，更早的出處是源自：SVGQuickRef ，不過這個站點的域名當前已經過期，不能正常訪問了 = =

　　2. 以及其他 (How it works)

　　在上面的例子裡，我們使用 AI 的 SVG 濾鏡功能，自己寫了一個濾鏡，應用到了圓角矩形上，生成了內陰影效果。出於好奇，我研究了一下 how it works，發現這一塊兒水還挺深。下面，就說說 AI 裡的 SVG 濾鏡功能。下面的這部分，就當拓展閱讀好了，可能有些晦澀難懂，所以不要求掌握。不過，掌握 SVG 濾鏡的應用後，就可以自己寫一些簡單的濾鏡在 AI 裡來用了。

　　首先，說說 SVG 是什麼。SVG 的全稱是 Scalable Vector Graphic，即可縮放矢量圖形。SVG 實際上是純文本 XML 格式，通過 XML 定義圖形的形狀、填充顏色、描邊等。在維基百科中，就大量應用了 SVG 格式作為國旗國徽、地圖、信息圖應用。

　　SVG 除了可以描述矢量圖形的形狀、填充顏色、描邊等，還可以使用濾鏡對圖形進行進一步的修飾。這裡的濾鏡就是 SVG 濾鏡(SVG Filters)。網上有關於 SVG 濾鏡的資料少的可憐，無論中文還是英文。不過，還是根據現有有限的資料，大概了解了一下 SVG 濾鏡到底是什麼樣的玩意兒，以及怎樣來用。

　　SVG 濾鏡同以 SVG 格式描述矢量圖一樣，也是純文本 XML 格式。SVG 濾鏡以 標簽開始，以 標簽結束。在 和 標簽之內的部分為濾鏡的定義。在 AI 裡， 標簽裡的 id 屬性，即為顯示在 SVG 濾鏡面板中的濾鏡名。

　　SVG 濾鏡的一個重要概念是基礎濾鏡(filter primitives)，每個基礎濾鏡可以執行某個特定的修飾功能，例如顏色變換等。所有的基礎濾鏡命名都以 "fe" 為開頭，應該是 filter effect 或 filter element 的縮寫，如上面的 ， 這些。一個 SVG 濾鏡可以由一個基礎濾鏡或多個基礎濾鏡的組合來完成。知道這些後，回過頭來看一下，上面的內陰影效果是怎樣一步一步地實現的。為方便查看，把畫板的背景設置為這樣的網格：

　　首先，執行第一步操作：

　　這一步， 基礎濾鏡讓原始圖形向下和向右兩個方向平移均五個像素(注意和上圖的邊界框與背景網格做比較)：

　　然後是

　　基礎濾鏡的作用正如它的名字那樣，為圖形做高斯模糊，其中，stdDeviation 參數為高斯模糊的標准差，決定模糊半徑。在為上面的圖形做高斯模糊後，將結果暫存在緩沖區，名稱為 "offset-blur"：

　　接下來是 基礎濾鏡：

　　命令的作用是將兩個圖按一定規則拼為一個圖。需要指定一個混合模式，混合模式有 arithmetic, over, in, out, atop, xor 六種。arithmetic 為算數模式，有四個參數， k1, k2, k3, k4 需要手工指定;拼合規則是對 [R, G, B, A] 每一個通道做這樣的變換： result = k1*in*in2 + k2*in + k3*in2 + k4 , in 和 in 2 為兩張圖每個像素的每個單獨通道分量的大小，result 就是合成圖像的某顏色通道值。over, in, out, atop, xor 六種混合模式如圖所示：

　　需要指定兩個圖像作為輸入。在這個示例中，輸入圖像一，即 in 參數指定的，即是源圖像，SourceGraphic;輸入圖像二，即 in2 參數所指定的，為上一步 基礎濾鏡放在緩沖區的輸出結果 offset-result。然後讓這兩個圖像做 out 運算，得到這樣的結果：

　　最後，將上面的拼合結果存入緩沖區，命名為 inverse。

　　再下面是 基礎濾鏡：

　　命令對 SVG 濾鏡所控制的區域做顏色填充。本例子中以黑色，75% 可見度填充 SVG 濾鏡控制區域：

　　注意 基礎濾鏡沒有輸入參數。填充的結果輸出至緩沖區，名稱為 color。

　　然後又是一個 命令：

　　這次是用在緩沖區裡的 color 和 inverse 圖像做 in 運算，將內陰影做出來，結果保存到 shadow 裡，如圖：

　　最後是用 將陰影和源圖像拼合：

　　拼合完畢後，就得到最終需要的結果了：

　　使用 AI 的 SVG 濾鏡生成內陰影的步驟差不多就是這個樣子了。如果再回顧一下這整個過程，會發現很多基礎濾鏡都是將某一步的輸出作為這一步的輸入。那麼，可以根據基礎濾鏡輸入輸出之間的聯系，畫一個結點圖。我們這個例子的基礎濾鏡結點圖可以畫成這個樣子：

　　這樣基礎濾鏡之間的關系就一目了然了。

　　除此之外，SVG 濾鏡還有一些其他的有趣功能。再舉一個例子：加強圖像的凹凸效果。

　　如果用過一些 3D 創作軟件或類似 Unity 這樣的游戲引擎，可能會知道，在計算機世界裡，物體表面的凹凸感可以由凹凸貼圖或法線貼圖來做到。凹凸貼圖即給定一個除顏色紋理之外的凹凸紋理，凹凸紋理由灰度表示，越白的地方代表該點高度越高，越黑的地方與之相反代表高度越低。

　　法線貼圖類似，只是由灰度表示的凹凸紋理換為由彩色表示的表面法線紋理，每個像素的 [R, G, B] 顏色對應該點法線 [X, Y, Z] 分量的大小。通過凹凸貼圖和法線貼圖，可以大大增加計算機世界裡物體的真實感，且不會像直接創建多邊形那樣過多的增加物體幾何細節而過度增加計算機渲染負擔：

　　如上面這個 CrazyBump 軟件截圖，在這裡用了石牆紋理，並通過石牆紋理本身的灰度生成了凹凸紋理，計算機根據凹凸紋理、顏色紋理以及入射光線顏色、方向，還有視角的方向，生成了最終具有真實感的顏色圖像。

　　在 AI 裡，使用 SVG 濾鏡，也可以做出類似的效果。

　　這個濾鏡使用源圖像的灰度，生成凹凸紋理，再用凹凸紋理生成由光線照射下的凹凸感圖像，最後將凹凸感圖像與源圖像拼合，生成更加帶有凹凸感的圖像：

　　如圖，上圖為應用上述濾鏡的圖像，下圖為源圖，對比一下即可看到差別。

　　然後，還可以這樣玩，如改變光源的方向：