Custom keypad dialer
Posted: February 10, 2013
I'm going to show you how to take your stock boring looking dialer keypad and make it a
little more exciting. Here's my before and after. Pretty big difference huh?
This tutorial is for the iPhone 5. Other iPhones will have different dimensions for their
images, and most likely different names as well.
I will be using WinterBoard for this custom graphic, but you don't have to. You could
just SSH into the mobilephone application and replace the graphics as needed. If you do
this, you might want to rename the original graphics as "backup" or something so that you
can go back if you want to...
I have a template you can download
I created this in Adobe Photoshop. It is in PSD format.
Find whatever image you would like to place on your phone's keypad. It must be 640 pixels
in width by 998 pixels in height at a resolution of 72 dpi.
Open the template graphic. Copy and paste your image into the your image goes here layer.
This step is going to be a loooooooooong one. I'll slice this graphic into the 9 pieces
that the iPhone will then reassemble into the completed keypad. I find it is best to
complete this step in one sitting or else you may hopelessly confuse yourself as to where
you left off if you take a break in the middle.
First I'll make the add contact button. All buttons on this screen have two states:
how they look normally and when they are pressed. However, both states can look the same
if you want. Normally when you press a button on the dialer it turns a little gray. You
can either have it change to a colored button (which is what I'm going to do by making
pressed buttons turn blue), or just keep the image the same, or you could even have just
the number and the letters change color. Take your pick.
To create the add contact button graphic it must be 213 by 156 pixels in size. I am only
going to demonstrate how to make a button one time. You can use these same steps, and a
little logic to create the remaining buttons with simple math. In the tool bar, click
Image, then select Canvas Size...
In the pop up window, change the unit of measurement to pixels, then enter 213 in the
Width box, and 156 in the Height box. Then select the lower left corner (because that's
where the add contact button is) as the anchor. Click OK. You'll receive a pop up
warning about the image being clipped, that's ok. We will undo this once we have the two
buttons we need.
There's your first button. Save this image as addContactButton-normal-568h@2x~iphone.png
Now make the version of this button when it is pressed. Go back to the template graphic,
check the visibility for the layer blue background. Save this graphic as
Now for the most important step. Click Edit, then select Step Backward. Your entire
template should now be visible again.
I want my photograph to show through the green call button. There are two images
that must be created: callButton-normal-568h@2x~iphone.png which is 214 by 156 pixels and
contains the image only, callButton-pressed-568h@2x~iphone.png which is also 214 by 156
pixels and contains the pressed image only.
Some dialers include a graphic called callGlyph_small-568h@2x~iphone.png which is 165 by
120 pixels and contains only the image of the phone handset and the word Call on a
transparent background. WE WILL NOT BE MAKING THIS GRAPHIC. IT'S NOT NEEDED. The iPhone
will generate this content over our custom button for us. I originally made this graphic
and it worked just fine. But learned on accident that I didn't need it after all.
Go back to your template graphic and use the Canvas Size tool to crop the template down to
the size of the call button which is 214 by 156. First set an anchor point at the bottom
and crop it down to a height of 156 pixels.
Then crop with an anchor point to the right, with a width of 640 minus the 214 that the
contact button is which comes to 426.
Then crop with an anchor point to the left and a width of 214. Your call button should now
look like this. Save this as callButton-normal-568h@2x~iphone.png
Now turn on the blue background layer. Then save this image as
Click Edit, then select Step Backward three times. Your entire template should be visible
Now to make the delete button. It is 213 by 156. Use the Canvas Size tool to crop the
template down to the size of the delete button. Enter 213 in the width box and 156 in the
height box, then select the lower right corner as the anchor point. Click OK. Your
button should look like this. Save this as deleteButton-normal-568h@2x~iphone.png
Go back to the template graphic and turn on the visibility for the blue background layer.
Save this image as deleteButton-pressed-568h@2x~iphone.png
Click Edit, then select Step Backward one time. Your entire template should now be
Let's make the dialing keypad next. It is 640 by 617. Use the Canvas Size tool. The
width should be 640, and the height 998 (minus the bottom 3 buttons) is 842. Click the
top row as the anchor point. Click OK. Your image should now look like this.
Use the Canvas Size tool again. The width is 640 and the height is now 842 minus the LCD
bar height leaving 617 pixels. This time click the bottom row as the anchor point.
Your keypad should look like this. Save this as dialerView-normal-568h@2x~iphone.png
Go back to the template graphic and turn on the visibility for blue background. Save this
image as dialerView-pressed-568h@2x~iphone.png
Click Edit, then select Step Backward twice. Your entire template should now be
The final graphic to make is for the LCD area. Use the Canvas Size tool. The width is
640 and the height is 225. Click the top row as your anchor point then click OK. Your
template should look like this. Save this file as lcdView-normal-568h@2x~iphone.png
Create a folder for your phone theme. Lava dialer/Bundles/com.apple.mobilephone
Now place all your images in the com.apple.mobilephone folder.
Place your theme folder into the iPhone's /Library/Themes folder.
Launch WinterBoard and check out your new theme.