アイコンマスク

iPhoneのアプリを起動させるためにタップするのがアプリアイコンですが、そのアイコンはアプリ内に格納されており、アプリを作る際にアイコンも作らなければなりません。
最初からiPhone用に角丸のアイコンを作っても良いのですが、角張ったアイコンのままアプリをリリースしても、角丸で表示される仕組みをアップルは用意しています。
その仕組みの肝になるのが、このアイコンマスクです。
オリジナル画像サイズ詳細

角丸の半径は、40pxでした。
参考にしてください。
テーマ構成ファイル一覧 & オリジナル画像
テーマ名/Bundles/com.apple.mobileicons.framework/ | |
格納場所:/System/Library/PrivateFrameworks/MobileIcons.framework/ | |
AppIconMask@3x~iphone.png (180×180) |
![]() |
iOS6までは、切り取るだけでなく、影や光沢を付ける画像もありましたが、iOS7のフラットデザインにから、マスク画像のみの単一構成となりました。
<注意>
くれぐれも、大文字と小文字の間違いに気をつけて下さい。
<追記>
バージョン変更などでアイコンが適用されなくなった場合は、「AppInfo」を参考にして、対応して下さい。
遊んでみた

iOS7からの流用ですが、iPhone5cが出た時のiPhoneケースを模したものです。
あまり穴だらけにしても見にくくなってしまうのですが、かと言って少なすぎても「模している」と言えなくなってしまうため、ほどほどの穴数にしました。
穴空き画像によるテスト遊びです。

実際に画像を入れ替えて適用させたスクリーンショットです。
穴の向こうに背景画像が見えています。
このサンプル画像はこちら
ー> boke_applecover.zip
遊んでみた2

これも、iOS7からの流用です。
Macを知っている方ならピンと来る方もいるかと思います。
かつてのモデルであるPowerMacG4を模してみました。
フォルダーの背景画像を変更した際に、アイコンも同じデザインにしたらどうかと思ったため、やってみました。
透過画像によるテスト遊びです。

実際に画像を入れ替えて適用させたスクリーンショットです。
リンゴ部分を浮かせるために、全体の透過率を0.8にしてあるので、少し暗くなっていますが、その分リンゴが見やすくなっています。
透過率が設定されていても、ベタ塗りの部分がきちんと表示されていることが分かります。
このサンプル画像はこちら
ー> boke_powermacg4_aim.zip
当サイトの更新状況を、アラートで表示するかどうかの設定をします。
保存する