Make Your Own Custom iPhone Keypad Guide

By , Oct 19, 2008

[digg-me]

Full keypad

It doesn’t take too long playing with nifty iPhone themes to realize it might be fun to make your own. We’ll get started with a custom keypad, but you can use the same principals to customize many areas of your iPhone, like the power sliders, the battery charging image, and much more. And it’s all pretty easy. Fancy that! So let’s get started.

Credit where it’s due: A big thanks to Mark for his exceptionally helpful tutorial which provided the original templates I used and the basis of much of this tutorial.

Here’s what you’ll need:

  • A jailbroken iPhone (Duh!) with Winterboard Installed
  • File transfer utility – I used the handy iPhone browser
  • Graphics program – capable of editing layered .png files (Fireworks pictured)
  • The template files, downloadable here.
Butterfly keypad

If you want to change the keypad background only while retaining the default iPhone fonts, you’ll probably prefer the template from Mark’s tutorial, which has the default text/fonts, already positioned.  (I choose to retype the letters and numbers to have custom fonts and effects.)

Here’s a breakdown of all the images we’re making and how they’re used. The iPhone will default to standard images for any you don’t include, so you can always start off with just a custom keypad background (dialerkeypad.png) and add more later.

  • dialerkeypad.png - The dialing area. This image must be 320px wide x 273px high.
  • dialerkeypad_pressed.png – Same, for pressed key variations.
  • dialercd.png – Above the keypad, this is the background for number display when making a call.
  • addcontact.png – The “Add a Contact” button
  • addcontact_pressed.png – Pressed version
  • delete.png – The backspace button
  • delete_pressed.png – Pressed version
  • callbkgrnd.png – The background for either an outline and/or transparent areas of call button. Repeats horizontally. 74px high.
  • callbkgrnd_pressed.png – Pressed version
  • callglyph_big.png – The call button that you’ll see on your custom keypad.
  • callgplyph.png- Another call button image, can be a copy of the callglyph_big.png image. I haven’t  been able to figure out yet when this image is actually used, because it is NOT used as a pressed version but your custom call button will NOT show if you don’t have both these callglyph images. More on that later.

Open up CustomKeypadTutorial.png, you’ll see slices and layers all sized and laid out and ready to go for ya.

Sliced up Kepayd
Sliced Image Template
Now for the fun part – get busy changing the fonts, colors, and effects as desired. You’ll probably want to add your own background pic first – I picked a lovely butterfly pic that I snapped with my iPhone, of course.

For my keypad, I wanted to create the illusion of keys being pressed. So I added a slight drop shadow to all the keys in customkeypad.png. (We’ll get our pressed effects done in a minute.)

You’ll also need to decide if you want to keep the button grid outlines or not. To hide the grid, make the “Apple Stock Image” layer invisiible. It’s better not to delete the layer entirely so you can refer to it to review size or positioning of the buttons as you work.
Grid Layer
Grid Layer
Duplicate your KepadGet everything just how you want it, and save a backup copy of this image. Backups are your friend, oh iPhone themer! Then let’s get back to your working image. We’re preparing to save the images.

You’ll need a folder for your keypad. The folder structure is “Dialer Name/Folders/MobilePhone.app/” with the images placed in the innermost folder. If the folders are not named properly, you keypad won’t work. To make it easy, I included a “My Dialer” folder in the tutorial download to use for your images, so just find the “Your Images Here” text file to know where your images belong. Export the slices as .png images; I used png 8 settings with transparent matte.

Then, in your working image copy, create a second frame that is an exact copy of the work you’ve done thusfar. This is for your “pressed” image versions. Make any changes you’d like for the pressed state of your buttons.

For example, I removed the drop shadows and moved the text down and right a few pixels to create a pressed button effect. I also added a light glow to text make the buttons appear to light up when pressed.

When you’re done, save these images with the same name as their slices but ending with _pressed.png and put them in your keypad folder. Save your working file, of course.

That Pesky Call Glyph

If you want a custom call button with your own background, you’ll have to work a little harder. That call button is confusing, since it doesn’t have a pressed version like the other buttons. In fact, to get a call button pressed effect, part of this image must be transparent, and the callbkgrnd.png and lbkgrnd_pressed.png images provides the backgrounds. This took a while for me to pin down.

Now, if you don’t want to mess with it, you can easily skip this step (as well as the “Add Contact” and “Delete” buttons) for iPhone to use the default ones. Me? I wanted my background image to show on the call button, so I foraged on. Trial and error and looking at other themes is the way you get this to display the way you want.

Downloading other keypad themes to deconstruct, you’ll find that the callglyph buttons have a few rows of transparent pixels in certain places on the images. Experimenting with my callglyph, I was able to determine that it needed a couple rows of transparent pixels at the bottom of the image to display my image background without a thin line above the call button (provided by the callbckgrd image files).

To make this button, I cut out a section of the background image where the call button belongs, and saved it as callglyph_big.png. Then I increase the size of the canvas to give a couple transparent pixels at the bottom.

Call Button Requires Special Attention

I added my effects and made the letters themselves transparent. Blowing up the image, I then erased the background image behind the letters so that the pressed background can show through.

That Callglyph Button
Call Glyph

So are you ready? Let’s get this stuff over to your iPhone and see how your work of art turned out. Go to the iPhone browser (or you file transfer method of choice), find the Winterboard themes, and add your new dialer folder.

Find the themes in the iPhone Browser

Now that you’re in the themes area, put that keypad on your iPhone, man!

Put it on your iPhone!

Once the files are on your iPhone, open Winterboard and activate your new keypad theme. Any time you replace one of the images and want to see the new version, you’ll also need to open Winterboard, deactivate and reactivate your keyboard theme and wait for the phone to respring. Each time you change the theme, there will be a brief flash of the old keypad which appears to be cached.

As mentioned, the basic idea works for more than just keypads. I used the same technique to alter the cool flower slider theme to some nice Yin-Yang slider buttons. Just grab yourself a theme and use your iPhone browser to grab the files and customize away.

I’d love to hear from anyone who gives this a go, and know how it worked out for you. Happy theming!

  • Share:
  • Follow:
  • Joyce

    Hi there… i know this may not pertain to this blog, but i’ve downloaded 4 themes already from cydia and everything works beautifully, but my keypad when i give out calls won’t work. on the orbz theme the picture pops out but the number pad itself can’t be pressed so it’s just a picture =[

    Help please?

  • http://none kevin matheis

    can i also customize universal fonts on my phone? i am very fond of a font that i got from dafont.com (journal) and i would love to transfer it to my phone to use it al my standard font that the phone uses for EVERYTHING, not just certain apps. if there is a simply procedure to do this, please let me know…i would be greatly obliged. i am probably right in-between moderate and considerably shy of expert when it comes to tech skills…so feel free to lay a non-laymen’s procedure on me if that is the case. thank you guys so much…you do a great service for all of the people fighting against the man by trying to save money by learning to do it ourselves!!!

    very sincerely,
    kevin matheis

  • Wyatt

    Very good tutorial. I was able to go from beginner to having a very nice dialer. Took me a few hours and another hour or 2 to figure out a mistake. While the dialer worked fine my image at the top where the dialed digits appear was missing. Looking at the guide it stated the file was dialercd.png and thats what the name was titled when i exported it out of Adobe fireworks. The correct name to get the image to display is dialerlcd.png. Hope this helps someone else later on.

    • Ivy

      Very helpful! I was wondering about that myself. I’m having some trouble with the call button though

  • Lar

    Excellent!

    Now, where are the png files located for modding the “InCall dialpad”.

    i.e. Contacts, Speaker, Hold, Mute, Add Call, etc…

    I have not found the location of theses pngs, any information would be greatly appreciated.

    Thank you

  • Meredith

    What picture editing software do you reccomend I use? (preferably free)

  • Pingback: Create my own dialer. - ModMyi Forums

  • http://javiypilar.com Javi A.

    Thank you so much for this awesome tutorial !

    I’ve been many hours trying to find the most complete tutorial available.

    Now I’m gonna try !

    Thank you !

  • http://facebook JMD

    Best Software for this is Adobe Fireworks.
    thats whats being used in the guide

  • HanSolo

    I cant create the dailer but my images change sizes when imported to the iphone 4 ex I created addcontact.png shows up 54 x 32 pixal on iphone 4 when it should be like 108 x 65. I have tried every thing i can think of. Tried photoshope and this method with fireworks still no success and any one help

  • Ivy

    Im having trouble with the call button. Can someone tell me step-by-step?

    Also, the easiest way to get this onto your phone is to tether it and us iFunBox

  • Bobby Sufi

    Can you delete the word call from the original stock app?