Yosemiteにピッタリ！Sublime Textのフラットアイコン作ってみたよ+Macアプリのアイコン変更方法｜ウェビメモ という記事を書いたのですが、せっかくなのでMacアプリのアイコンの作り方をこちらにφ(*’д’* )ﾒﾓﾒﾓします。

Macのアイコンなのでサイトのコンセプトとちょっとズレますが、まぁ遠からずってことで許してぴちょ。

Macアプリのアイコンの作り方

と、いうわけで。冒頭でもご説明した通り、Sublime Textというエディタアプリのアイコンを作ってみましたので、備忘録がてら作り方をメモしていきます。

私はふぉとしょっぱーなのでPhotoshopとSlicyを使いましたが、皆さんは各自お好きなツールでどうぞ。

用意するアイコンサイズ

全部つくる必要はなさそうですが、一応サイズの一覧です。ないサイズがあってもMacが勝手にありものを拡大縮小してくれるはず。

icon_16x16	icon_16x16.png
	icon_16x16@2x.png
icon_32x32	icon_32x32.png
	icon_32x32@2x.png
icon_128x128	icon_128x128.png
	icon_128x128@2x.png
icon_256x256	icon_256x256.png
	icon_256x256@2x.png
icon_512x512	icon_512x512.png
	icon_512x512@2x.png

Retinaで見た時にちゃんとウットリしたいので、個人的にicon_512x512@2x.png(1024px)は必須ですね。

手順

作り方は自由なので、とりあえずさっきのサイズ表を見ながらアイコンを用意しましょう。保存先はお好きな場所に『XXX.iconset』というフォルダを作ってその中に入れてください。(XXX部分はお好きな名前に変更してください)

参考までにPhotoshop+Slicyで作った時のキャプチャです。

※クリックで拡大します。

ターミナルを操って、各サイズのPNGを合体させ、1つのアイコンファイルにする

さてPNGが揃ったら、あとはそれをアイコンファイル（.icns）にするだけです。まずはターミナルを起動してください。

ターミナルを開いたら、Finderからさっき作った『XXX.iconset』の1階層上のフォルダをドラッグ＆ドロップでぶつけてやりましょう。 そのディレクトリのパスが表示されるはずです。

一度エンターキーを押したら、あとは以下の呪文を唱えるだけ。（※XXXの部分は自分でつけた名前に変更してください）

iconutil -c icns XXX.iconset

完成！

ターミナル上だと何事もなかったように思うほどそっけない感じですが、Finderを見てみるとicnsが生まれているはずです:)

• MacアプリのRetina対応アイコン(*.icns)を作成する方法 | DOTAPON Blog

作ったアイコンをアプリに設定する方法

下記の記事で3STEPの簡単な方法をご紹介しています。読んでみてください。

• Yosemiteにピッタリ！Sublime Textのフラットアイコン作ってみたよ+Macアプリのアイコン変更方法｜ウェビメモ

PageTop