SketchでMacアプリのアイコンを作成する

f:id:tadaken3:20180213235024p:plain こんにちは!
タダケン(@tadaken3)です。

最近、electron + ReactでMarkdown エディタ（Macアプリ）を作っています。 Reactの勉強用に作っているのですが、オリジナルのアイコンがあった方が気分が高まりますよね。

今回はSketchを使ってMacアプリのアイコンの作り方をまとめてみました。

Sketchでアイコン用の素材を用意する

アイコンの画像はSketchで作成します。 512 x 512pxのアートボードを用意し、そこに好きなようにアイコンを作成します。とくに意味はありませんが、富士山を描いてみました。¹

f:id:tadaken3:20180213225747p:plain

アイコンを作成するには以下のサイズの画像を用意する必要があります。

ちょっと大変そうですね。でも安心してください。

Sketchでは画像サイズを変更してexportする機能があります。

サイズを2xとすると、元のサイズの2倍に、256wと指定するとサイズを256pxでexportされます。ファイル出力時にPrefix/Suffixを指定することもできます。プリセットに登録すれば、これらの設定を再利用することも可能です。

実際の出力結果はこのとおりです。「XXXX.iconset」というディレクトリに保存します。XXXXの部分はアプリ名などを入れてください。

f:id:tadaken3:20180213230929p:plain

さてPNGが揃ったら、あとはそれをアイコンファイル（.icns）にするだけです。

まずは、ターミナルを起動します。

Macにはicon作成用のiconutilというコマンドが用意されているので、先程画像を入れたディレクトリに対して、以下のコマンドを実行します。

$ iconutil -c icns XXX.iconset

すると、「XXX.icns」というファイルが作成されます。こちらがMacアプリのアイコン素材になります。 f:id:tadaken3:20180213231631p:plain

アプリをパッケージングするのにはelectron-packagerを使用します。その際に、iconオプションでicon.icnsファイルの場所を指定するとアプリのアイコンがパッケージングされます。

$ electron-packager . sample --platform=darwin --arch=x64  --icon=images/icon.icns

一番下が今回作成したアイコンです。

f:id:tadaken3:20180213232522p:plain

SketchでMacアプリのアイコン画像を作成する方法をお伝えしました。

オリジナルのアイコンがあるとそれだけでテンションが上りますね。ちなみに作成しているMarkdown Editorはこちらです。プルリクお待ちしております。

本ブログではプログラミング、アプリ開発についてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。