Title

2013年8月の投稿一覧

フラットデザインで非Retina向け画像を作るときの注意

iOS7.0でフラットデザインが採用されているのは周知のとおりです。

Appleが公開を見ると、線の使い方が細いのが特徴です。
(NDAに抵触しない広く公開された画像からわかります)

で、それに合わせたデザインを作るわけですが、線が細いせいで非Retina画像を作るときに気をつけないと問題が起こります。

この画像の例のように、2piel幅の線が奇数の座標から始まっている画像を縮小すると・・・

scale1
(左が縮小前、右が縮小後です)

2pixelがそれぞれ別の画素に別れてしまい、ぼやけてしまいます。

左の画像を1ピクセル左右どちらかにずらしてから縮小すると以下のようになります。

scale2

うーん、これは厄介ですね。
奇数座標に線を書かないように気をつけないといけません。
これは以前からも言えることなのですが、より問題が目立つようになりました。

タブとナビゲーション(とテーブル)を同時に使った時に横画面にすると、縦方向が明らかに狭いので横にボタン持ってきてみた・・・。

写真 2013-08-20 1 03 42

本の閲覧画面のページスクロールする部分も元々はiPhone5の縦画面で余った画面用だったので、横にしたときも下でなくて横に表示するようにしましたが、同じようなイメージ。

カレンダー

2013年8月
 1234
567891011
12131415161718
19202122232425
262728293031  

▲Pagetop