透過画像各種

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

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

完全に背景となる画像は、1pxを引き延ばしていますね。
ボタンやスライダーとその背景画像には、それなりの規則性が見えます。


参考にして下さい。

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

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

(1×192)

BarLCD@2x~iphone.png

(1×192)

bottombarbkgnd@2x.png

(158×192)

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)

bottombarknobgray@2x~iphone.png

(142×94)

bottombarknobgreen@2x~iphone.png

(142×94)

bottombarknobred@2x~iphone.png

(140×94)

bottombarblue@2x~iphone.png

(58×94)

bottombarblue_pressed@2x~iphone.png

(58×94)

bottombarclear@2x~iphone.png

(58×94)

bottombarclear_pressed@2x~iphone.png

(58×94)

bottombardarkgray@2x~iphone.png

(58×94)

bottombardarkgray_pressed@2x~iphone.png

(58×94)

bottombargray@2x~iphone.png

(58×94)

bottombargray_pressed@2x~iphone.png

(58×94)

bottombargreen@2x~iphone.png

(58×94)

bottombargreen_pressed@2x~iphone.png

(58×94)

bottombarred@2x~iphone.png

(58×94)

bottombarred_pressed@2x~iphone.png

(58×94)

bottombarredfire@2x~iphone.png

(58×94)

bottombarredfire_pressed@2x~iphone.png

(58×94)

bottombarwhite@2x~iphone.png

(58×94)

bottombarwhite_pressed@2x~iphone.png

(58×94)

ページトップへ

遊んでみた

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

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

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


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

電話がかかってきたので、電話は後回しにしてスクリーンショットを撮ったのですが、基本はロック解除スライダーと同じですね。
ボタンの役割によって、使われる画像が違うのですが、こちらもちゃんとファイル名が確認できます。

メールが届いたときのスクリーンショットも撮っておいたのですが、シンプルすぎてつまらないですね。

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

ページトップへ

作ってみた

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

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


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

ページトップへ

2012/01/29