13
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Asset CatalogでPDF形式を使ったらいろいろ問題が出た

Last updated at Posted at 2015-04-14

新規アプリを1本作るにあたってアセットカタログ+PDFの組み合わせで開発を行いました。
その際いくつかトラブルに見舞われましたので、その辺をまとめておこうかと思います。

間違いやもっと良い方法などありましたら、ご指摘頂ければ幸いです。
(Xcode6.3にて確認)

基礎知識

  • Xcode6からAssset CatalogでPNG形式だけでなく、PDF形式がサポートされるようになりました。
  • PNGの場合は非Retina、@2x@3xなど解像度別の画像を用意する必要がありましたが、PDFなら1ファイルで全解像度に対応することができます。
  • 用紙(白い背景)は透過されます。
  • コンパイルの時点でPDF形式はラスタライズされます。
  • ラスタライズ後の形式は公表されていないと思いますが、おそらくPNG形式と同等のものだと思われます。
  • ラスタライズされるため、実行時に画像をロードをして拡大しても綺麗には描画されません。

トラブル1 色がおかしい

デザイナーもプログラマー(私)もほとんどPDFの知識が無く、とりあえずイラレで作ってもらったPDFをAsset Catalogに突っ込んだら、まずはとにかく色がおかしい問題に出くわしました。

先が思いやられます。

例)
CMYK.png

4つの画像の色は微妙にどれもRGB値は違うのですが、アプリ実行時画面だけ劇的に違うのが見て判るかと思います。

で、これはどうやらイラレの「ドキュメントのカラーモード」がCMYKになっていると起こるようで、RGBにしたところ、期待した結果(に近いもの)になりました。
(他にも書き出し時の色プロファイルを変えると影響するようですがよくわかりません。)

CMYKではなくRGBにしたもの↓
RGB.png

だいぶ近くなりましたね。

しかしこうなってくると、デザイナーは書き出したPDFをiPadなどの端末上で見て確認する必要性が(以前よりも)高くなります。
(実際はRetinaと非Retinaで発色がかなり違うのと、端末の明るさ設定によっても見え方が変わってきますので、どこかで落とし所を付ける必要があるかなと思われます。)

iPadなどの端末でPDFを見る方法はいくつかあると思いますので省略しますが、作業工程上楽なものを探してみてください。
社内で専用アプリを作るのもアリかもしれませんね。
(背景色変えられる&拡大縮小できると良いです)

トラブル2 うまく半透明にならない

もらったPDFを実機で実行したのに半透明らしき個所がうまく透過しない事案が発生。
乗算.png

これはデザイナーが半透明っぽいオブジェクトの描画モードを「乗算」にしていた事が原因のようでした。
スクリーンショット 2015-04-14 17.25.18.png

たしかに最終的に32bitPNGっぽくラスタライズされると思えば、そういった乗算のような合成方法は無効になってしまうのも頷けます。

透過しない部分では乗算などを使ってもらっても構いませんが、半透明になってしまうような部分では描画モードを「通常」でなんとかしてもらう事で回避しました。
通常.png

期待通り透過しますね。
こういった挙動はデザイナーさんに予め伝えておくとスムーズですね。

トラブル3 端が欠ける

手元で再現しないので、もしかしたら改善されているのかもしれませんが、用紙ギリギリまで図形が描かれるようなPDF(例えば円形のデザインなど)は、ラスタライズの際に端が微妙に欠けてしまう事がありました。

これは地味な方法ではありますが、1ピクセル分余白を入れてあげる事で回避しました。

トラブル4 書き出しが面倒くさい

トラブルではありませんが、イラレで一枚のキャンバスにいろいろなアイコンなどを配置して、それられに名前をつけて一括でPDF形式で保存する方法がまだ無いそうです(PNGでは可能)。

例えば色味などの修正が入ったときに、一個一個手動で書き出し直すのが面倒だったようで、プログラマーが楽だと思って提案したPDF形式がデザイナーにとっては逆に負担になっていたりする可能性もなきにしもあらずということで、その辺の手順について一度デザイナーと確認しておいた方が良いかと思われます。

アドオン(スクリプト?)などを探せばもしかしたら可能なのかもしれませんが、イラレ公式で対応してほしいですね。

13
14
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
13
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?