布拉格以「百塔之城」著稱，其哥德式尖塔、巴洛克圓頂、彩色屋頂構成極具辨識度的天際線。本教程示範如何在 Illustrator 中運用幾何構形、路徑查找器、圖案筆刷等工具，將複雜建築簡化為極具辨識度的扁平風格小圖標，適配 App 圖標、地圖標註、旅遊插畫等場景。

成品展示

核心製作流程

1. 參考圖分析與幾何拆解

• 收集查理大橋、提恩教會、布拉格城堡、舊市政廳天文鐘等地標照片。
• 用 矩形/橢圓/多邊形/星形工具 拆解為基礎幾何體：
  - 尖塔 = 等腰三角形 + 矩形塔身
  - 圓頂 = 半圓 + 圓柱體
  - 窗戶 = 圓角矩形陣列
  - 屋頂 = 紅色梯形/平行四邊形

2. 形狀生成器快速合併

1. 將所有幾何體置於同一圖層，全選。
2. 選取 形狀生成器工具 (Shift+M)，按住 Alt 減去多餘交疊區，直接拖選合併目標區域。
3. 比 路徑查找器 更直觀、可撤銷、保留原始對象。

3. 統一視覺語言規範

屬性	標準值	說明
描邊寬度	2pt (主輪廓) / 1pt (內部細節)	保持視覺層級
圓角半徑	4px (窗戶/門) / 0px (尖塔尖銳)	區分剛性與柔性元素
配色方案	屋頂紅 #C0392B、牆面米 #F5E6C8、尖塔灰 #7F8C8D、天空藍 #3498DB	布拉格經典色調
間距網格	8px 基礎單位	確保圖標在 32px/48px/64px 尺寸下像素對齊

4. 重複元素模組化：圖案筆刷與符號

• 窗戶陣列： 單元窗戶做成 符號，配合 符號噴槍工具 (Shift+S) 快速佈置，支持壓力控制大小/密度。
• 屋頂瓦片紋理： 繪製單瓦單元 → 定義為 圖案筆刷 → 套用至屋頂路徑，自動隨路徑彎曲鋪排。
• 尖塔頂端十字架： 符號化，一鍵放置。

5. 陰影與層次：長投影扁平化風格

1. 複製建築主體合併形狀，填充深色 #2C3E50，透明度 20%，模式 正片疊底。
2. 執行 效果 → 扭曲變形 → 變換：移動水平 4px、垂直 4px、複製 15 次，形成 45° 長投影。
3. 對投影群組添加 剪切蒙版，限制在畫板範圍內。

6. 多尺寸導出規範

• 使用 資產導出面板 (Alt+Ctrl+E) 設置縮放比：1x (32px)、2x (64px)、3x (96px)、4x (128px)。
• 勾選 縮放時對齊像素網格，避免模糊邊緣。
• 導出格式：PNG (透明底)、SVG (網頁矢量)、PDF (印刷矢量)。

系列擴展建議

• 同風格繪製 埃菲爾鐵塔、比薩斜塔、悉尼歌劇院 組成「世界地標圖標集」。
• 開發 深色模式版本：背景深藍 #1A1A2E，建築主色調提亮 20%，投影改為高光邊緣。
• 制作 動態版：天文鐘指針轉動、查理大橋燈光閃爍，導出 Lottie JSON 供 App 使用。

掌握「幾何拆解 → 模組化符號 → 統一規範 → 多尺寸導出」的標準化流程，你就能高效產出風格一致、工程級可用的扁平建築圖標系列。