SketchでMacアプリのアイコンを作成する2018-02-13SketchでMacアプリのアイコンを作成するSketchこんにちは!タダケン(@tadaken3)です。エディタ(Macアプリ)を作っています。Reactの勉強用に作っているのですが、オリジナルのアイコンがあった方が気分が高まりますよね。今回はSketchを使ってMacアプリのアイコンの作り方をまとめてみました。Sketchでアイコン用の素材を用意する各サイズのPNGを合体させ、1つのアイコンファイルにするelectronのアプリにアイコン画像を設定するまとめ読者登録をお願いしますSketchでアイコン用の素材を用意するアイコンの画像はSketchで作成します。512pxのアートボードを用意し、そこに好きなようにアイコンを作成します。意味はありませんが、富士山を描いてみました。1アイコンを作成するには以下のサイズの画像を用意する必要があります。(1024px)icon_512x512.pngicon_256x256@2x.pngicon_256x256.pngicon_128x128@2x.pngicon_128x128.pngicon_32x32@2x.pngicon_32x32.pngicon_16x16@2x.pngicon_16x16.pngちょっと大変そうですね。Sketchでは画像サイズを変更してexportする機能があります。サイズを2xとすると、元のサイズの2倍に、256wと指定するとサイズを256pxでexportされます。ファイル出力時にPrefix/Suffixを指定することもできます。プリセットに登録すれば、これらの設定を再利用することも可能です。実際の出力結果はこのとおりです。「XXXX.iconset」というディレクトリに保存します。XXXXの部分はアプリ名などを入れてください。各サイズのPNGを合体させ、1つのアイコンファイルにするさてPNGが揃ったら、あとはそれをアイコンファイル(.icns)にするだけです。ターミナルを起動します。Macにはicon作成用のiconutilというコマンドが用意されているので、先程画像を入れたディレクトリに対して、以下のコマンドを実行します。XXX.iconsetすると、「XXX.icns」というファイルが作成されます。こちらがMacアプリのアイコン素材になります。electronのアプリにアイコン画像を設定するアプリをパッケージングするのにはelectron-packagerを使用します。その際に、iconオプションでicon.icnsファイルの場所を指定するとアプリのアイコンがパッケージングされます。--icon=images/icon.icns一番下が今回作成したアイコンです。まとめSketchでMacアプリのアイコン画像を作成する方法をお伝えしました。512pxでアイコン画像を作成するSketchのexport機能で必要な画像サイズを書き出すMacのiconutilコマンドで一つにまとめるオリジナルのアイコンがあるとそれだけでテンションが上りますね。Editorはこちらです。プルリクお待ちしております。github.com読者登録をお願いします本ブログではプログラミング、アプリ開発についてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。一緒にプログラミングを学びましょう。本職がデザイナーではない上、Sketchを使い始めたばかりなので、デザインセンスはご了承ください。23:53SketchでMacアプリのアイコンを作成する関連記事2018-12-312018年のタダケンをふりかえる2018年のふりかえりをしました。今回はブログ更新するためにボクが実践しているいくつかのテク...2018-09-26Mackerelで部屋のコンディションを監視するサーバー管理・監視サービスのMackerelを使って、部屋の温度・...2018-01-14Reactを学ぶメリットとReactの開発環境を簡単に構築する方法フロントエンド初心者がReactを学習していこうと思っています。はてなブログProとある会社のデータサイエンティストです。