很長一段時(shí)間，我對AdobeIllustrator最不滿意的一點(diǎn)，就是AI中沒有內(nèi)陰影效果，只能使用內(nèi)發(fā)光效果大致模擬。不過內(nèi)發(fā)光效果不能設(shè)置效果的偏移量，因此用起來有局限性。不過，最近，在網(wǎng)上找到了一種方法，能在AI中快速方便地創(chuàng)建內(nèi)陰影效果，教程介紹地比較詳細(xì)，希望能通過本教程大家可以掌握Ai這方面的知識(shí)。

創(chuàng)建內(nèi)陰影效果方法：

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

然后，執(zhí)行菜單命令「效果」-›「SVG濾鏡」-›「應(yīng)用SVG濾鏡」命令，在彈出的對話框中，新建一個(gè)SVG濾鏡：

然后，把下面的代碼復(fù)制、粘貼替換掉文本框里的內(nèi)容，點(diǎn)擊確定：

最后，點(diǎn)「確定」應(yīng)用效果，內(nèi)陰影效果就出來了，帶有(5，5)方向的偏移：

如果發(fā)現(xiàn)圖形帶有鋸齒，類似這樣：

那么，執(zhí)行命令「效果」-›「文檔柵格效果設(shè)置」，勾選「消除鋸齒」，即可以了。

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

標(biāo)簽里的flood-color和flood-opacity屬性來做到。這個(gè)方法應(yīng)該是在AI中創(chuàng)建內(nèi)陰影最省力，效果還不錯(cuò)的辦法了。不過要注意，這個(gè)濾鏡通常應(yīng)該放到「效果」面板的最后邊，因?yàn)閳D形在應(yīng)用這個(gè)濾鏡后就被柵格化了。

注：這個(gè)方法來自StackExchange上的討論：InnershadowissueinIllustratorCS5，更早的出處是源自：SVGQuickRef，不過這個(gè)站點(diǎn)的域名當(dāng)前已經(jīng)過期，不能正常訪問了==

2.以及其他(Howitworks)

在上面的例子里，我們使用AI的SVG濾鏡功能，自己寫了一個(gè)濾鏡，應(yīng)用到了圓角矩形上，生成了內(nèi)陰影效果。出于好奇，我研究了一下howitworks，發(fā)現(xiàn)這一塊兒水還挺深。下面，就說說AI里的SVG濾鏡功能。下面的這部分，就當(dāng)拓展閱讀好了，可能有些晦澀難懂，所以不要求掌握。不過，掌握SVG濾鏡的應(yīng)用后，就可以自己寫一些簡單的濾鏡在AI里來用了。

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

SVG除了可以描述矢量圖形的形狀、填充顏色、描邊等，還可以使用濾鏡對圖形進(jìn)行進(jìn)一步的修飾。這里的濾鏡就是SVG濾鏡（SVGFilters）。網(wǎng)上有關(guān)于SVG濾鏡的資料少的可憐，無論中文還是英文。不過，還是根據(jù)現(xiàn)有有限的資料，大概了解了一下SVG濾鏡到底是什么樣的玩意兒，以及怎樣來用。

SVG濾鏡同以SVG格式描述矢量圖一樣，也是純文本XML格式。SVG濾鏡以<filter>標(biāo)簽開始，以</filter>標(biāo)簽結(jié)束。在<filter>和</filter>標(biāo)簽之內(nèi)的部分為濾鏡的定義。在AI里，<filter>標(biāo)簽里的id屬性，即為顯示在SVG濾鏡面板中的濾鏡名。

SVG濾鏡的一個(gè)重要概念是基礎(chǔ)濾鏡（filterprimitives），每個(gè)基礎(chǔ)濾鏡可以執(zhí)行某個(gè)特定的修飾功能，例如顏色變換等。所有的基礎(chǔ)濾鏡命名都以“fe”為開頭，應(yīng)該是filtereffect或filterelement的縮寫，如上面的<feFlood>，<feGaussianBlur>這些。一個(gè)SVG濾鏡可以由一個(gè)基礎(chǔ)濾鏡或多個(gè)基礎(chǔ)濾鏡的組合來完成。知道這些后，回過頭來看一下，上面的內(nèi)陰影效果是怎樣一步一步地實(shí)現(xiàn)的。為方便查看，把畫板的背景設(shè)置為這樣的網(wǎng)格：

首先，執(zhí)行第一步操作：

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

然后是

<feGaussianBlur>基礎(chǔ)濾鏡的作用正如它的名字那樣，為圖形做高斯模糊，其中，stdDeviation參數(shù)為高斯模糊的標(biāo)準(zhǔn)差，決定模糊半徑。在為上面的圖形做高斯模糊后，將結(jié)果暫存在緩沖區(qū)，名稱為“offset-blur”：

接下來是<feComposite>基礎(chǔ)濾鏡：

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

<feComposite> 需要指定兩個(gè)圖像作為輸入。在這個(gè)示例中，輸入圖像一，即in參數(shù)指定的，即是源圖像，SourceGraphic;輸入圖像二，即in2參數(shù)所指定的，為上一步<feComposite> 基礎(chǔ)濾鏡放在緩沖區(qū)的輸出結(jié)果offset-result。然后讓這兩個(gè)圖像做out運(yùn)算，得到這樣的結(jié)果：

最后，將上面的拼合結(jié)果存入緩沖區(qū)，命名為inverse。

最新評論