LoginSignup
17

More than 5 years have passed since last update.

特にAndroid開発時に知っておきたいSketchExportAssetで画像を綺麗に書き出す為のコツ

Last updated at Posted at 2015-12-04

Sketchで画像を書き出す時にこまること

SketchでAndroid向けの画像リソースを全解像度一発でかき出してくれるプラグインのひとつで、「SketchExportAsset」があります。僕はこのプラグインでリソースの書き出しを行っています。
こちらを利用するときにこまる癖と対処方法を紹介します!

スピカグロースチームにおけるデザインワークフロー

※大前提として弊社ではデザイナーさんがパートタイム1名となってまして各業務チームで融通しているという事情があります。
※デザイナー募集中!Sketchとお好きなPC、キーボード、ペンタブ、Sketch以外にもAdobe等の最新のツールも揃えます!(と書いてあるのでたぶん。詳しくは社長に聞いてくださいw) 下部にwantedlyのリンク張っておきました!

  • 基本的な方向性を考える。
  • 関係者で実装・デザイン方針打ち合わせ
  • ワイヤーをSketchで起こす
  • ワイヤーを関係者で検討
  • ワイヤーをデザイナーさんに回してラフを作成してもらう
  • ラフのレビューを行う
  • デザインの清書
  • 清書されたデザインから書き出し用リソースをまとめ書き出し

こんかいは特に最後の書き出し設定について説明します。

デザイン制作はmdpiで行っておくとよいと思います。

書き出し設定時の流れと綺麗に書き出せない問題

1.各画面のデザインから書き出し素材のステンシルとなるものを収集してひとつのシートにまとめる。

  • 書き出しやすくする
  • シンボル化とかやっておく

とかそういうもろもろのためにまとめてます。

まとめたシートver1.4.0の時

こちらはシンボル化用
スクリーンショット 2015-12-05 1.26.30.png

  • 結局ボツ案になった灰色と茶色

選択しやすい用にさらに書き出すものだけまとめる
スクリーンショット 2015-12-05 1.26.50.png

2.まとめたパーツ1個毎に書き出したいサイズの透明の四角形を配置してグループ化しておく

ここからが今回の要点です。
パーツのシャドーがoutsideで設定されている場合、アイコン画像単体で書き出しをおこなうと、マークが切れてしまう場合があります。それが原因でずれてるとか、切れている画像が表示されてしまいます。

スクリーンショット 2015-12-05 1.32.39.png

こんな形で切れてしまう。

スクリーンショット 2015-12-05 1.33.26.png

このBordersの設定が原因。

スクリーンショット 2015-12-05 1.31.43.png
このように透明の四角形を配置してグループ化しグループを書き出すようにする。

スクリーンショット 2015-12-05 1.31.55.png

綺麗に画像を選択できる。

3.あとはいつも通りエクスポート

なお、グループ名はandroidでのリソース名にしておくと便利だと思います。

まとめ

ちょっとした工夫ですが、知らないとイライラするところだと思います!
シンボルやスタイルも綺麗に定義できると再利用も楽だと思います。

僕らと一緒に世界で一番つかいやすいネイルアプリをつくってくれるデザイナーさん募集中です!
Androidエンジニアも募集中です!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17