如何自定义 Subway 图标：源文件编辑与颜色调整
Subway 是一套包含 306 个像素级完美图标的开源项目，专为 iOS、Apple Watch、Windows 和 BlackBerry 10 等平台优化。本教程将介绍 Subway 图标的自定义方法，从源文件编辑到颜色调整，让你的应用界面焕发独特个性。
准备工作：获取 Subway 图标项目
首先需要将 Subway 项目克隆到本地。
Subway 项目提供了多种格式的源文件，适用于不同的编辑需求：
- Adobe Illustrator 源文件
- Adobe Photoshop 源文件
- Sketch 源文件
Subway 图标概览
Subway 图标采用简约设计风格，覆盖了从箭头、通讯到工具等多种类别，适用于各类应用场景。
图 1：Subway 图标集合展示，包含 306 个像素级完美图标
选择合适的编辑工具
根据你熟悉的设计软件选择对应的源文件进行编辑：
- Adobe Illustrator：适合编辑矢量图标，支持无损缩放
- 主文件：Adobe Illustrator/Subway_Icons.ai
- iOS7 风格图标：Adobe Illustrator/Subway_iOS7_Style_Icons.ai
- Adobe Photoshop：适合像素级编辑和效果处理
- 包含多种尺寸模板，如：Adobe Photoshop/Subway_60x60_iOS_Retina.psd
- Sketch：适合 iOS 和 macOS 应用图标设计
- 文件路径：Sketch/Subway_iOS7_Style_Retina.sketch
图 2：Subway 图标设计模板，展示了网格系统和多种尺寸规范
基础颜色调整教程
使用 Adobe Illustrator 调整颜色
- 打开 Adobe Illustrator/Subway_Icons.ai
- 在图层面板中选择需要修改的图标组
- 使用'选择工具'选中图标
- 在'颜色'面板中调整填充色和描边色
- 保存为新的 SVG 文件或导出为所需格式
使用 SVG 文件直接编辑
对于简单的颜色修改，也可以直接编辑 SVG 文件：
- 选择 SVG/目录下的目标图标
- 用文本编辑器打开 SVG 文件
- 查找并修改 fill 和 stroke 属性值
- 保存修改并预览效果
图 3：Subway 图标颜色变体示例，展示不同配色方案
高级自定义：修改图标形状
如果你想进一步修改图标形状：
- 在 Illustrator 或 Sketch 中打开源文件
- 使用钢笔工具或形状工具调整图标路径
- 保持图标网格对齐，确保像素完美
- 测试不同尺寸下的显示效果
Subway 图标采用模块化设计，每个图标都基于网格系统创建，确保在各种设备上都能清晰显示。
图 4：移动设备上的 Subway 图标效果展示
导出与应用自定义图标
完成编辑后，根据目标平台导出相应格式：
- iOS 平台：
- 非 Retina：iOS/Non-Retina 30x30/
- Retina：iOS/Retina 60x60/
- iOS7 风格：iOS 7 Style/
- Windows 平台：
- Windows 8：Windows 8/
- Windows Phone：Windows Phone 7 & 8/
- BlackBerry 平台：
- 路径：BlackBerry 10/
图 5：应用界面中的 Subway 图标使用示例
图标使用建议
- 保持图标风格一致性，避免混合不同设计语言
- 根据背景颜色选择合适的图标颜色变体
- 优先使用矢量格式 (SVG) 以确保缩放质量
- 测试图标在不同尺寸和分辨率下的显示效果
通过本教程，你已经掌握了 Subway 图标的自定义方法。无论是简单的颜色调整还是复杂的形状修改，Subway 提供的源文件都能满足你的需求，让你的应用界面更加个性化和专业。
