北京时间 11 月 13 日,苹果在经历了服务器崩溃之后终于推送了姗姗来迟的 macOS Big Sur 正式版,开启了 macOS 11 的时代。在视觉上,新系统最大的特色或许是苹果重新设计的应用图标。目前,苹果全家桶已经全部采用了类似 iOS 的圆角矩形图标,在 Material Design 2.0 之后,又一次压暗了不规则图标的前途。这一设计的优势自然是可以让整体视觉效果更加统一,但这种视觉统一性极其依赖于第三方应用的适配,如果一个不规则图标混入了满屏的圆角矩形当中,便会显得尤其扎眼。可惜,并非所有第三方应用都像 IINA 这么良心——早早更换了新图标,还设计得比 macOS 自带应用更加优美。所以,为了实现题图的效果,我们便需要手动为一批第三方应用更换 Big Sur 风格的圆角矩形图标。
下面介绍三种寻找和更换图标的方法。
macosicons.com
首先要推荐的是 macosicons.com, 网站上目前有超过 1000 枚 Big Sur 风格的图标,全都为 icns 格式,并且完全免费,基本上覆盖了大多数主流应用。
关于如何更改 macOS 应用图标,可以参考这篇文章。

macosicons 其实可以说是一个社区,其中的图标来自于多位贡献者,因此质量有些参差不齐。有的十分精美(比如下面这枚由 Octaviotti 设计的 Be Focused 图标,可以说深得 Big Sur 的精髓),有些则略显粗糙,但总体都相当良心。同时,你也可以在这里下载通用模版(提供 Sketch, Figma, Illustrator 和 Photoshop 四种格式),亲自动手绘制图标自用或是上传回报社区。

IconSur(谨慎使用)
IconSur 是 GitHub 上一个自动生成 Big Sur 图标的命令行工具。它可以通过应用名自动搜索相应的 iOS 应用,并将后者的图标替换到 macOS 应用上,可以说是充分利用了 Big Sur 图标和 iOS 使用了相同模版这一特点。同时,IconSur 也允许用户自定义图标的图片或是背景颜色。
从 GitHub 上下载了 IconSur 之后,需要在终端里使用 chmod +x /应用地址
命令将其变为可执行文件,再将其添加到路径当中(具体操作为先用 sudo nano /etc/paths
命令打开 paths,再把 IconSur 的地址添加到文件的最后一行)。
完成上述设置之后,打开 IconSur,运行(这里以 Microsoft Word 为例)
sudo iconsur set /Applications/Microsoft\ Word.app/
sudo iconsur cache
便可以成功更改图标。
需要注意的是,整个过程中用到了 sudo 命令,而且该项目的 GitHub 页面上有用户报告了使用 IconSur 导致系统无法响应的问题,请慎重使用。
Photoshop
最后,最直接也是自定义程度最高的方法当然是自己动手重绘。这里以使用 Photoshop 绘制微信图标为例,简单介绍一下操作思路。可以发现,苹果在将扁平图标轻微立体化时使用了两种方案,一种是像 App Store 和 Messages 一样的「浮雕」效果,另一种是如 Books 和 Podcasts 般的「镂空」效果。这里我选择用「镂空」来处理微信图标。

首先从 macosicons.com 下载 psd 模版文件,里面已经设置好了阴影和圆角大小,我们只需将微信画上去即可。对于微信这样很容易找到图标素材的应用来说,自己动手其实并不复杂。我们先在模版里画出一个渐变的绿色圆角矩形作为背景。接着谷歌「WeChat png」便能轻易下载到白色的微信 logo,再给这个 logo 图层加上「内阴影」的效果并调整混合模式和几个主要参数,即可获得我们想要的镂空效果。


最后,将绘制好的图标导出为 png 格式,通过诸如 anyconv 之类的在线工具转为 icns 文件,就大功告成了。

注:题图原图来自 Unsplash,摄影师 Jessy Smith,笔者做了改动。