Astrocean
漫画:对 Mac 图标产生好奇,想看看小小图案背后的制作方式。

GetIcon

想看看 macOS 官方应用的漂亮图标,到底是怎么做的

于是做了 GetIcon ,反向解析出 app 的元素图标文件

只有 PNG,看不到图标是怎么构成的。

只有 PNG,怎么看图标的原始构成?

App 默认打包时不带 .icon 工程,PNG 也看不到原始构成。

  1. 1. 拖入 App 或 Assets.car

    自动识别其中的图标资源。

    GetIcon 的导入界面,等待拖入 App 或 Assets.car。
  2. 2. 勾选图标,导出 .icon

    重建图层、素材和可恢复的外观设置;部分原始设置可能无法完整恢复。

    GetIcon 识别出的 Safari 图标,以及选择图标并导出的界面。
拆开图层,才看懂那些漂亮的细节。

这些漂亮的细节,是怎么叠出来的?

打开工程,看看素材、图层和光影。

  1. 3. 用 Icon Composer 打开

    查看图层与素材,调整外观,继续研究。

    Safari 图标工程在 Icon Composer 中打开,可查看分层素材和外观设置。
看懂官方做法,再设计自己的图标。

看懂了,我也想试着做一个!

借鉴官方的图层和光影,设计自己的 icon。

从一个漂亮图标,开始自己的灵感。