Retina Display時代のアイコン作製法

昔はアプリケーションのアイコンと言えば、ResEditやアイコン専用のイメージエディタを使ってポチポチとドットを打って作っていたものだが、もう、いまどきそんなやり方は通用しない。Retina Display対応アプリケーションの最大アイコンサイズは1024x1024ピクセル、もはやアイコンじゃないやろそれ、な大きさだ。

巨大アイコンを含む複数サイズのイメージを用意しなくてはならない昨今、Adobe Illustratorのようなベクター系グラフィックスツールや3Dソフトで元になるデータを作成し、そこから様々なサイズにラスタライズしておいて、Adobe Photoshopで最終イメージに仕上げる、みたいな手順をふまないと、とてもまともなiconは作れない。

こんなんプログラマーの仕事じゃないよ。デザイナーさんよろしくである。

でもって、デザイナーさんに作ってもらった画像ファイルからMac OS Xアプリケーション・アイコン(.icns)を作成する方法。

ついでにWindows用のアイコン(.ico)の作り方もメモしておく。

Mac用アイコンの作り方

まず、iconsetという拡張子を付けたフォルダを作成して、その中にアイコンの元になるPNGイメージ画像を格納する。ここではフォルダ名をapplication.iconsetとする。

中身のイメージファイルには一定のルールに従って名前をつける。icon_<イメージのサイズ>.pngのようにし、Retina Display用のイメージには@2xという目印を付ける。

icon_16x16.png, icon_16x16@2x.png, icon_32x32.png, icon_32x32@2x.png, icon_128x128.png, icon_128x128@2x.png, icon_256x256.png, icon_256x256@2x.png, icon_512x512.png, icon_512x512@2x.png の計10個のイメージを準備する。

ほんでもって、iconutilコマンドを使用してアイコンセットをアイコンファイルに変換する。

$ iconutil -c icns application.iconset

これでアイコンファイルapplications.icnsができあがる。

Windows用アイコンの作り方

Windows用のアイコンは、GIMPを使って作成するとよかろう。GIMP 2.8の場合、次のようにする。

1. 256x256pxの新規イメージを作成する。
2. 背景レイヤーを削除する。
3. 「ファイル」＞「レイヤーとして開く…」メニューで各サイズ(16x16, 32x32, 48x48, 256x256)のPNGファイルを読み込む。
4. 「ファイル」＞「エクスポート...」メニューでicoファイル形式を選んで出力する。

※ 48x48pxのアイコンはMacでは使われないサイズなのでWindows専用に作っておく。