Sketch3で透過部分をトリミングしないでエクスポートする

Design Sketch

内容

  • Sketch3で上下左右に余白(透過)がある画像を書き出す場合、透過部分がトリミングされてしまう
  • トリミングしないで画像を書き出したい

現状

  • 余白を含めた画像サイズは360 x 360 f:id:ichigoro:20160718125826p:plain
  • この画像を選択しMake Exportable > ナイフボタンを押すと、Trim Transparent Pixcelsといったオプションがあるのだが、このオプションがオフでもトリミングされてしまう
  • このまま書き出すと、画像サイズが316 x 316になってしまう f:id:ichigoro:20160718125846p:plain

    解決策 その1

  • 該当画像を選択
  • option + Aを押し、右上のAround Selectionをクリック f:id:ichigoro:20160718125908p:plain
  • Artboardが追加されるので (必要であればArtboard名を変更する)
  • Artboardを選択し、Make Exportableをクリック
  • 書き出す f:id:ichigoro:20160718125914p:plain

解決策 その2

  • option + RなどからRectangleを作成し、サイズを書き出しサイズにする
  • Rectangleの色を透過にする
  • 該当画像とRectangleの位置をあわせcommand + Gでグループ化する
  • Group配下のRectangleを選択し、Make Exportableをクリック (注意: Groupを選択ではない) f:id:ichigoro:20160718125919p:plain
  • 右下にあるナイフボタンを押す f:id:ichigoro:20160718125923p:plain
  • Rectangleと同サイズの書き出しエリアが作成される
  • 書き出す f:id:ichigoro:20160718125928p:plain