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

使用內陰影效果

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

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

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

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

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

<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>

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

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

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

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

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

標簽里的 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 濾鏡以 <filter> 標簽開始，以 </filter> 標簽結束。在 <filter> 和 </filter> 標簽之內的部分為濾鏡的定義。在 AI 里，<filter> 標簽里的 id 屬性，即為顯示在 SVG 濾鏡面板中的濾鏡名。

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

首先，執行第一步操作：

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

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

然后是

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

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

接下來是 <feComposite> 基礎濾鏡：

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

<feComposite> 命令的作用是將兩個圖按一定規則拼為一個圖。需要指定一個混合模式，混合模式有 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 六種混合模式如圖所示：

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

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

再下面是 <feFlood> 基礎濾鏡：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在 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 濾鏡不能方便調節參數，若需要調節參數，必須要通過手工更改代碼來調節。還有，AI 中的 SVG 濾鏡不能夠像在 Web 那樣，通過開啟 enable-background 屬性來獲取當前圖形的背景圖。以及，AI 中似乎不可以用 SVG 濾鏡引用其他圖像或矢量對象。

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

最后，依然是作業時間：

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

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

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

本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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