アイコンマスクとアイコンシャドウ

iPhoneのホーム画面には、いくつものアイコンがあります。
そのアイコンは、初めからiPhoneのアイコンらしく作られているものが多いのですが、表示の際、実は左のようなマスクが掛けられているのです。
さらにシャドウまで掛けられて表示されています。
iPhoneらしく表示するための配慮なのか、変なアイコンを作らせないためなのか分かりませんが、用意されています。
ホーム画面のアイコンには、上部に円弧状の反射効果がありますが、それのAppIconOverlayはここでは省きます。

オリジナル画像サイズ詳細

シャドウとは名ばかりで、実際には



参考にしてください。

テーマ構成ファイル一覧 & オリジナル画像

テーマ名/Bundles/com.apple.mobileicons.framework/
マスク SBSearchPageIndicator@2x.png

シャドウ SBSearchPageIndicatorCurrent@2x.png

<注意>
ここで紹介しているファイル名や画像サイズは、Retinaディスプレイ用です。
@2xファイルのみで@2xファイルが表示されるものもありますが、今回ここで紹介したUIImages内のページドットアイコンは、「@2xファイル」と「@2xを省いたファイル」をセットで用意しないと@2xファイルが表示されません。
画像自体は@2xファイルをコピーしたもののままで構いませんので、2つのファイルをセットで用意することに注意して下さい。

<追記>
大文字と小文字の違いに気をつけて下さい

ページトップへ

遊んでみた

ページ数によってドットの数が増え、その上を現在ページを示すアイコンが1つ移動していくので,パックマンで遊んでみました。
ドットはそのままドットなのですが、分かりやすくするために大きく(36px)作りました。
現在ページを示すアイコンをパックマンにしました。移動後のドットは消えませんが、パックマンが移動していくのは面白いと思います。
虫メガネアイコンはどちらも、パックマンの敵にあたる「アカベエ」にしました。
追いかけキャラのアカベエなので、パックマンを追いかけている感じを出してみましたが、いかがでしょうか?

2011/03/05