Developer's Blog

Retina サイズの調整

Retina サイズとは、3G サイズ( 320px × 480px )の2倍の解像度( 640px × 960px )のことです。

単純に縮小拡大すると、せっかくのデザインもぼけてしまい台無しになってしまいます。

実際に私がしていることは下記になります。

  • ボタンや線などは出来る限りパスで描く。
  • アイコンもパスにする。
  • 写真を使っているところは最初からRetinaサイズでつくる。
  • 最後は目で見て微調整。

パスで描くことで自由に変形できますし、ぼける心配もありません。
写真は小→大にのばすより、大→小に縮める方がきれいです。
なお、グラデーションやシャドウなど、パス以外の効果は引き延ばしても2倍にならないので数値の調整が必要です。

<ボタンをそのまま引き延ばしたもの>

<調整して拡大したもの>

そのまま引き延ばしたボタンより調整して拡大した方がより近いグラデーションになっているのが分かりますか?
(特にボタン下の反射している光の具合)

地道で細かい作業ですが、良いものを作るためには、欠かせないひと手間だと思っています。

Copyright © 2019 Fenrir Inc. All rights reserved.