読者です 読者をやめる 読者になる 読者になる

イラレで作ったandroidアプリの素材をsketch3で書き出す

デザイン android
androidアプリのデザイン

androidアプリのデザインするときはIllustratorを使ってる
Illustratorが好きだからっていうのもあるし、解像度がいろいろあってややこしいからベクターデータで持っておきたいとか、そんなに複雑な効果をつけることもないだろうしPhotoshop使わなくても、とかそんな感じ
googleMaterial Designのガイドラインを読んでいるとドロップシャドウの描写が見られるのだけれど、これはアプリをz軸のあるものと捉えて深さに応じてつける感じで「z-depth=1」みたいな表記を見る限り影のある画像を用意しなくてもある程度はコード側でなんとかなるのでは、と思っている
f:id:yulily100:20140709223026p:plain

四角以外の画像でコードでどうにかできなさそうなやつも、イラレで再現するならどうすればいいか丁寧にガイドラインに載ってる
f:id:yulily100:20140709223140p:plain

ガイドライン、ものすごく詳しく書かれている
Principles - Layout - Google design guidelines

ガイドラインから要所要所でサンプルファイルをダウンロードすることができるのだけれど、どれもイラレのデータなのでgoogle的にもイラレ使って下さいってことなのかなーって思ってる

Illustratorは書き出しが難しい

イラレでレイアウトするのはいいのだけれど、困ったのが書き出しだった
androidは4種類くらい解像度があって、360×640pxをデフォルトとするとその1.5倍、2倍、3倍の合計4サイズの書き出しが必要になる
学生時代に遊びでちまちま作ってたandroidアプリだとイラレで4サイズのスライスを作っていた
f:id:yulily100:20140709221453p:plain
端数気にしないといけないし、とにかくダルくて勘弁してくれって感じだった
さらに今使ってるIllustrator CCはスライス壊れてて今後何かandroidアプリ作る時どうしようかと思ってた

sketch3使ってみる

そこで試しにSketch3というソフトを使ってみた

Sketch 3

Sketch 3

  • Bohemian Coding
  • グラフィック&デザイン
  • ¥7,800
簡単に言うと1回のコピペ、1回のリネーム、5回のクリックで4サイズ分の書き出しができた
やり方をざっくり書いておく

  • イラレで、360×640px(mdpi)のアートボード上でデザインをする
  • 書き出したいパーツをSketchに張りつけてオブジェクトを選択する
    • ここで左のレイヤーメニューから書き出したい名前にリネームしておくと良い

f:id:yulily100:20140709225154p:plain

  • オブジェクトを選択すると右下に「Make Exportable」っていうラベルと「+」のアイコンが出てくるのでそれをクリックすると書き出しオプションが出てくる
  • すると「Make Exportable」のラベルが「Export」になるので同様にあと3回クリックすると、デフォルトでいい感じの倍率が出てくる

f:id:yulily100:20140709230129p:plain

  • あとは一番下のExportボタンを押せば4つのファイルが書き出される

こうすると簡単に書き出しができる。

最後に

もし一人で作っているならレイアウト自体もsketchでやっても良いかもしれないけれど、誰かとファイルを共有する可能性がある場合はできるだけ汎用的なソフト(adobe製品)を使ったほうがいい気がする
私のやり方だとイラレでパーツ作ってレイアウトして、細かいマージンの調整とかはXMLに直接書くのがいいんじゃないかなーと思っている
なんとなく思いついた方法なのでもっといい方法があれば教えて下さい。androidのデザインの記事あまり出て来ないから世の中の人はどうしてるのかなーって思ってる。