再下面是<feFlood>基礎(chǔ)濾鏡：

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

注意<feFlood>基礎(chǔ)濾鏡沒有輸入?yún)?shù)。填充的結(jié)果輸出至緩沖區(qū)，名稱為color。

然后又是一個<feComposite>命令：

這次是用在緩沖區(qū)里的color和inverse圖像做in運算，將內(nèi)陰影做出來，結(jié)果保存到shadow里，如圖：

最后是用<feComposite>將陰影和源圖像拼合：

拼合完畢后，就得到最終需要的結(jié)果了：

使用AI的SVG濾鏡生成內(nèi)陰影的步驟差不多就是這個樣子了。如果再回顧一下這整個過程，會發(fā)現(xiàn)很多基礎(chǔ)濾鏡都是將某一步的輸出作為這一步的輸入。那么，可以根據(jù)基礎(chǔ)濾鏡輸入輸出之間的聯(lián)系，畫一個結(jié)點圖。我們這個例子的基礎(chǔ)濾鏡結(jié)點圖可以畫成這個樣子：

這樣基礎(chǔ)濾鏡之間的關(guān)系就一目了然了。

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

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

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

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

在AI里，使用SVG濾鏡，也可以做出類似的效果。代碼如下：

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

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

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

改變光源的顏色為夕陽溫暖的余光：

改變光源的類型：

甚至是為紋理增加「亮晶晶」的效果：

由此，我們可以看到，SVG濾鏡雖然是AI最不常用的功能之一，但是功能卻相當(dāng)強(qiáng)大。有了SVG濾鏡這個功能，我們能夠自己編寫所想要的濾鏡，從而大大增強(qiáng)AI的功能，甚至可以將AI變成一個圖像處理軟件。不過AI的SVG濾鏡也有很多局限性：

首先是SVG濾鏡不能方便調(diào)節(jié)參數(shù)，若需要調(diào)節(jié)參數(shù)，必須要通過手工更改代碼來調(diào)節(jié)。還有，AI中的SVG濾鏡不能夠像在Web那樣，通過開啟enable-background屬性來獲取當(dāng)前圖形的背景圖。以及，AI中似乎不可以用SVG濾鏡引用其他圖像或矢量對象。

最后，估計因為Adobe也覺得這個功能可能沒多少人會用，沒怎么對這個功能做軟件測試，SVG濾鏡這個功能有一些bug，如果輸入一些無效的SVG命令可能會引起AI崩潰。因此在應(yīng)用SVG濾鏡前，必須要保存文件。

最后，依然是作業(yè)時間：

請根據(jù)FilterEffects這個頁面里面的資料，了解上面的凹凸效果濾鏡是如何實現(xiàn)的;

根據(jù)上面凹凸濾鏡效果代碼，畫出基礎(chǔ)濾鏡結(jié)點圖;

將上面凹凸濾鏡的代碼擴(kuò)充，使其實現(xiàn)最后一張圖的反光效果！

教程結(jié)束，以上就是用Illustrator快速方便地創(chuàng)建內(nèi)陰影效果，希望這篇教程能給大家?guī)韼椭?！謝謝大家觀看！

最新評論