經典的 iPhone 4 造型以鋼化玻璃面板、不鏽鋼中框、精密鈕扣著稱。本教學逐步拆解如何在 Photoshop 中純用向量形狀、圖層樣式（漸變疊加、內發光、斜面與浮雕、光澤、描邊）構建出可無限縮放的向量級寫實 iPhone 4 圖標，涵蓋機身、螢幕、Home 鍵、鏡頭、感應器、揚聲器等所有細節元件。

最終效果

核心製作步驟（12 大步驟）

步驟 1：機身基礎形狀

新建 400×600 px 文件 → 漸變背景 #3d3d3d 到 #121212 → 圓角矩形工具（半徑 34px）繪製機身主形狀 → 命名「iPhone Shape」（圖 01）。

步驟 2：機身主體材質（圖層樣式堆疊）

「iPhone Shape」圖層套用：

• 漸變疊加：模擬不鏽鋼中框環狀高光（圖 02）。
• 新圖層：編輯 → 描邊（2px、#bab9b7、內部） → 內發光（圖 03）、斜面與浮雕（圖 04）、光澤（圖 05）、漸變疊加（圖 06）疊加細節光影。

步驟 3-4：機身邊緣精修與螢幕區域

• 「iPhone Shape」再加描邊（#2f2f2f、內部、4px）。
• 新圖層描邊（黑色、50% 不透明度、1px、內部） → 獲得雙層邊框質感（圖 07）。
• 矩形工具繪製螢幕區域 → 圖層樣式：描邊（圖 08-09） → 放入壁紙素材（圖 10）。

步驟 6-10：Home 鍵精密構建（多層圓環疊加）

1. 橢圓工具繪製基礎圓形「Button」 → 漸變疊加（角度 180°，圖 12）、光澤（圖 13）。
2. 圓角矩形（半徑 5px）繪製方形鍵盤區 → 填充 0% → 描邊（#808080、2px、內部） → 矩形選區刪除部分形成凹槽（圖 14-15）。
3. 圓角矩形繪製內嵌圓角矩形 → 漸變疊加（圖 17）、描邊（圖 18） → 細微直線裝飾（圖 19）。
4. 小圓圈（圖 20） → 漸變疊加（圖 21） → 複製縮放調整漸變（圖 22） → 再複製調整（圖 23） → 最後複製改「顏色疊加」而非漸變（圖 24） → 形成多層同心圓環精密感（圖 25）。

步驟 11-12：頂部感應器/揚聲器與側邊靜音鍵

• 小圓角矩形 → 內發光（圖 26-27） → 複製旋轉 90° 得到另一側。
• 鋼筆工具繪製側邊長條鍵 → 漸變疊加（圖 29）+ 內發光 → 修飾收尾。

向量級圖標優勢

• 所有元件為形狀圖層 + 圖層樣式，任意縮放不失真。
• 參數化修改：調整漸變角度/顏色即可切換深色/淺色機身版本。
• 圖層結構清晰，適合團隊協作與設計系統組件化管理。