3.0 KiB
title | date |
---|---|
Create .icns from .sketch | 2015-03-10 09:00:00 +09:00 |
Gulpをつかって .sketch から .icns を生成するために、gulp-sketch の出力結果を.icnsへ変換する gulp-iconutil というプラグインを作りました。
はじめに
.icns を作るには様々なサイズのアイコン画像を格納した iconset をつくり、それを iconutil
に渡します。ここで面倒なのは iconset です。
iconset の作成には16×16 ... 512×512の6種類のサイズのアイコンと、さらにそれぞれのRetina用のアイコンも加えて、計12種類ものサイズの画像が必要です。
唯一の救いは、最大サイズの画像だけ用意しておけば、不足している小さいサイズの画像はiconutil
が自動で生成するということでしょう。
今回作った gulp-iconutil は、Gulpからこのiconutil
コマンドへの橋渡しをしてくれます。
アイコンをデザインする
Sketch上に512×512サイズのアートボードを作成し、アプリのアイコンをデザインします。
Dock上でアイコンの見栄えをチェックするために、sketch-dockpreviewを使っています。これは本当に便利なプラグインです。
.sketch から .icns へ
.sketchからiconsetを作成するために、gulp-sketch を、そして iconset から .icns へ変換するために今回作った gulp-iconutil を使います。npm からインストール出来ます。
Gulpタスクは以下のように書きます。
gulp = require 'gulp'
sketch = require 'gulp-sketch'
iconutil = require 'gulp-iconutil'
gulp.task 'icons', ->
gulp.src 'icons/sketch/*.sketch'
.pipe sketch
export: 'artboards'
formats: 'png'
scales: '1.0,2.0'
.pipe iconutil('app.icns')
.pipe gulp.dest 'icons/'
iconsタスクを実行すると、iconsフォルダの中に__app.icns__が生成されます。
Electronアプリ開発者はこのアイコンファイルをOS X向けビルドにそのまま使えます。
まとめ
デザインデータのポストプロセスの自動化がGulpとsketchtoolのおかげでやりやすくなりました。
gulp-iconutil は今週リリースしたばかりで若干不安定なので、もしバグを見つけたらIssueを作るか、PRを投げてください!