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

進階篇1:圖樣覆蓋

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

進階篇2:內發光

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

進階篇3:凹陷邊框

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

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

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

特別篇2:立體按鈕

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

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

3.為了襯托按鈕,製作一層凹槽。
24.jpg

4.設定凹槽的高光。
25.jpg

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

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

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

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

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

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

11.調整透明度後,立體按鈕就完成囉!
32.jpg

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

comments powered by Disqus