如何自定义 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/

