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...

Step 1.

I have a template you can download here. 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.

Step 2.

Open the template graphic. Copy and paste your image into the your image goes here layer.

Step 3.

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 addContactButton-pressed-568h@2x~iphone.png




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 callButton-pressed-568h@2x~iphone.png




Click Edit, then select Step Backward three times. Your entire template should be visible again.

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 visible again.

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 visible again.

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

Step 4.

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.