menu

10.06.24

category

comments

0

trackbacks

0

permalink

Retina Display : ベクターデータの調整

path_preview.png

またまた Retina Display 対応のお話。
標準のUIエレメントについて、解像度があがったことでそれらはどう変わったのかちょっと見てみました。

retina_sys.png

左:以前の simulator のキャプチャを2倍
右:iPhone 4 simulator のキャプチャ

なるほど、エッジの影のボケ足の表現などがより精細になっています(そりゃそうだ)。
標準の UI エレメントを模したものをつくるケースって意外に多いんですけど、
僕の場合は元データはイラストレータ上でつくってるので、エレメントはベクターで描画されています。
パスなんだから、2倍にしても大丈夫じゃん!とか思ったりもしましたが、やっぱり世の中そんなに甘くないのでした。これ↓を見てください。

retina_path.png

左:いままでのパスデータを単純に2倍した
右:2倍後にそれなりの調整を行ったもの

まあ、こんなに違いますですよ。
右の調整済のパスデータは半分ぐらい作り直してますです。

というわけで、本気でやりだすと恐ろしく人的リソースを消費する Retina Display ではありますが、実際 iPhone 4 の実機で最適化されたアプリケーションを見るともう以前には戻れなくなります。
1つ1つのエレメントを見る分にはそれほど感じないのですが、総合的な外観の印象が圧倒的に違っていて、実体感がより強く感じられるようになりました。

webtron が関わっているアプリとしては「iMandalArt」「MoneyTron」から対応します。
どちらももうじき申請できそうな予感なので、お楽しみに!

add your comment

Name
Mail
URL

comments

up down

comments


up down