Make and use themes with WinterBoard
Section 14: Custom keypad dialer

Updated: July 31, 2009

Page 1 of 2

Let's face it, the stock phone keypad is BORING looking. You can download themes on Cydia (in conjunction with WinterBoard) to spice up your dialing experience like this. This dialer is called Retro Phone Dialer.




But I want to show you how to put your own personal photo on your keypad, to achieve something like the images below. You can also change the numbers and letters and get rid of the grid lines if you wanted. Each image will have its own instructions as they use a different approach. First I'll cover how to create the image on the left.

Method 1: Step 1.

Find an image you want to use for your keypad. It must be 320 pixels in width by 273 pixels in height. You'll also need to superimpose the numbers for the keypad over your image, or you're going to have to guess where the buttons are.

I've simplified this process by providing this Adobe Photoshop template graphic in PSD format which will allow you to layer the numbers and letters, and the separator lines over your image.

In this image you see the template file I provide with all the layers turned on. Your image goes on the "your picture goes here" layer. The "Apple stock image" layer is the grid that divides the buttons. You could also turn off the visibility of the numbers or the letters if you want.

When you are done compiling your graphic, simply save it as a png file and name it dialerkeypad.png

Method 1: Step 2.

At this point when you press a button it will turn blue as seen below.




If this is okay, then skip ahead to Step 3. If this is not okay, then you can make it so the buttons do not change. To do this, duplicate your custom dialerkeypad.png image and rename it dialerkeypad_pressed.png.

There is one more option. You could color the numbers like this.




To do this, go back to the template with your photograph in it. Make whatever changes you'd like to the numbers or the letters, and save this image as dialerkeypad_pressed.png

Method 1: Step 3.

Launch Fugu and navigate to your Themes.xxxxxx folder. Click the New Folder button and name this new theme Custom dialer. Double click to go into this new folder.




Now make a folder called Folders.




Go inside this folder.




Make a folder called MobilePhone.app.




Go inside this folder.




Copy your image(s) into this folder.

Method 1: Step 4.

Launch WinterBoard and try out your new theme.

Method 2: Step 1.

Now let's make the keypad that extended into more of the screen. I am using Adobe Photoshop CS 2. Other graphic editing programs should be able to yield the same results.

There are a couple threads on Mac Themes that supply templates to make this style of keypad. This is the one I'll be using. I am also hosting this template myself right here, just in case the original author (CountVirgo) alters his template which would affect this tutorial. Here is another thread offering another template.

After you have downloaded the dialer template from this site and decompressed it, find whatever image you would like to place on your phone's keypad. It must be 320 by 480 pixels in size.

Method 2: Step 2.

Go into the dialer2 folder and open the Dialer.psd file. Photoshop should give you a warning message. I chose No.




Copy and paste your image into the Background layer of the Dialer.psd file.




I also turned off visibility to the original image below.




If you go into the dialer 2 folder, then right click the MyDialer.theme folder and select show package contents, then go inside Folders, you will see a file called MobilePhone.app. You can also right click this file and select show package contents. Inside this you will see all the graphics you must create to make this dialer. It isn't necessary to examine these graphics as I'm going to cover how to create them anyway. Just know that this is the folder directory structure we will recreate once all those graphics have been made.

Let's make the addcontact_pressed.png first. This graphic must be 107 by 64 pixels in size. This is where the trial and error part comes in. It helps to zoom in to 200% and then expand the size of the image window so you can more easily grab the exact edge of the image. Use the Rectangular Marquee Tool to draw the size of the graphic you need over the add contact button. Note: If at the end of this tutorial your phone's keypad graphic doesn't look right, it's because of these steps. Use the gray grid lines and edges of the call button as reference points.




Press Command C, then press Command N and a pop up window will appear with the image dimensions of the file to be created. Are they 107 by 64? If not, try try again until you get it right. When it is correct, select OK in the pop up window.




Go back to the Dialer.psd file and select Edit, Copy Merged.




Go back to the new blank image that was just created (Untitled-1) and press Command V. You should now have the add contact button (part of your photo and the graphic logo for add contact). Save this as addcontact.png.




Next make the version of this button when it is pressed. Go back to Dialer.psd, check the visibility for the layer Buttons - Pressed.




Select Edit, Copy Merged. Go back to the same new image graphic that is open (Untitled-1) and press Command V. You should see the image change slightly to show the pressed state. Now save this graphic as addcontact_pressed.png. Close this new image window now so you don't get confused when making the rest of the buttons.





Let's make the call button next. Go back to the Dialer.psd image and uncheck the visibility on the Reference GUI layer. Then uncheck the visibility for Buttons - Pressed. Using the marquee tool, draw the outline for the call button. Make sure not to overlap part of the add contact button you just drew. Press Command C, then press Command N. Will the new image be 106 by 66 pixels? If not, try again. When you have selected the correct size, click OK at the pop up window.




Go back to the Dialer.psd file and select Edit, Copy Merged. Go back to the new image (Untitled-1) and press Command V. You should now have the call button which is pressed (part of your photo and the graphic logo for call). Save this as callglyph_big.png. Save it again as callglyph.png. Yes I realize that on the stock iPhone keypad the call button does get brighter when you press it. This will not happen using this method. I will cover a method later for having a see through button without the green tint. This button will not get brighter when pressed either.




Now let's make the delete button. Go back to Dialer.psd and turn the visibility back on for the Reference GUI layer. Using the marquee tool, draw the outline for the delete button. Make sure not to overlap part of the call button you just drew. Press Command C, then press Command N. Will the new image be 107 by 64 pixels? If not, try again. When you have selected the corrrect size, click OK at the pop up window.




Go back to the Dialer.psd file and select Edit, Copy Merged. Go back to the new image (Untitled-1) and press Command V. You should now have a delete button (part of your photo and the graphic logo for delete). Save this as delete.png.




Go back to the Dialer.psd image and turn on the visibility for Buttons - Pressed.




Select Edit, Copy Merged. Go back to the same new image graphic that is open (Untitled-1) and press Command V. You should see the image change slightly to show the pressed state. Now save this image as delete_pressed.png. Close this new image window now so you don't get confused.