把 PNG 格式的图片转换为 ICNS 格式的图标

ICNS 是苹果公司在 Mac OS X 上采用的一种图标格式。它支持 16×16、32×32、48×48、64x64、128×128、256×256、512×512 以及 1024×1024 等多种尺寸的图标。因为它是把多种尺寸的图标打包在一起,所以可以在不同的环境中选择最合适的图标进行展示,从而达到最佳效果。

我们最常见的图片格式是 JPEG 和 PNG。其中,PNG 支持透明背景,这对一个好的图标来说非常重要。

下面的内容就是讲如何把 JPEG 或 PNG 格式的图片转换成 Mac OS X 所用的 ICNS 格式。

要把 JPEG 或 PNG(下面只说 PNG)格式的图片转换成 ICNS 格式,我们需要用到两个小工具:iconutil 和 sips。它们都是命令行工具,不过用起来非常简单。

首先,我们要准备一张 PNG 格式的图片,最好是 1024x1024 像素或更高的。我们暂且把这张图片命名为 pic.png 。

  1. 创建临时目录

    $ mkdir tmp.iconset
    

    这样就创建了一个名为 tmp.iconset 的临时目录。

    注意:这个目录必须以 .iconset 结尾。

  2. 把图片转成各种尺寸

    $ sips -z 16 16     pic.png --out tmp.iconset/icon_16x16.png
    $ sips -z 32 32     pic.png --out tmp.iconset/[email protected]
    $ sips -z 32 32     pic.png --out tmp.iconset/icon_32x32.png
    $ sips -z 64 64     pic.png --out tmp.iconset/[email protected]
    $ sips -z 128 128   pic.png --out tmp.iconset/icon_128x128.png
    $ sips -z 256 256   pic.png --out tmp.iconset/[email protected]
    $ sips -z 256 256   pic.png --out tmp.iconset/icon_256x256.png
    $ sips -z 512 512   pic.png --out tmp.iconset/[email protected]
    $ sips -z 512 512   pic.png --out tmp.iconset/icon_512x512.png
    $ sips -z 512 512   pic.png --out tmp.iconset/[email protected]
    

    这样在刚才的临时目录 tmp.iconset 里就有了十个尺寸不同的图片文件。 这些尺寸并不是必须的。 如果你的源图片尺寸并不大,你也可以只生成 16x16 或 32x32 像素的。 如果你觉得某些尺寸(比如 16x16 像素)的图标不会被用到,也可以不生成那些尺寸的图片。 但至少得有一种尺寸。

    注意:以上生成的图片的名称格式也是非常严格的。必须是上面的格式,否则 iconutil 会抱怨说找不到相应的图片。其中,含有 @2x 的图片是专供 Retina 屏幕使用的。

  3. 把 iconset 转换成 icns

    $ iconutil -c icns tmp.iconset -o Icon.icns
    

    这样,我们就得到了我们想要的 ICNS 格式的 Icon.icns

    如果第二步中你并没有生成所有尺寸的图片, iconutil 可能会发出类似下面这样的抱怨:

    warning: No image found for point size: 16 at scale: 1.

    这一般没什么大问题,不妨碍我们使用生成的 Icon.icns,只是在某些情况下图标显示的并不那么完美。

就这么多,三步即可把一张 PNG 格式的图片转换成 ICNS 格式的图标。

以下的内容可能并不是所有人都感兴趣。

  • 把 icns 转换成 iconset

    有时,我们有一个 ICNS 格式的图标,我们想把它转换成 PNG 格式的图片。iconutil 同样能胜任此工作。其实,iconutil 本来就是把 iconset 和 icns 进行相互转换的工具。其中,iconset 就是多个不同尺寸的 PNG 图片的集合,其本质就是一个含有多个 PNG 图片的目录。

    $ iconutil -c iconset Icon.icns -o my.iconset
    

    这样,在 my.iconset 目录下就能找到我们想要的 PNG 格式的图片了。

  • 如何用 Sketch 3 来创作 ICNS 格式的图标

    Sketch 3 是一个矢量图工具。它的一个很重要的应用领域就是制作图标。可惜的是,它并没有直接支持 ICNS 格式,也就是不能把创作好的图标直接导出成 ICNS 格式的文件。

    Sketch 3 是可以把作品导出为 PNG 格式的图片的。这样,我们就可以用上面提到的方便把 PNG 格式的图片转换为 ICNS 格式的图标了。

    Sketch 3 还为制作 Mac App 图标的设计师提供了一个模板。设计师们可以通过菜单中 File -> New From Template -> Mac App Icon 来开始一次创作。此时,Sketch 3 会自动创建几个不同尺寸的画板。我们在这些画板上创作完图标后,点击右上角的导出按钮,默认是把各个尺寸的图标都导出为 PNG 格式的图片文件。此时,我们应该选择一个以 .iconset 结尾的目录,并把这些 PNG 文件都导出到这个目录中。最后用上述第三节中的命令把这些 PNG 文件转换成 ICNS 格式的图标。

    另外,一个名为 Generate ICNSSketch 3 插件为我们做了这些工作。具体安装使用方法可以参考该插件的说明。不过,目前该插件好像并不成熟,在我这里并未成功过,并且还出现过导致 Sketch 3 崩溃的情况。

Creative Commons License Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 4.0 International license .