はじめに

iOS7のデバイスでホーム画面を見ると、アイコン角丸のRにあっていないデザインを作成したアプリを見つけることがあります。

どのように表示されるのか

アイコンの角丸Rにあわせて線を引いているアイコンなどが分かりやすく
既にいろいろ研究されている方のサイトを紹介します。

StaccalのアイコンiOS7対応 (前編)
http://gndo.blogspot.jp/2013/09/staccalios7.html

iOS7で追加されたアイコンサイズ・角丸の半径について
http://hocosoft.com/memo/ios7対応/ios7で追加されたアイコンサイズ・角丸の半径につ/

対策

iOS6用とiOS7のRはちがうことを意識して画像を分ける必要があります。
※pixelベースです

表示される画面	iOS6(iPhone)	iOS7(iPhone)	iOS6(iPad)	iOS7(iPad)
ホーム	57,114	120	72,144	76,152
スポットライト	29,58	80	50,100	40,80
設定画面用	29,58	iOS6(iPhone)と共通	29,58	iOS6(iPad)と共通

書いてて気づきましたが、設定画面用は・・・

アイコンを作る

角丸Rにこだわる場合

角丸Rに関わらないデザイン画像を作成
OSバージョンにあわせて角丸Rに関係する枠などのデザインを当てる。この場合二種類
サイズ調整

設定画面用の画像は角丸R必要か疑問が残ります。

角丸Rにこだわらない場合

テンプレートを使用する

こちらのpsdで作成しました。

effect、カラー（グラデーション）も含めバリエーションがあり
psdの編集箇所もデザインだけ、サイトイメージも同時にできます。
付属するatnファイルで角Rなし、ありのActionを実行して
必要サイズ全パターン作成してくれます

Webサービス

モックとか仕様確認レベルのアイコンであればこちらとか
※角丸対応まではしているかは別途確認
http://makeappicon.com

Xcode

AssetCatalogに画像を追加

同じような画像でサイズ違うアイコンを指定すると

ワーニングにあがっています。下記アイコンの@2xが76pixelでした。

確認

実機での確認をしましょう。
シミュレーターでの確認だと背景色が黒しか選べないので
明るめの背景にかえて気づく、ようなことがあります。

参考URL

appicontemplate.com
http://appicontemplate.com

iOS Rounded Rect Script for Photoshop
http://blog.mikeswanson.com/iosroundedrect