在 Mac 上制作分层应用图标
创建四个可编辑的深度组,调整玻璃材质,验证已启用的目标,并在 Assets for Xcode 中保存分层图标项目。
- 完成效果
- 保存的 MyIcon 项目包含四个可编辑的组:Orange Plate、Purple Plate、Blue Plate 和 Paper Plane。
- 准备工作
- 在 Mac 上安装 Assets for Xcode。
- 准备四个深度组的图像素材:底层、两块彩色板和前景符号。
- 准备一个可写入的位置,用来保存可编辑的 MyIcon 项目。

制作分层应用图标时,不要过早将图稿合并为一张图片。本指南按照 Assets for Xcode 在 App Store 的首张截图,制作由四个深度组组成的纸飞机图标:导入原始图像,调整玻璃材质,设置导出目标,验证图标并保存可编辑的文档。
1.导入图标的原始图像
打开 Assets for Xcode,将第一张原始图像拖入欢迎窗口。这里也有 Open Project 和 Create New Project;本例把底层图稿拖到欢迎区域,开始创建可编辑文档。

Assets for Xcode 欢迎窗口,包含 Open Project 和 Create New Project 按钮。 2.导入并命名底层色板
导入第一张图像后,在 Layers 中选中新建的组并将其命名为 Orange Plate。图标预览会显示橙色到粉色的底层图像,它是独立的可编辑深度组。

可编辑图标中包含 Orange Plate 深度组,以及橙色到粉色的图稿。 3.添加紫色色板
选择画布根节点,将第二张原始图像导入为另一个深度组,并命名为 Purple Plate。在 Layers 中,Purple Plate 和 Orange Plate 仍是两个独立的组。

Layers 列表和图标预览中,Purple Plate 已添加在 Orange Plate 上方。 4.叠加蓝色色板
再次选择画布根节点,导入第三张原始图像,并将组命名为 Blue Plate。检查预览,确认蓝色图稿位于紫色和橙色色板上方。

Blue Plate 作为第三个可编辑深度组,位于紫色和橙色色板上方。 5.完成纸飞机图标
将纸飞机的三个 SVG 组件一起导入为一个深度组,命名为 Paper Plane,并将文档命名为 MyIcon。现在 Layers 中有四个可以分别编辑的组。

Paper Plane 位于三块彩色色板上方,MyIcon 中包含四个已命名的深度组。 6.让纸飞机保持不透明
选择 Paper Plane,打开材质检查器,在 Material (Glass) 下关闭 Glass。前景纸飞机就会变成清晰、不透明的白色形状,而非半透明玻璃。

材质检查器显示所选 Paper Plane 组的 Glass 已关闭。 7.为蓝色组设置 Clear Glass
选择 Blue Plate,切换到 Elevation,在材质检查器中把 Recipe 设为 Clear Glass。确认 Glass 已开启,并查看各组在深度方向的叠放效果。

包含四个图标深度组的 Elevation 预览,Blue Plate 已启用 Clear Glass。 8.启用所需的平台目标
启用 Apple Watch,并在已有的 Apple 目标中添加 Android Adaptive Icon、Windows App Icon 和 Icon Composer。检查侧边栏和预览条是否显示要验证的目标。

目标列表包含 Apple Watch、Android Adaptive Icon、Windows App Icon 和 Icon Composer。 9.验证已启用的目标
运行图标验证并查看底部状态栏。本例显示 Apple ready、Android ready 和 Windows ready,所有必需尺寸均已生成。保存前先解决目标中的任何问题。

已启用目标的验证状态显示 Apple ready、Android ready 和 Windows ready。 10.保存并检查可编辑项目
返回 Design,选择文档根节点以清除选中边框,然后将项目保存为 MyIcon.braveicon。标题 MyIcon、四个已命名组和 Saved 提示确认项目已保存。导出最终平台文件是单独的流程。

Design 视图中的完整 MyIcon,具有四个可编辑组和 Saved 状态。
完成最后一步后
纸飞机保持不透明,蓝色图层使用 Clear Glass,启用的 Apple、Android 和 Windows 目标均通过验证。保存项目不会导出各平台的最终文件。
实用提示
让每块色板在 Layers 中保持独立的组,这样无需合并图像就能修改。
选择玻璃配方前,先在 Elevation 中查看深度顺序。
保存图标文档前,检查所有已启用目标的验证状态。
注意本指南只保存可编辑的图标项目,不会导出 AppIcon.appiconset 或其他平台的最终文件。
注意如果验证后有目标尚未就绪,请先修复问题再导出。