iOSの@3x対応:Vector画像とImageAssets

はじめに

Xcode6からVectorで画像素材が使えるという話で

 

(✿╹◡╹) <  これで素材のサイズ指定をしなくてもいいの?

(✿╹◡╹) <  拡大縮小で使えるの?

(✿╹◡╹) <  ファイルサイズはどうなの?

 

いろいろ知る必要があるのでやってみました。

また、私はプログラムはかけますが、デザインその他はあまりなれていないので

後日の自分のためにもこれを書いていますです。

 

Vector画像が使える

Xcode6ではImageAssetsに設定できる画像にベクターデータを指定できるようになりました。 

 

(✿╹◡╹) <  なにがうれしいの?

 

と聞かれれば、プログラマーにとっては大してインパクトないです。むしろ、Target OS が iOS6だと使えない機能かあ、とかモヤモヤしています。 

 

デザイナーがうれしい(はず)

 

@1x、@2x、@3xの画像切り出しをしなくても

・等倍

・pdf

で作ってプログラマーに渡せば

Xcodeがコンパイル時に自動的に作ってくれるという、それにつきると思います。

 

@3xは3倍だからデザインは大きめに〜

pixelは6の倍数で作って〜

とか言われていたデザイナーさんは喜ぶはず・・・(たぶん

 

(✿╹◡╹) <  そんなこと気にもしてなかった!

 

 というデザイナーさんは・・・、よかったですね。そんな苦労しなくてもよい時代がきましたよ。(iOS7以上ならね・・・)

ただ、イラレなどVector で画像を描けることが前提ですから、それはそれでがんばる必要がありそうです。

 

制作フロー:Vector画像をPDFで出力

 Vector画像を作成します。

といっても、もとになるデータは、こちらからダウンロードしたものをイラストレーターCS5で加工します。

http://designmodo.com/linecons-free/

 スクリーンショット 2014-09-25 14.00.31

 

(1)クリッピングマスクされているaiファイルだったので選択ツールを使って選択し

コントロールを押しつつ「クリッピングマスクを解除」で個別に選択できるようにします。

 

 スクリーンショット 2014-09-25 11.58.04

 

(2)対象のアイコンが選択できるようになっているので、選択してコピー

新規作成します。

 

スクリーンショット 2014-09-25 11.58.31

 

(3) 新規アートボードに貼付けたパスを編集

拡大したり、縮小したり、変更したり

スクリーンショット 2014-09-25 14.52.08

 

(4)アートボードの大きさを調整

ファイル > ドキュメント設定 を選択します。

スクリーンショット 2014-09-25 11.59.07

アートボードを編集 ボタンを押すと

スクリーンショット 2014-09-25 11.59.27

保存するアートボードの大きさを編集できるようになります。

スクリーンショット 2014-09-25 12.49.17

 

 (5)PDFで保存

大きさを変更せずに保存すると(2)で保存したサイズで保存されます。

スクリーンショット 2014-09-25 15.22.19

 

制作フロー:Xcode6でImageAssetsに追加

作った画像の等倍サイズは次のような感じです。

下記はpngですが、pdfにもこのサイズで作成したものを使っています。

 

thumbsup

 

 (1)Xcode6で適当にプロジェクトファイルを作成

デフォルトで入っているImages.xcassetsにImage Set を追加します。

スクリーンショット 2014-09-25 15.53.35

 

Image Sets の TypeではVectorsを選択し、Nameに”thumsup”とか名前をつけます。

スクリーンショット 2014-09-25 15.54.33

 

いえーいと pdfをドラッグアンドドロップすると

スクリーンショット 2014-09-25 15.54.56

はいります。

確認:シミュレータ

constrainsとか、適当にセットしたのが下の状態です。

スクリーンショット 2014-09-25 16.05.51

 

 

(1)iPhone5s

スクリーンショット 2014-09-25 16.05.18

 

(2)iPhone6

 スクリーンショット 2014-09-25 16.04.25

 

(3)iPhone6 plus

スクリーンショット 2014-09-25 16.03.05

確認:ipa

 

生成したipaを開くと、こんな感じです。

スクリーンショット 2014-09-25 16.59.14

Appleの公式ドキュメントの情報ではAssets.carの内部はpngの場合と変わらないはずです。

 

結果

表示の結果は劣化なし。ファイルサイズもおそらくあまり変わらず

png画像(@1x、@2x、@3x)を使用した場合との差は、おそらくないはず。

 

 参考URL

https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/Recipe.html

 

さいごに

デザイン部分の作業を吸収してくれるのがメインの仕様追加だと思います。

 

今後の運用を考えると、例えば、@4xとかビックリするような画像サイズを素材として利用する必要があった場合に

デザインから再度作り直し、ではなく、リビルドするだけ、であれば比較的制作現場は落ち着けそうです。

 

●この記事を書いた人