Relax and Enjoy Programming

楽しみながらラクに成果を上げる仕組みを考える。

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

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

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

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

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

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

f:id:tadaken3:20180213225747p:plain

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

  • icon_512x512@2x.png (1024px)
  • icon_512x512.png
  • icon_256x256@2x.png
  • icon_256x256.png
  • icon_128x128@2x.png
  • icon_128x128.png
  • icon_32x32@2x.png
  • icon_32x32.png
  • icon_16x16@2x.png
  • icon_16x16.png

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

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

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

f:id:tadaken3:20180213230328p:plain
exportの設定

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

f:id:tadaken3:20180213230929p:plain

各サイズのPNGを合体させ、1つのアイコンファイルにする

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

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

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

$ iconutil -c icns XXX.iconset

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

electronのアプリにアイコン画像を設定する

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

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

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

f:id:tadaken3:20180213232522p:plain

まとめ

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

  • Sketchで512 x 512pxでアイコン画像を作成する
  • Sketchのexport機能で必要な画像サイズを書き出す
  • Macのiconutilコマンドで一つにまとめる

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

github.com

読者登録をお願いします

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


  1. 本職がデザイナーではない上、Sketchを使い始めたばかりなので、デザインセンスはご了承ください。