Sketchでの素材の書き出しを10倍早くする3つの小技

Pocket
LINEで送る

Sketchを使ってアプリやウェブサイトで使う素材を書き出すなんてことは、デザイナーのみなさんにとって日常的に何度も繰り返すことでしょう。そこで、普段の書き出しを10倍早く、しかもちょっとだけ楽しく行うための小技を3つ紹介したいと思います。

僕の周りのデザイナーにも書き出し方にばらつきがあるのですが、本記事では”素材の書き出し”に限定しているので、Sliceツールを使っての書き出しを想定しています。

書き出す素材を1箇所にまとめる

Exportと名付けたArtboardに、書き出す予定のある素材をSliceと共に置いておきます。後ほどある程度素材が揃ったら書き出します。

このときに、ArtboardにBackground-colorを設定しておくと、使うことの少なくない”白い素材”もしっかりと見えるようになります。”Include in Export”のチェックは外しておかないと、Sliceを書き出すときに背景色まで一緒に書き出してしまいます。背景を透明で書き出したい場合は必ず外しておきましょう。

Sliceツールを一気に選択する

これだけの数のスライスを、一つ一つクリックしていませんか?複雑にグループ化されたレイヤーの中からスライスだけを選んでクリックするのは骨が折れます。レイヤーリストの一番下にある”Show / Hide Layers in the List”オプションを使いましょう。

通常はアイコンが青く光っています。こちらを一度クリックすると、全ての書き出すことができない全てのオブジェクトが選択できないようになります。この状態で先程のExportと名付けたArtbordの左上から右下まで、⌘を押しながらドラッグしましょう。Sliceのみが選択できたはずです。⌘キーを押さないと、グループ化されているレイヤーではなく、グループそのものを選択してしまう可能性があるからです。

デバイスごとの解像度に書き出す

ネイティブアプリになると、複数の解像度用に画像を書き出さなければなりません。Sketch標準の機能として、インスペクター下部の書き出しオプションを手動で設定しても良いのですが、面倒なのでプラグインを使いましょう。

iOSアプリ用に書き出す

iOSアプリ用に素材を書き出す場合は、こちらのSketch Measureを使います。

https://github.com/utom/sketch-measure

プラグインをインストールしたら、Shift+Control+Bを押してツールバーを呼び出します。書き出したいSliceを選択していることを確認して、出現したツールバーの左から6つ目、スライスアイコンをクリック。

解像度を選択して(例えばiPhone7, 4inchを想定してデザインしている場合は”Retina @2x”)、Saveを押します。インスペクターの下部に書き出しオプションが出現しました。

あとは不要なオプション(@1.5x, @4x)を2クリックで削除してからExportボタンを押すだけです。

androidアプリ用に書き出す

先程のSketch Measureにもandroid用の書き出しオプションが有りましたが、そちらは使いません。androidはiOSとは違って、解像度ごとにファイルが異なる名前を持たないのです。一つのフォルダに書き出した場合、上書きしあってうまく書き出せませんし、@1.5xといったようにファイル名の末尾につけてしまうと、エンジニアがシステムに組み込むときにすごく大変です。

そのため、androidでは上画像のような形で書き出してくれるSketch Export Assets( GitHub – GeertWille/sketch-export-assets: Export assets for Android, iOS, Windows Phone in Sketch )というプラグインを使います。

プラグインをインストールしたら、Sliceを選択している状態で、ツールバー > Plugin > Sketch Export Assets > Export Android Assetsをクリックします。書き出したいフォルダ、基準となる解像度を選択して書き出します。複数のファイルが作成され、その中に異なる解像度を持つ同じ名前のファイルが書き出されていることを確認して下さい。

2回目以降の書き出しでは、同じフォルダを選択して書き出すことで、これまでのファイルの中身を保ったまま書き出してくれます(ただし当然のように同じファイル名の物がある場合、新しいものが古いものを上書きします)。

こちらのプラグイン、非常に便利なのですが、Sketchがアップデートするとしょっちゅう使えなくなってしまいます。いまのところ代替できそうなプラグインがないので(知ってたら教えてください)、Sketch Betaをうまく使ってSketchのアップデートと戦いましょう。詳しくは次回以降書きます。

まとめ

いかがだったでしょうか?書き出し素材はなるべく一箇所に集めまとめ、レイヤーオプションを使って1ドラッグでスライスを選択し、プラグインをうまく使って書き出しを行うことで、書き出し作業は劇的にスピードアップするはずです。ぜひ試してみて下さい!!



Pocket
LINEで送る