icnsファイルの作り方(Mac)
高解像度のRetinaディスプレイ登場以降、Mac で使われるアイコンの作り方は以前より複雑になり、用意する画像も多くなって面倒になりました。
僕はアイコンの元となる icnsファイルの作り方をよく忘れるので、自分なりの見解も含めてメモしておきます。
アイコン用の画像ファイルを用意する
下の表のように、アイコン用の画像ファイル(png)を各サイズ、それぞれのファイル名にして用意します。(すべてのサイズを用意しなくても icnsファイル は一応作れる)
( macOS Human Interface Guidelines: Designing App Icons より参考)
ファイル名+拡張子 | 画像サイズ(pixel) | dpi |
---|---|---|
icon_512x512@2x.png | 1024 × 1024 | 144 |
icon_512x512.png | 512 × 512 | 72 |
icon_256x256@2x.png | 512 × 512 | 144 |
icon_256x256.png | 256 × 256 | 72 |
icon_128x128@2x.png | 256 × 256 | 144 |
icon_128x128.png | 128 × 128 | 72 |
icon_32x32@2x.png | 64 × 64 | 144 |
icon_32x32.png | 32 × 32 | 72 |
icon_16x16@2x.png | 32 × 32 | 144 |
icon_16x16.png | 16 × 16 | 72 |
ファイル名の後ろに「@2x」が付くものはRetina用の画像。
ガイドラインにはdpiの指示はないけど、Apple純正のアプリケーションのアイコンの仕様では @2xが 144dpi、普通が 72dpi になっています。
(iTunes のアイコンの例↓)
またpngファイルのカラープロファイルは sRGB が推奨されてます。
ちなみに、僕はアイコンを描くのに Sketch を利用しています。
Sketch ではpngファイルに出力すると72dpiで書き出されます。
僕は1024pxで描いて、それを「@2x」で2048px-72dpiのpngファイルに出力し、それを1024px-144dpiに縮小してアイコンの基本の画像としています。
それと Sketch で書き出したpngファイルのカラープロファイルは「一般RGB」です。これを sRGB に変更すると、かなり見た目の色が変わってしまうので原則「一般RGB」のまま使用しています。(強制ではなく「推奨」なので)
(一般RGB から sRGB に変更した画像サンプル↓)
iconset フォルダを作成する
用意した画像ファイル群を1つのフォルダにまとめ、そのフォルダに拡張子「.iconset」を付け加えます。
このフォルダは QuickLook でアイコンファイルのように確認できます。
iconutil コマンドで変換
目的の iconsetフォルダを内包するディレクトリに cd
して iconutil
コマンドで icnsファイルに変換します。
例えば「ピクチャ」フォルダに存在する「hoge.iconset」を icns ファイルに変換するならば、ターミナルなどで下のようにコマンドを実行します。
$ cd ~/Pictures
$ iconutil -c icns hoge.iconset
これで出来上がり。
もし、icnsファイル → iconsetフォルダ に変換するなら、下のように実行します。
$ iconutil -c iconset hoge.icns
参考
Optimizing for High Resolution
macOS Human Interface Guidelines: Designing App Icons