這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影，為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景：基本篇 製作～

進階篇1：圖樣覆蓋

在按鈕區塊加上材質也是種加強明辨度、畫面更精緻的作法。

進階篇2：內發光

和按鈕同色系的淺色內發光能增加按鈕的立體感。

進階篇3：凹陷邊框

1.常常在知名App上看到按鈕外緣有一圈襯托按鈕本身的凹槽，其實作法很簡單。使用圓角矩型工具繪出一個比按鈕本身略大的方塊。

2.凹槽的反光，設定白色的「陰影」。

3.加上內陰影，讓凹槽更有凹陷下去的感覺。完成。

特別篇2：立體按鈕

1.不管是電視搖控器、電燈開關、或是電子計算機，它們的按鈕會做的比介面還凸出，是立體的。在App的介面上也可以製作擬真的立體按鈕，留意光影的變化就能做的非常精緻。先製作一個平面的按鈕。

2.複製一層移到按鈕下方，並壓扁它。這是按鈕的厚度。光線從正上方照射，所以這層厚度的顏色要比按鈕更深。

3.為了襯托按鈕，製作一層凹槽。

4.設定凹槽的高光。

5.凹槽的陰影。有時正上方90度角的設定會讓圖層顯得扁平無立體感，可以偷偷將角度改成120度。

6.為了更擬真，按鈕和厚度之間需加上高光。製作一個淺色的橢圓形。

7.高斯模糊後把橢圓形壓得扁扁的。

8.可以使用方向鍵微調高光的位置，並降低透明度。

9.加強厚度的陰影處，同樣使用壓扁的橢圓形，填上深色。

10.高斯模糊後加上遮色片。

11.調整透明度後，立體按鈕就完成囉！

以上是我常使用的幾種做按鈕的技巧，因為 App 畫面就是這麼大，除了首頁會使用大顆較特別的按鈕外，內頁操作和 Navigation Bar 上的按鈕用基本篇的就夠了，太花俏反而易造成畫面混亂。請以易用性為基礎、再來考慮視覺效果。