本教程以 Step-by-step 形式詳細拆解一枚綠色系軟體圖標的構建過程：從球體玻璃質感、高光/陰影區塊劃分、UI 裝飾元素（矩形條、五角星、文字）的透視貼合，到背景氛圍營造與陰影投射。展示圖標設計中「材質真實感」與「介面圖形簡潔性」的平衡技巧，適合 APP 圖標設計師、UI 視覺設計師進階學習。

17 步驟精要流程

Step 1-2：畫布與球體基礎

• 新建 1024×1024 px 畫布。背景暫填深色。
• 橢圓工具按 Shift 畫正圓選區，新建圖層「Sphere_Base」，填充綠色漸變基底色（稍後用圖層樣式覆蓋）。

Step 3-4：頂部高光橢圓（玻璃頂面反射）

• 新建圖層「Top_Highlight」，橢圓選框工具拉出扁橢圓選區（寬≈球徑 80%，高≈球徑 15%），置於球體頂部略下方。
• 白到透明線性漸變（角度 -90°）填充。若底部生硬，用羽化邊緣橡皮擦輕擦過渡。
  

Step 5-6：球體側面環境光帶

• 新建圖層「Side_Rim」，大柔邊筆刷 (200 px, 硬度 0) 前景白色，在球體扁平側面點繪月牙狀高光帶。
  圖層不透明度 90%，模式「疊加」，形成玻璃邊緣折射高光。
  

Step 7：UI 裝飾條——球面化變形與蒙版漸隱

• 繪製兩矩形（寬高比約 4:1），執行「濾鏡＞扭曲＞球面化」（數量 100%），使其彎曲貼合球面曲率。
  自由變換調整大小、旋轉角度、位置，放置於球體中上部對稱兩側。
  添加圖層蒙版，黑白線性漸變（內側不透明→外側透明），製造「嵌入球體」的漸隱感。
  

Step 8：頂部高光三角/扇形區

• 鋼筆勾選頂部三角選區，填白，不透明度 50%。添加蒙版黑白線性漸變（中心不透明→邊緣透明），柔化邊緣。
  

Step 9：五角星裝飾——圖層樣式堆疊

• 多邊形工具（邊數 5，星形半徑 50%）繪製五角星。
  添加樣式：
  - 倒角與浮雕：外部倒角，大小 3 px，高光 #FFFFFF，陰影 #004000。
  - 漸變疊加：線性 #00FF80→#008040，角度 90°。
  - 外發光：#00FF80，大小 5 px，範圍 50%。
  - 投影：距離 2 px，大小 3 px，#000000 40%。
  

Step 10-12：文字排版與圖層樣式

• 字體 Myriad Pro (OT1) Light Condensed / Bold。
  文字圖層添加「倒角與浮雕」（內部倒角，大小 2 px）、「漸變疊加」（綠系漸變）、「外發光」（綠光）、「投影」。
  底部小字「50 kickbucks」分別添加投影/浮雕/內陰影區分層級。
  

Step 13-16：背景氛圍與陰影

• 背景層上新建圖層填充 #2A8000（深綠）。
  新建圖層：前景白/背景黑 → 「雲彩」 → 模式「正片疊底」 → 「動感模糊」距離 200 px 角度 0° → 與綠色層合併 → 添加蒙版徑向漸變（中心透明→邊緣不透明），形成聚光燈式背景。
  
• 球體陰影：新建圖層置於球體下方，黑色 0 硬度筆刷點大圓，自由變換垂直壓縮 20%，高斯模糊 10 px，不透明度 40%。
  

Step 17：最終潤色

• 群組所有圖標元素，建立「色相/飽和度」微調整體綠色色相。
  「曲線」提高對比，「銳化」增強邊緣銳度。導出 1024/512/256/128/64/32 px 多尺寸 PNG。

設計思維啟發：圖標材質表現不必追求「照片級真實」，而應提煉「材質特徵關鍵詞」（玻璃→高光銳利/透明/折射；金屬→拉絲/高反差/環境反映），用最少圖層樣式組合傳達最大材質信息量。