Sketch3からiPhoneとAndroid用の画像を一気に書出す設定メモ

2014-11-28 #Design

今年はアプリのデザインのお仕事をいただく事が多かったのでちょっと前まで@3x画像の書出しなどに追われる日々でした。

デザインデータから各種デバイス用の解像度の画像を切り出す場合、 Photoshopだとレイヤーグループに名前をつけておいてSlicyで書出しているのですが、 Sketchだと例えば一つのレイヤーから@2x画像xhdpi画像みたいな同じ大きさで別々の名前の画像が切り出せるのが便利でした。 やりかたも簡単でExportの設定をレイヤーグループ毎に複数の書出したい画像のサイズとプレフィクスなどを設定しておけば、最後にボタン一つで書出せるようになっています。 各種解像度用の画像を書出す時の設定が沢山あって覚えきれないので忘れないようにメモしておきます。


書出したい画像

タブ用の画像という想定で30x30のアイコンを作って書出してみます。 対応したいデバイスによっては増えたり減ったりするかと思いますがここで想定しているのは

star-hdpi.png
star-xhdpi.png
star-xxhdpi.png
star-xxxhdpi.png
star.png
star@2x.png
star@3x.png

の7つの解像度。

1つのアイコンから7つの画像を書出さなければいけないので(いくつか同じサイズのものが含まれるけど)、Sketch上で星形のアイコンが入ったレイヤーグループに書出しの設定を入れて行きます。

デザインを等倍で作っていた場合

Retinaディスプレイの登場以降等倍でデザインデータを作る事は無かったのですが、今後画面サイズが3倍、4倍となっていくであろう中で、デザインデータをどう作るかは悩ましいところです。

全てベクターで完結するデザインに限ってはデータは等倍で作って書出し設定で拡大しても普通に綺麗に書出してくれるので等倍で作っても良さそうな気がしています。

等倍でデザインデータを作った場合、30x30の矩形に入る星(余白つき)を配置しているので、 前述の7つのサイズの画像はこのように2xとか3xとかの倍率を普通に指定します。


デザインをRetina用の倍のサイズで作っていた場合

今まで通りRetina用の倍のサイズでデザインデータを作成した場合のExportの設定はこんな感じです。 Sizeのところ、プルダウンに予め入って無い0.75xとかの数字を入れてもちゃんと書出してくれるみたいですね。


書出した画像

疑い深いのでそれぞれのスライスから書出した@3x画像を並べて比較してみました。 ベクターで作っていたので理論上はどちらも同じ画像になるハズですが、並べてみたらちゃんと同じクオリティで書出されているみたいで一安心です。

Profile

石原 悠 / Yu Ishihara

東京都杉並区在住。デザインとプログラミングとヨーグルト作りが好きです。