在 Affinity Designer 中製作「等角透視圖（Isometric Drawing）」是一個非常好玩的向量技巧，特別適合用來畫建築、場景、UI 圖示等。Affinity Designer 有內建的等角網格與工具，讓你輕鬆建立出準確的等角圖。
✅ 一、什麼是等角透視圖？
- 等角圖是三個方向以 120 度角交錯的視角（通常看起來像 30°/30° 的斜角）。
- 所有軸線（X、Y、Z）長度保持一致，無透視縮短，很適合技術與場景插圖。
🧱 二、Affinity Designer 製作等角圖的完整步驟
🔹 步驟 1：開啟等角網格
- 前往
View > Grid and Axis Manager - 在 Grid 類型選擇：「Isometric」
- 設定以下參數（可以視需求調整）：
- Spacing（格子大小）：例如 100 px
- Subdivision（細分）：可設為 4 或 5
- Show grid 打勾 → 顯示格線
- Snap to grid 打勾 → 繪製時自動吸附
🔧 這樣就會出現一個完美的等角網格！
🔹 步驟 2：使用等角繪圖工具
Affinity Designer 提供了一個超強功能：Isometric Panel（等角面板）
開啟方法：
View > Studio > Isometric
這個面板可以：
- 把一般圖形 投影 到不同的等角面（Front / Side / Top）
- 快速對齊、變換方向、旋轉物件
用法舉例：
- 畫一個普通的矩形
- 打開「Isometric」面板
- 點選「Front」→ 然後點「Fit to Plane」
⚡️ 物件會自動貼合到等角的 Front 面！
🔹 步驟 3：繪製基本等角立方體
- 畫一個正方形
- 使用「Isometric 面板」將它：
- 投影到 Front 面
- 複製後再投影到 Side 與 Top 面
- 排列這三個面，調整顏色來模擬光影（淺色在上，深色在側）
這就是基本的等角立方體。
🎨 小技巧與進階玩法
| 技巧 | 方法與說明 |
|---|---|
| ✅ 快速對齊圖形到面 | 用「Isometric 面板」→ 點「Fit to Plane」 |
| 🎨 模擬光影 | 使用不同明暗的顏色填滿每個面 |
| 🔲 建立重複單元格（Tiles） | 利用「Symbols」做可複製、同步變化的元素 |
| 🔄 複製並旋轉 | 使用「Transform」面板做精確位移或旋轉 |
| 🧱 建立地圖/城市視角 | 用方塊堆疊、調整高低，加入建築與地板細節 |
📐 快捷鍵與工具建議
| 快捷鍵/工具 | 功能 |
|---|---|
P | Pen Tool（畫出自訂面） |
M, O, U | 幾何形狀工具（方、圓、多邊形） |
Ctrl + J | 複製圖形 |
Shift + ⇧ | 等比例縮放 |
Ctrl + G | 群組 |
🔚 匯出等角圖（Export）
- 完成後，選擇你要輸出的範圍
File > Export- 選擇 PNG、SVG、PDF 等格式
- 若要保持向量清晰，建議使用 SVG 或 PDF
🧩 範例應用
你可以用等角圖設計：
- 等角城市（Isometric City）
- APP 圖示（像 Slack、Dropbox）
- 遊戲地圖（像模擬城市）
- 建築圖與科技展示
想實作？給你個挑戰題 🎯
挑戰：畫出一個等角辦公室立方體場景
包含：
- 地板（Top）
- 牆壁（Front/Side）
- 辦公桌（Top 面）
- 電腦螢幕（Front 面）
- 窗戶與燈光（Side 面）