我學(xué)院：Illustrator創(chuàng)建內(nèi)陰影效果教程

1、學(xué)游戲就上我學(xué)院woxueyuUnity3D|Cocos|php|HTML5|Java|ios|Android|C#|AS3|UI設(shè)計|原畫設(shè)計|動漫美術(shù)|游戲策劃Illustrator基礎(chǔ)教程：創(chuàng)建內(nèi)陰影效果教程希望能通過本教程掌握AI這方面的知識。很長一段時間，我對 HYPERLINK http:/www.siluc/zt-748.html t http:/cg.siluc/ui/ai/_blank AdobeIllustrator最不滿意的一點，就是AI中沒有內(nèi)陰影效果，只能使用內(nèi)發(fā)光效果大致模擬。不過內(nèi)發(fā)光效果不能設(shè)置效果的偏移量，因此用起來有局限性。不過，最近，在網(wǎng)上找到了一種方法，

2、能在AI中快速方便地創(chuàng)建內(nèi)陰影效果：首先，新建一個文檔，用圓角矩形工具，或者矩形工具+圓角效果，畫出這樣的圖形：然后，執(zhí)行菜單命令效果-SVG濾鏡-應(yīng)用SVG濾鏡命令，在彈出的對話框中，新建一個SVG濾鏡：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006205958-0.jpg * MERGEFORMATINET INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006201229-1.jpg * MERGEFORMATINET 然后，把下面的代碼復(fù)制、粘貼替換掉文本

3、框里的內(nèi)容，點擊確定：feoffsetdx=5dy=5/fegaussianblurstdDeviation=3result=offset-blur/fecompositeoperator=outin=SourceGraphicin2=offset-blurresult=inverse/fefloodflood-color=blackflood-opacity=0.75result=color/fecompositeoperator=inin=colorin2=inverseresult=shadow/fecompositeoperator=overin=shadowin2=SourceGra

4、phic/feoffsetfegaussianblurfecompositefefloodfecompositefecomposite最后，點確定應(yīng)用效果，內(nèi)陰影效果就出來了，帶有(5，5)方向的偏移：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/100620H29-2.jpg * MERGEFORMATINET 如果發(fā)現(xiàn)圖形帶有鋸齒，類似這樣：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006203b7-3.jpg * MERGEFORMATINET 那么，執(zhí)行命令

5、效果-文檔柵格效果設(shè)置，勾選消除鋸齒，即可以了。Done.如果希望調(diào)整內(nèi)陰影的偏移，調(diào)整dx,dy的值即可。改變內(nèi)陰影的顏色和透明度，可以通過調(diào)整fefloodflood-color=blackflood-opacity=0.75result=color/標(biāo)簽里的flood-color和flood-opacity屬性來做到。這個方法應(yīng)該是在AI中創(chuàng)建內(nèi)陰影最省力，效果還不錯的辦法了。不過要注意，這個濾鏡通常應(yīng)該放到效果面板的最后邊，因為圖形在應(yīng)用這個濾鏡后就被柵格化了。注：這個方法來自StackExchange上的討論：InnershadowissueinIllustratorCS5，更早的出

6、處是源自：SVGQuickRef，不過這個站點的域名當(dāng)前已經(jīng)過期，不能正常訪問了=2.以及其他(Howitworks)在上面的例子里，我們使用AI的SVG濾鏡功能，自己寫了一個濾鏡，應(yīng)用到了圓角矩形上，生成了內(nèi)陰影效果。出于好奇，我研究了一下howitworks，發(fā)現(xiàn)這一塊兒水還挺深。下面，就說說AI里的SVG濾鏡功能。下面的這部分，就當(dāng)拓展閱讀好了，可能有些晦澀難懂，所以不要求掌握。不過，掌握SVG濾鏡的應(yīng)用后，就可以自己寫一些簡單的濾鏡在AI里來用了。首先，說說SVG是什么。SVG的全稱是ScalableVectorGraphic，即可縮放矢量圖形。SVG實際上是純文本XML格式，通過XM

7、L定義圖形的形狀、填充顏色、描邊等。在維基百科中，就大量應(yīng)用了SVG格式作為國旗國徽、地圖、信息圖應(yīng)用。SVG除了可以描述矢量圖形的形狀、填充顏色、描邊等，還可以使用濾鏡對圖形進行進一步的修飾。這里的濾鏡就是SVG濾鏡(SVGFilters)。網(wǎng)上有關(guān)于SVG濾鏡的資料少的可憐，無論中文還是英文。不過，還是根據(jù)現(xiàn)有有限的資料，大概了解了一下SVG濾鏡到底是什么樣的玩意兒，以及怎樣來用。SVG濾鏡同以SVG格式描述矢量圖一樣，也是純文本XML格式。SVG濾鏡以標(biāo)簽開始，以標(biāo)簽結(jié)束。在和標(biāo)簽之內(nèi)的部分為濾鏡的定義。在AI里，標(biāo)簽里的id屬性，即為顯示在SVG濾鏡面板中的濾鏡名。SVG濾鏡的一個重要

8、概念是基礎(chǔ)濾鏡(filterprimitives)，每個基礎(chǔ)濾鏡可以執(zhí)行某個特定的修飾功能，例如顏色變換等。所有的基礎(chǔ)濾鏡命名都以“fe”為開頭，應(yīng)該是filtereffect或filterelement的縮寫，如上面的，這些。一個SVG濾鏡可以由一個基礎(chǔ)濾鏡或多個基礎(chǔ)濾鏡的組合來完成。知道這些后，回過頭來看一下，上面的內(nèi)陰影效果是怎樣一步一步地實現(xiàn)的。為方便查看，把畫板的背景設(shè)置為這樣的網(wǎng)格：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006205443-4.jpg * MERGEFORMATINET 首先，執(zhí)行第一步操作：f

9、eoffsetdx=5dy=5/這一步，基礎(chǔ)濾鏡讓原始圖形向下和向右兩個方向平移均五個像素(注意和上圖的邊界框與背景網(wǎng)格做比較)：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006204053-5.jpg * MERGEFORMATINET 然后是fegaussianblurstdDeviation=3result=offset-blur/基礎(chǔ)濾鏡的作用正如它的名字那樣，為圖形做高斯模糊，其中，stdDeviation參數(shù)為高斯模糊的標(biāo)準(zhǔn)差，決定模糊半徑。在為上面的圖形做高斯模糊后，將結(jié)果暫存在緩沖區(qū)，名稱為“offset-bl

10、ur”：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/100620A03-6.jpg * MERGEFORMATINET 接下來是基礎(chǔ)濾鏡：fecompositeoperator=outin=SourceGraphicin2=offset-blurresult=inverse/命令的作用是將兩個圖按一定規(guī)則拼為一個圖。需要指定一個混合模式，混合模式有arithmetic,over,in,out,atop,xor六種。arithmetic為算數(shù)模式，有四個參數(shù)，k1,k2,k3,k4需要手工指定;拼合規(guī)則是對R,G,B,A每一個通道做

11、這樣的變換：result=k1*in*in2+k2*in+k3*in2+k4,in和in2為兩張圖每個像素的每個單獨通道分量的大小，result就是合成圖像的某顏色通道值。over,in,out,atop,xor六種混合模式如圖所示：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006204053-5.jpg * MERGEFORMATINET 需要指定兩個圖像作為輸入。在這個示例中，輸入圖像一，即in參數(shù)指定的，即是源圖像，SourceGraphic;輸入圖像二，即in2參數(shù)所指定的，為上一步基礎(chǔ)濾鏡放在緩沖區(qū)的輸出結(jié)果offs

12、et-result。然后讓這兩個圖像做out運算，得到這樣的結(jié)果：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006202964-8.jpg * MERGEFORMATINET 最后，將上面的拼合結(jié)果存入緩沖區(qū)，命名為inverse。再下面是基礎(chǔ)濾鏡：fefloodflood-color=blackflood-opacity=0.75result=color/命令對SVG濾鏡所控制的區(qū)域做顏色填充。本例子中以黑色，75%可見度填充SVG濾鏡控制區(qū)域：注意基礎(chǔ)濾鏡沒有輸入?yún)?shù)。填充的結(jié)果輸出至緩沖區(qū)，名稱為color。然后又是一個

13、命令：fecompositeoperator=inin=colorin2=inverseresult=shadow/這次是用在緩沖區(qū)里的color和inverse圖像做in運算，將內(nèi)陰影做出來，結(jié)果保存到shadow里，如圖：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/100620B94-10.jpg * MERGEFORMATINET 最后是用將陰影和源圖像拼合：fecompositeoperator=overin=shadowin2=SourceGraphic/拼合完畢后，就得到最終需要的結(jié)果了：INCLUDEPICTURE

14、d http:/cg.siluc/uploads/allimg/160527/1006201V1-11.jpg * MERGEFORMATINET 使用AI的SVG濾鏡生成內(nèi)陰影的步驟差不多就是這個樣子了。如果再回顧一下這整個過程，會發(fā)現(xiàn)很多基礎(chǔ)濾鏡都是將某一步的輸出作為這一步的輸入。那么，可以根據(jù)基礎(chǔ)濾鏡輸入輸出之間的聯(lián)系，畫一個結(jié)點圖。我們這個例子的基礎(chǔ)濾鏡結(jié)點圖可以畫成這個樣子：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006205604-12.jpg * MERGEFORMATINET 這樣基礎(chǔ)濾鏡之間的關(guān)系就一目了然

15、了。除此之外，SVG濾鏡還有一些其他的有趣功能。再舉一個例子：加強圖像的凹凸效果。如果用過一些3D創(chuàng)作軟件或類似 HYPERLINK http:/cg.siluc/dongman/unity3d/ t http:/cg.siluc/ui/ai/_blank Unity這樣的游戲引擎，可能會知道，在計算機世界里，物體表面的凹凸感可以由凹凸貼圖或法線貼圖來做到。凹凸貼圖即給定一個除顏色紋理之外的凹凸紋理，凹凸紋理由灰度表示，越白的地方代表該點高度越高，越黑的地方與之相反代表高度越低。法線貼圖類似，只是由灰度表示的凹凸紋理換為由彩色表示的表面法線紋理，每個像素的R,G,B顏色對應(yīng)該點法線X,Y,Z分

16、量的大小。通過凹凸貼圖和法線貼圖，可以大大增加計算機世界里物體的真實感，且不會像直接創(chuàng)建多邊形那樣過多的增加物體幾何細(xì)節(jié)而過度增加計算機 HYPERLINK http:/cg.siluc/3dmax/xuanran/ t http:/cg.siluc/ui/ai/_blank 渲染負(fù)擔(dān)：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006206400-13.jpg * MERGEFORMATINET 如上面這個CrazyBump軟件截圖，在這里用了石墻紋理，并通過石墻紋理本身的灰度生成了凹凸紋理，計算機根據(jù)凹凸紋理、顏色紋理以及入

17、射光線顏色、方向，還有視角的方向，生成了最終具有真實感的顏色圖像。在AI里，使用SVG濾鏡，也可以做出類似的效果。代碼如下：fecolormatrixtype=luminanceToAlphain=SourceGraphicresult=img1/fediffuselightinglighting-color=whitein=img1surfaceScale=12diffuseConstant=1kernelUnitLength=1,1result=bumpedfedistantlightazimuth=135elevation=135/feblendin=bumpedin2=SourceGr

18、aphicmode=multiplyresult=img2/fecompositein=img2in2=SourceGraphicoperator=inresult=output/fecolormatrixfediffuselightingfedistantlightfeblendfecompositefecomposite這個濾鏡使用源圖像的灰度，生成凹凸紋理，再用凹凸紋理生成由光線照射下的凹凸感圖像，最后將凹凸感圖像與源圖像拼合，生成更加帶有凹凸感的圖像：如圖，上圖為應(yīng)用上述濾鏡的圖像，下圖為源圖，對比一下即可看到差別。然后，還可以這樣玩，如改變光源的方向：INCLUDEPICTURE d http:/cg.siluc/uploads/allimg/160527/1006205b6-15.jpg * MERGEFORMATINET 改變光源的顏色為夕陽溫暖的余光：改變光源的類型：甚至是為紋理增加