【デザイナー向け】[Xcode6]AssetCatalog用にpdf素材を制作する時の注意点

Xcode6 から Asset Catalogでベクター形式がサポートされた事により、RetinaやNon Retinaで別々の画像を用意する必要がなくなりました。
pdf(ベクターデータ)が利用できることにより、1xのサイズのpdfデータを1つだけ用意すれば良くなりました。
実際iOSアプリにてpdf素材を制作してみて…失敗から発見したことがありましたので、失敗制作フローと注意点を残しておきます。

##参考
Asset Catalog でベクターが扱えるようになりました！

#実際の制作フロー
##STEP1:【Photoshop】でモック制作

今回、単純なオブジェクトに白フチがついた素材を制作しました。
アプリのラフ案自体もPhotoshopで制作していたので、Illustratorでシェイプを制作後、Photoshopで整えるという流れで制作しています。

##STEP2:【Photoshop】で白フチ書き出し失敗

レイヤースタイルを利用して白フチを制作したものをpdfで書き出しをしても、
レイヤースタイルで制作した白フチはベクター化されない為ボヤけてしまいます。

##STEP3:【Photoshop】でスマートオブジェクト化し失敗
Illustratorで制作したシェイプデータを白フチ込みで、Photoshopに持ってきてスマートオブジェクト化しました。
スマートオブジェクトの中身はベクターデータなので…ボヤけないのではないかと考えましたが、残念ながら失敗しました。

##STEP4:【Illustrator】で白フチ込みのデータを書き出し

結果的にIllustratorで白フチ付きのシェイプデータを制作しました。
この際、アートボードを1xのサイズに指定します。書き出しの際はIllustratorの編集機能を保持のチェックを外し保存して完成しました。

#注意点
##【Photoshop】スマートオブジェクト化ではボケてしまう
スマートオブジェクト内はシェイプデータなので、
もしかして…pdfなら拡大してもボケないのでは？と甘い考えをしました。
結果的にスマートオブジェクト化にしてもボケました。

##【Illustrator】でアートボードサイズを指定
そもそも、イラレでシェイプデータを制作する時に
アプリに入れるサイズまで意識して制作していないかと思います。（私だけかもしれませんが
なので、フォトショ上で書き出したいサイズを確認⇒イラレでアートボードサイズを指定したいサイズに変更し、
そこに収まるようにベクターデータを調整して書き出しました。

Illustrator で書き出したサイズと、Asset Catalogに入れたときのサイズが合わないという問題

上記のような現象があるとしたら、もしかすると…アートボードサイズが合っていないから起きているのかもしれません。
今回アートボードサイズを指定して、実際に組み込んでもらった所…特に問題はなかったようです。

##書き出す際、"編集機能を保持"のチェックを外す
書き出す際、"Illustratorの編集機能を保持""Photoshopの編集機能を保持"を必ず外し保存。
ここにチェックが入ってるだけ10倍くらい容量が重くなりました。
保存の際は、すべてのチェックを外して保存しています。

#考えられる解決策

• Photoshopでラフ案を制作する時点で、すべてをシェイプデータにして配置する
• 最初からPhotoshop完結出来る作りにしておけば、Illustratorでのアートボード調整などは不要
• 白フチなどIllustratorでも代用できる表現は、あらかじめシェイプ化して制作する
• Illustratorで素材を制作する際、1xサイズで制作する

#結論

• 当たり前ですが…ベクターデータでないと表現不可能
• Photoshop特有の表現(レイヤースタイル)をベクターデータにするのは大変
• 複雑な表現をpdfすることは出来ないので、フラットデザイン化が進む…
• いっそpngで切り出した方がスピードは早いかも

臨機応変にpngにしたり、pdfにしたりすれば良いのかと思いますが、
あらかじめ、デザイナー側で制作の工夫(Photoshop or Illustrator)が必要かもしれないです。
（今後ベクター化が進むとなると…最初からIllustratorで制作して方が効率的になる可能性もあり？）

#追記(2014.12.02)
pdfを使用すると、若干の変色をすることが確認しました。
見て分からない程度ですが、pdfより書き出したビットマップデータの方が濃く発色しているようです。
今のところ…確実に再現するには、pngで各サイズを書き出すのが確実かもしれません。

#追記(2015.01.14)

実際にどれだけ色が違うかを比較したところ、
pdfを書き出した後の方が色が濃くでることが分かりました。
border等、細い線の色再現はかなり難しいかもしれません。

#おわりに
今回のは一例になりますので必須事項ではありません。参考程度にして頂ければと思います。
画期的な解決策ありましたら…是非教えて頂きたいです。