教程背景

隨著移動互聯網發展，APP 圖標設計成為 UI 設計師必備技能。本教程拋磚引玉，展示一款具有立體光感的圖標製作思路，重點在於圖層結構組織與圖層樣式的精細堆疊。

最終效果

素材包下載：本地高速下載

圖層結構與步驟拆解

1. 畫布與基礎幾何體

• 新建畫布（參考圖設定）。
• 圓角矩形 1：黑色 #000000，大圓角（參考參數圖）。
• 圓角矩形 2：灰色 #898989，稍小，置於圖層 1 上方。
• 橢圓 1：深灰 #323232，置於圖層 2 上方。
• 橢圓 1 副本：複製橢圓 1，置於其下，顏色 #77f8f3（青綠），Ctrl+T 按 Shift+Alt 從中心放大，形成邊框光暈。

2. Logo 放置

拖入 Logo 素材，調整大小位置置於橢圓區域中央。

3. 圖層樣式系統化應用（核心）

按從下至上順序，為各圖層添加豐富樣式，關鍵點：

• 圓角矩形 2：添加「圖案疊加」（素材包 tactile_noise 紋理）、「斜面與浮雕」、「內陰影」、「投影」等，建立金屬拉絲底板質感。
• 橢圓 1：複製圓角矩形 2 樣式 → 追加「內發光」、「漸變疊加」、「投影」等，營造凹陷感與邊緣高光。
• 橢圓 1 副本（青綠邊框）：添加「斜面與浮雕」（內斜面）、「內陰影」、「漸變疊加」、「外發光」、「投影」，構建發光邊框立體感。
• Logo 圖層：複製一層做色階調整（Ctrl+L）增強對比，添加「投影」、「內陰影」、「斜面與浮雕」、「漸變疊加」等。原 Logo 圖層另加「外發光」、「投影」等增強浮起感。
• 圓角矩形 1（最底黑底）：添加「內陰影」、「投影」等增加整體厚度。
• 高光修飾圖層：在圓角矩形 2 上方新建圖層，Ctrl+點擊圓角矩形 1 載入選區，白色柔邊畫筆繪制頂部高光帶，再 Ctrl+點擊圓角矩形 2 選區刪除多餘，形成精準的頂部高光邊緣。

方法論總結

• 幾何體分層：底板、凹槽、邊框、發光環、Logo 逐層疊加
• 樣式復用：Alt+拖拽複製圖層樣式，微調參數適應不同尺寸/顏色
• 選區配合畫筆/漸變：精準控制高光/陰影分佈（如步驟 17）
• 素材包紋理：引入真實材質圖案打破純數字感
• 非破壞工作流：所有效果在圖層樣式中，隨時可改