LoginSignup
4
4

More than 5 years have passed since last update.

[デザイナー向け]iOSアプリ用の素材をPDFで納品してみよう!

Posted at

なぜそうするのか

  1. 現状、PNGで素材を納品している場合、1x・2x・3xで素材を納品している地味にちょっと大変!
  2. Xcode6から、Assets CatalogにPDF(ベクター素材)を設定できるようになった(らしい)!
  3. つまり、1種類のサイズを用意すればいい!やってみよう!

作成方法

ベクターで書きだす必要があるためIllustratorで作成
20eb4b09a9693dc5a8620a3dea4ca80e.png

注意点(結構多いよ)

  1. 1x(見えるそのままのサイズ)で作成する。
  2. アートボードサイズを意識する。アートボードがそのまま画像サイズになります。
    4a4fbc85ae3be42051fdc4580f738433.png
    (↑正方形にしたいときはこう)

  3. トンボは付けない。トンボの分も画像サイズに含まれるというミスを経験。

  4. PDFで保存する際の設定で、Illustratorの機能を保持を外す。容量軽減対策です。
    7b3506b19ecede3fc8270c243d7c0a61.png

PDFで書きだすのに最適な素材は?

ここまで読んでお気づきだと思われるのですが、PDFに書き出した素材は、単純に拡大縮小して使われるということです。
そのため、「横方向だけに素材を伸ばしたい!」のように、9patch的使われ方とは別です。縦横比固定で使われる想定のもの限定で利用がマストです!

また、Photoshopのレイヤー効果等の複雑な加工が出来ないため、フラットなデザインのものに最適です。

ナビゲーションで使うアイコンやロゴはPDFで納品、その他の素材はPNGで納品と使い分けるとことおすすめします!
8587411053326e96b554b663d086035b.png

503710fd6a2ba41afef4656146ce23a8.png

まとめ

  1. 素材をIllustratorで1xサイズで作成
  2. PDFで書き出し
  3. 完了!サイズ展開は必要ない!Happy!

最初にアプリデザインを始める段階から、UIデザインはPhotoshopで行い、Illustratorで作成したアイコン等のモチーフをスマートオブジェクト(またはリンクを配置)で配置すると、とても便利です!

※まだ、実験途中なので今まで通りPNGのみでも構いません!

4
4
0

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
4
4