跳至主要內容
更新Watermark 2.1(Mac)。Watermark 2.1(Mac)。更新內容
BraveCL

在 Mac 製作多圖層 App 圖示

建立四組可編輯的深度圖層、調整玻璃材質、驗證啟用的輸出目標,並在 Assets for Xcode 儲存分層圖示專案。

10 個步驟更新於 2026年11月12日取得 Assets for Xcode
完成成果
儲存的 MyIcon 專案包含四個可編輯群組:Orange Plate、Purple Plate、Blue Plate 與 Paper Plane。
準備事項
  • 在 Mac 上安裝 Assets for Xcode。
  • 準備四組深度圖層的圖示素材:底板、兩片彩色板與前景符號。
  • 選好可寫入的位置,以儲存可編輯的 MyIcon 專案。
A completed layered paper-plane app icon saved in Assets for Xcode, with four editable groups and validated targets.

製作多圖層 App 圖示時,無須太早把所有素材合併成平面圖片。本教學以 Assets for Xcode 在 App Store 的第一張截圖為例,重現由四組深度圖層構成的紙飛機圖示:加入來源圖片、調整玻璃材質、設定匯出目標、驗證圖示,最後儲存可編輯的文件。

  1. 1.匯入圖示的來源圖片

    開啟 Assets for Xcode,將第一張來源圖片拖進歡迎視窗。畫面也提供 Open Project 和 Create New Project;此範例把底板素材拖到歡迎區域,開始建立可編輯文件。

    Assets for Xcode 歡迎視窗,內有 Open Project 與 Create New Project 按鈕。
    Assets for Xcode 歡迎視窗,內有 Open Project 與 Create New Project 按鈕。
  2. 2.匯入底板並為群組命名

    匯入第一張圖片後,在 Layers 選取新群組,命名為 Orange Plate。圖示預覽會顯示橘色漸層至粉紅色的底板,並保留為獨立可編輯的深度群組。

    可編輯圖示含 Orange Plate 深度群組與橘粉漸層圖稿。
    可編輯圖示含 Orange Plate 深度群組與橘粉漸層圖稿。
  3. 3.加入紫色色板

    選取畫布的根節點,把第二張來源圖片匯入為另一個深度群組,並命名為 Purple Plate。在 Layers 裡,Purple Plate 與 Orange Plate 仍是分開的群組。

    在 Layers 清單及圖示預覽中,Purple Plate 已加在 Orange Plate 上方。
    在 Layers 清單及圖示預覽中,Purple Plate 已加在 Orange Plate 上方。
  4. 4.疊上藍色色板

    再次選取畫布的根節點,匯入第三張來源圖片,將群組命名為 Blue Plate。查看預覽,確認藍色圖稿位於紫色和橘色色板上方。

    Blue Plate 是第三組可編輯深度圖層,位於紫色與橘色色板上方。
    Blue Plate 是第三組可編輯深度圖層,位於紫色與橘色色板上方。
  5. 5.完成紙飛機圖示

    把紙飛機的三個 SVG 元件一起匯入為單一深度群組,命名為 Paper Plane,並將文件命名為 MyIcon。現在 Layers 內有四組可各自編輯的群組。

    Paper Plane 疊在三片彩色色板上,MyIcon 顯示四個已命名的深度群組。
    Paper Plane 疊在三片彩色色板上,MyIcon 顯示四個已命名的深度群組。
  6. 6.讓紙飛機維持不透明

    選取 Paper Plane,打開材質檢閱器,在 Material (Glass) 關閉 Glass。前景的紙飛機會呈現清晰、不透明的白色外觀,而不是半透明玻璃。

    材質檢閱器顯示選取 Paper Plane 群組的 Glass 已關閉。
    材質檢閱器顯示選取 Paper Plane 群組的 Glass 已關閉。
  7. 7.為藍色群組設定 Clear Glass

    選取 Blue Plate,切換至 Elevation,在材質檢閱器中將 Recipe 設為 Clear Glass。確認 Glass 已開啟,並檢視各群組在深度方向的堆疊方式。

    四組圖示深度圖層的 Elevation 預覽,Blue Plate 已開啟 Clear Glass。
    四組圖示深度圖層的 Elevation 預覽,Blue Plate 已開啟 Clear Glass。
  8. 8.啟用需要的平台目標

    啟用 Apple Watch,並在既有 Apple 目標之外加入 Android Adaptive Icon、Windows App Icon 與 Icon Composer。確認側邊欄和預覽列顯示了預計驗證的所有目標。

    目標清單包含 Apple Watch、Android Adaptive Icon、Windows App Icon 與 Icon Composer。
    目標清單包含 Apple Watch、Android Adaptive Icon、Windows App Icon 與 Icon Composer。
  9. 9.驗證已啟用的目標

    執行圖示驗證,查看底部狀態列。此範例會顯示 Apple ready、Android ready 與 Windows ready,所有必要尺寸也已產生。儲存前請先修正目標的任何問題。

    啟用目標的驗證狀態顯示 Apple ready、Android ready 與 Windows ready。
    啟用目標的驗證狀態顯示 Apple ready、Android ready 與 Windows ready。
  10. 10.儲存並檢查可編輯專案

    返回 Design,選取文件根節點以清除選取框,再將專案儲存為 MyIcon.braveicon。標題 MyIcon、四個已命名群組以及 Saved 指示會確認專案已儲存。匯出各平台的最終檔案是另一個操作流程。

    Design 畫面中的完成版 MyIcon,具有四個可編輯群組和 Saved 狀態。
    Design 畫面中的完成版 MyIcon,具有四個可編輯群組和 Saved 狀態。

完成最後一步後

紙飛機保持不透明,藍色圖層使用 Clear Glass,啟用的 Apple、Android、Windows 目標都通過驗證。單純儲存專案不會匯出各平台的最終檔案。

實用提示

  • 讓每片色板在 Layers 內保有獨立群組,就能在不合併圖層的情況下修改。

  • 挑選玻璃配方之前,先在 Elevation 檢查圖層的深度順序。

  • 儲存圖示文件之前,請逐一確認已啟用目標的驗證狀態。

  • 注意此教學只會儲存可編輯的圖示專案,不會匯出 AppIcon.appiconset 或其他平台的最終檔案。

  • 注意若驗證後有目標尚未就緒,請先修正問題,再進行匯出。