2番煎じMEMO

「どこかで見たことあるよ」的な内容を中心に  Mac のことなど いろいろ

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 のアイコンの例↓)

f:id:wakabamark_mac:20170402011835j:plain

 

またpngファイルのカラープロファイルsRGB が推奨されてます。

 

 

ちなみに、僕はアイコンを描くのに Sketch を利用しています。

Sketch ではpngファイルに出力すると72dpiで書き出されます。

僕は1024pxで描いて、それを「@2x」で2048px-72dpiのpngファイルに出力し、それを1024px-144dpiに縮小してアイコンの基本の画像としています。

 

それと Sketch で書き出したpngファイルのカラープロファイルは「一般RGB」です。これを sRGB に変更すると、かなり見た目の色が変わってしまうので原則「一般RGB」のまま使用しています。(強制ではなく「推奨」なので)

(一般RGB から sRGB に変更した画像サンプル↓)

f:id:wakabamark_mac:20170402023932j:plain

 

 

iconset フォルダを作成する

用意した画像ファイル群を1つのフォルダにまとめ、そのフォルダに拡張子「.iconset」を付け加えます。

このフォルダは QuickLook でアイコンファイルのように確認できます。

f:id:wakabamark_mac:20170402025436j:plain

 

 

 

 

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 

Macアプリの.icnsを作るときのメモ - Qiita

macOS Human Interface Guidelines: Designing App Icons