透過画像各種

iPhoneでは、多くの透過画像を使用しています。
その中でも、頻度が多い割にあまり気にされない、一流脇役的な画像が、背景によく使われる透過画像です。

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

完全に背景となる画像は、引き延ばして表示しています。
ボタンやスライダーとその背景画像には、それなりの規則性が見えます。
これまでと比べて、色合いが明るくなりました。
スライダーが矢印方向に20px縮んだことも、今回の特徴ですね。
さらに、多くのボタン画像の位置が1px下がっています。縁取りが無くなっています。


参考にして下さい。

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

テーマ名/Bundles/com.apple.TelephonyUI/
BarBottomLock@2x~iphone.png

(2×192)

BarLCD@2x~iphone.png

(2×192)

bottombarbkgnd@2x.png

(158×192)

bottombarblue_pressed@2x~iphone.png

(58×94)

bottombarblue@2x~iphone.png

(58×94)

bottombarclear_pressed@2x~iphone.png

(58×94)

bottombarclear@2x~iphone.png

(58×94)

bottombardarkgray_pressed@2x~iphone.png

(58×94)

bottombardarkgray@2x~iphone.png

(58×94)

bottombargray_pressed@2x~iphone.png

(58×94)

bottombargray@2x~iphone.png

(58×94)

bottombargreen_pressed@2x~iphone.png

(58×94)

bottombargreen@2x~iphone.png

(58×94)

bottombarknobgray@2x~iphone.png

(120×94)

bottombarknobgreen@2x~iphone.png

(120×94)

bottombarknobred@2x~iphone.png

(120×94)

bottombarred_pressed@2x~iphone.png

(58×94)

bottombarred@2x~iphone.png

(58×94)

bottombarredfire_pressed@2x~iphone.png

(58×94)

bottombarredfire@2x~iphone.png

(58×94)

bottombarsmallgray_pressed@2x.png

(54×92)

bottombarsmallgray@2x.png

(54×92)

bottombarwhite_pressed@2x~iphone.png

(58×94)

bottombarwhite@2x~iphone.png

(58×94)

BulletinWellLock@2x.png

(70×70)

waiting_bottom@2x~iphone.png

(152×230)

waiting_top@2x~iphone.png

(152×214)

WellLock@2x~iphone.png

(54×104)

ページトップへ

遊んでみた

これらの画像は、すべて特定の画像として使われているとは思えません。
いくつかの画像は、色々な所で使い回されていると思うのです。
このページを作成するにあたり、どの画像がどの場面で使われているか、その全てを調べた訳ではありません。
今後、使いながら発見していけばいいかなぁ?という考えで、画像にそのファイル名を入れてみました。
幅2pxの画像にはファイル名を入れられる訳がないので、ある画像にしました。

先ずは、ロック画面で表示される時計です。
引き延ばされた(繰り返された)背景画像でピン!とくる方もいると思いますが、ピンストライプを流用しています。
向きが変わっていますが、これは画像の特性上、横ストライプにしました。
日付の書式変更は、当サイト「やってみたこと」の「文字列を変更してみた」を参考にして下さい。

中央のカレンダーは、当サイト「ウィジェットを作る」の「シンプルカレンダー」をご覧になって下さい。


ロック解除スライダー部分ですが、時計背景と同様に、こちらの背景にもピンストライプを流用しています。
ただ、同じ画像では芸がないので、オレンジのピンストライプにしました。
スライダーの枠も、スライダー本体も、ファイル名がクッキリ判別ができるので、どのファイルを弄れば良いか一目瞭然ですね。

電源オフの画面です。
基本はロック解除スライダーと同じですね。
ボタンの役割によって、使われる画像が違うのですが、こちらもちゃんとファイル名が確認できます。

今回のテストテーマをこちらで配布しています。
boke_transparent_imagesのダウンロード

ページトップへ

作ってみた

上のお遊びでは、ロック画面の時計背景画像にピンストライプを流用したのですが、実は画面サイズの画像でも遊んでいました。
幅フルサイズ画像でのお遊びだったのですが、最近、ステータスバーやナビゲーションバーでよく使い回しているOSXパンサー壁紙で作ってみたので紹介します。
今回は使い回しではなく、幅1136pxで作り直しました。

気をつけて欲しいのは、ステータスバーまでは含まれないということです。
右図ではステータスバーの部分まで画像が続いていますが、ピッタリ合う画像をそれぞれ用意したので、このような表示が実現できたに過ぎません。
ここでのサンプルは時計背景のみなので、ステータスバーの画像が欲しい方はステータスバーをご覧下さい。

今回のテストテーマをこちらで配布しています。
boke_BarLCDのダウンロード


<追記>
iOS6では、時計背景画像下部の境界線が残ります。
このラインの正体は、ナビゲーションバーの影です。
ナビゲーションバーの影を消せば、このラインは消えますが、ナビゲーションバーから影が無くなることを承知しておいて下さい。

ラインを消すだけのテーマを作っておきました ー> boke_no_line.zip

ページトップへ

2012/12/11