自分だけのカスタムiPhoneキーパッドを作るガイド

[digg-me]

素敵なiPhoneテーマをいろいろ試していると、すぐに自分だけのテーマを作ってみるのも楽しいかもしれません。まずはカスタムキーパッドから始めましょう。同じ手順で、電源スライダーやバッテリー充電中の画像など、iPhoneの様々な部分をカスタマイズできます。しかも、どれもとても簡単です。すごい！さあ、始めましょう！

謝辞: 私が使用したオリジナルのテンプレートとこのチュートリアルの多くの基礎を提供してくれた、非常に役立つチュートリアルを提供してくれた Mark に大いに感謝します。

必要なものは次のとおりです:

• Winterboard がインストールされた、脱獄済みの iPhone (当然!)
• ファイル転送ユーティリティ- 便利なiPhoneブラウザを使用しました
• グラフィック プログラム– レイヤー化された .png ファイルを編集可能 (写真は Fireworks)
• テンプレート ファイルはここからダウンロードできます。

iPhoneのデフォルトフォントを維持しながらキーパッドの背景だけを変更したい場合は、デフォルトのテキストとフォントが既に配置されているMarkのチュートリアルのテンプレートが適しているでしょう。（私はカスタムフォントとエフェクトを使用するために、文字と数字を再入力することを選択しました。）

作成するすべての画像とその使用方法の詳細を以下に示します。iPhoneでは、追加しない画像についてはデフォルトで標準画像が使用されるため、最初はカスタムキーパッド背景（dialerkeypad.png）から始めて、後から画像を追加することも可能です。

• dialerkeypad.png – ダイヤルエリア。この画像は幅320ピクセル、高さ273ピクセルである必要があります。
• dialerkeypad_pressed.png – 押されたキーのバリエーションについては同様です。
• dialercd.png – キーパッドの上にあり、通話時に番号が表示される背景です。
• addcontact.png – 「連絡先を追加」ボタン
• addcontact_pressed.png – 押されたバージョン
• delete.png – バックスペースボタン
• delete_pressed.png – 押されたバージョン
• callbkgrnd.png – 通話ボタンのアウトラインまたは透明部分の背景。水平方向に繰り返します。高さ74ピクセル。
• callbkgrnd_pressed.png – 押されたバージョン
• callglyph_big.png – カスタム キーパッドに表示される通話ボタン。
• callgplyph.png – 通話ボタン用の画像です。callglyph_big.png のコピーを使用できます。この画像は押下時に使用されるものではないため、実際にいつ使用されるかはまだ把握できていません。ただし、これらのコールグリフ画像が両方とも存在しない場合、カスタム通話ボタンは表示されません。詳細は後述します。

CustomKeypadTutorial.png を開くと、スライスとレイヤーがすべてサイズ調整され、レイアウトされて、すぐに使用できる状態になっていることがわかります。

キーパッドでは、キーが押されているような効果を出したかったので、customkeypad.png のすべてのキーに薄いドロップシャドウを追加しました。（押された時の効果はすぐに追加します。）

ボタングリッドのアウトラインを残すかどうかも決める必要があります。グリッドを非表示にするには、「Apple Stock Image」レイヤーを非表示にします。作業中にボタンのサイズや位置を確認するために参照できるように、レイヤーを完全に削除しない方が良いでしょう。

グリッドレイヤー

キーパッド用のフォルダが必要です。フォルダ構造は「Dialer Name/Folders/MobilePhone.app/」で、画像は一番下のフォルダに保存します。フォルダ名が適切でないと、キーパッドは動作しません。分かりやすくするために、チュートリアルのダウンロードには画像用の「My Dialer」フォルダを用意しました。「Your Images Here」というテキストファイルを探せば、画像がどこに保存されているかが分かります。スライスを.png画像としてエクスポートします。私は透明マットのpng 8設定を使用しました。

次に、作業用画像のコピーに、これまでに行った作業の完全なコピーである2つ目のフレームを作成します。これは「押された」画像バージョン用です。ボタンの押された状態に必要な変更を加えてください。

例えば、ドロップシャドウを削除し、テキストを数ピクセル下と右に移動して、ボタンが押されたような効果を作りました。また、テキストに光の効果を追加して、ボタンが押されたときに光るように見えるようにしました。

完了したら、これらの画像をスライスと同じ名前で保存し、末尾に_pressed.pngを付けてキーパッドフォルダに保存します。もちろん、作業ファイルも保存してください。

あの厄介な呼び出しグリフ

独自の背景を持つカスタム通話ボタンを作成したい場合は、少し手間がかかります。この通話ボタンは他のボタンのように押された状態のバージョンがないため、分かりにくいです。実際、通話ボタンが押された効果を得るには、この画像の一部を透明にする必要があり、callbkgrnd.png と lbkgrnd_pressed.png という画像が背景として使用されます。この部分を理解するのに少し時間がかかりました。

面倒な変更をしたくない場合は、この手順（および「連絡先を追加」と「削除」ボタン）を省略して、iPhoneのデフォルトのボタンを使うこともできます。私の場合はどうでしょうか？通話ボタンに背景画像を表示したかったので、いろいろと探しました。試行錯誤して他のテーマを見てみることで、希望どおりに表示できるようになります。

他のキーパッドテーマをダウンロードして分解してみると、コールグリフボタンの画像の特定の場所に数列の透明ピクセルがあることがわかります。コールグリフで実験してみると、コールボタン（callbckgrd画像ファイルで提供）の上に細い線が表示されないように画像の背景を表示するには、画像の下部に数列の透明ピクセルが必要であることがわかりました。

このボタンを作るには、背景画像から通話ボタンを配置する部分を切り取り、callglyph_big.png として保存します。次に、キャンバスのサイズを大きくして、下部に透明ピクセルをいくつか追加します。

エフェクトを追加して文字自体を透明にしました。画像を拡大し、文字の後ろにある背景画像を消去して、押した背景が透けて見えるようにしました。

テーマエリアに移動したら、iPhone にキーパッドを設置してください。

ファイルをiPhoneにダウンロードしたら、Winterboardを開いて新しいキーパッドテーマを有効化してください。画像を置き換えて新しいバージョンを確認したい場合は、Winterboardを開いてキーボードテーマを無効化してから有効化し、iPhoneがリスプリングするのを待つ必要があります。テーマを変更するたびに、キャッシュされていると思われる古いキーパッドが一瞬表示されます。

先ほども述べたように、基本的なアイデアはキーパッド以外にも応用できます。同じテクニックを使って、クールな花柄のスライダーテーマを、素敵な陰陽柄のスライダーボタンに変えました。テーマを入手したら、iPhoneのブラウザからファイルをダウンロードしてカスタマイズしてください。

これを試してみた方から、どうだったかぜひ教えてください。テーマ設定を楽しんでくださいね！