使用Illustrator做UI設(shè)計系列教程：創(chuàng)建內(nèi)陰影效果（5）

這是第五個系列，對AI感興趣的同學可以試一下，作者還布置了作業(yè)，完成了作業(yè)的同學可以給作者@張泊寧研究所 私信交流，希望能通過本教程掌握Ai這方面的知識 ：）

使用內(nèi)陰影效果

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

小課堂系列：
《使用 Adobe Illustrator 做 UI 設(shè)計——多重填充與多重描邊》
《小課堂第二彈！使用ILLUSTRATOR做UI設(shè)計系列教程》
《小課堂第三彈！使用ILLUSTRATOR做UI設(shè)計系列教程》
《小課堂第四彈：使用ILLUSTRATOR做UI設(shè)計系列教程》

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

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

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

<filter  id="InnerShadow-5-5-0.75-black">
  <!-- Shadow Offset -->
  <feOffset
    dx='5'
    dy='5'
  />

  <!-- Shadow Blur -->
  <feGaussianBlur
    stdDeviation='3'
    result='offset-blur'
  />

  <!-- Invert the drop shadow to create an inner shadow -->
  <feComposite
    operator='out'
    in='SourceGraphic'
    in2='offset-blur'
    result='inverse'
  />

  <!-- Color & Opacity -->
  <feFlood
    flood-color='black'
    flood-opacity='0.75'
    result='color'
  />

  <!-- Clip color inside shadow -->
  <feComposite
    operator='in'
    in='color'
    in2='inverse'
    result='shadow'
  />

  <!-- Put shadow over original object -->
  <feComposite
    operator='over'
    in='shadow'
    in2='SourceGraphic'
  />
</filter>

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

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

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

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

 <feFlood
    flood-color='black'
    flood-opacity='0.75'
    result='color'
  />

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

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

2. 以及其他 (How it works)

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

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

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

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

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

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

 <!-- Shadow Offset -->
  <feOffset
    dx='5'
    dy='5'
  />

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

然后是

  <!-- Shadow Blur -->
  <feGaussianBlur
    stdDeviation='3'
    result='offset-blur'
  />

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

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

  <!-- Invert the drop shadow to create an inner shadow -->
  <feComposite
    operator='out'
    in='SourceGraphic'
    in2='offset-blur'
    result='inverse'
  />

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

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

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

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

  <!-- Color & Opacity -->
  <feFlood
    flood-color='black'
    flood-opacity='0.75'
    result='color'
  />

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

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

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

  <!-- Clip color inside shadow -->
  <feComposite
    operator='in'
    in='color'
    in2='inverse'
    result='shadow'
  />

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

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

  <!-- Put shadow over original object -->
  <feComposite
    operator='over'
    in='shadow'
    in2='SourceGraphic'
  />

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

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

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

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

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

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

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

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

<filter  id="BumpDiffuse">

	<feColorMatrix 
		type="luminanceToAlpha" 
		in="SourceGraphic" 
		result="img1" 
	/>

	<feDiffuseLighting
		lighting-color="white"
		in="img1"
		surfaceScale="12"
		diffuseConstant="1"
		kernelUnitLength="1,1"
		result="bumped">

		<feDistantLight
			azimuth="135"
			elevation="135"
		/>

	</feDiffuseLighting>

	<feBlend
		in="bumped"
		in2="SourceGraphic"
		mode="multiply"
		result="img2"
	/>

	<feComposite 
		in="img2" 
		in2="SourceGraphic" 
		operator="in" 
		result="output" 
	/>

</filter>

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

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

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

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

改變光源的類型：

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

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

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

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

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

1. 請根據(jù)?Filter Effects?這個頁面里面的資料，了解上面的凹凸效果濾鏡是如何實現(xiàn)的；
2. 根據(jù)上面凹凸濾鏡效果代碼，畫出基礎(chǔ)濾鏡結(jié)點圖；
3. 將上面凹凸濾鏡的代碼擴充，使其實現(xiàn)最后一張圖的反光效果；

完成的作業(yè)請寄至這個郵箱：me@zhangboning.me

原文地址：zhangboning.me
作者：@張泊寧研究所

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：