Sketchで書き出しをする

Sketchのデザインをコーディングする機会があったので、画像の書き出し方法についてメモ。

書き出し方法

左上のプラスアイコンからSliceを選択して、アートボード上の書き出したいレイヤーまたはグループを選択します。

スライスのレイヤーが追加され、右側に書き出しの設定とプレビューが表示されました。
書き出しの設定でサイズや拡張子の設定ができます。

今回の例だとプレビューに背景色も含める形になっていますが、透過にしたい場合は下のオブジェクトを非表示にする必要があります。
今回の場合、bgのレイヤーを非表示にします。

プレビューで透過状態になりました。
書き出しの実行は下部の「Export Selected…」をクリックします。

書き出し方法2

先ほどはスライスを作成して書き出しを行いましたが、次はオブジェクトを選択して書き出す方法を試してみます。
オブジェクトを選択して、右下にある「MAKE EXPORTABLE」をクリックします。

右側に書き出しの設定画面が表示されました。
今回はスライスではないので、先ほどのようにレイヤーは追加されず、背景も透過状態になっています。

書き出しの実行は先ほどと同様、書き出し設定下部の「Export Selected…」をクリックすればOKです。