How To Skin the iPhone Keyboard


New Member
Jul 16, 2007
I found this over at ModMyiPhone. (I just copied it here.) Thanks to the original poster.

This tutorial will teach you how to open up the .artwork files in the iPhone, using iPhoneShop 0.4.
It will help you do things like change the keyboard image to a new one or just change the color of the keyboard.

This tutorial was written for OS X, the process is pretty much the same in Windows - you just open the command line (Start>Run>cmd) instead of the Terminal.


> An .artwork file from the iPhone. In this example I will be using the Keyboard-StandardQWERTY.artwork file, which controls the iPhone's general keyboard.

> iPhoneShop 0.4 or greater.

Step 1

In this tutorial, I will be putting everything in a folder called artwork, which I will store on my Desktop. I recommend you do the same, unless you are decent enough at command line stuff to know where to change paths, etc. So put your .artwork file and the iPhoneShop-0.4.jar file in that folder. Also, create a blank folder in there called pngs. This is where the images from within your .artwork file will wind up.

Step 2

Open up Terminal (Applications>Utilities>Terminal), or if you are in Windows, open up the command line (Start>Run>cmd), and type:
cd ~/Desktop/artworkand hit return.
If you have multiple users on your computer, type:
cd /Users/Your_User_Name/Desktop/artworkand then return.

Step 3

Next, type:
java -jar iPhoneShop-0.4.jar ARTWORK file-you-are-opening.artwork export ./pngs/and hit return. Since I am wanting to open Keyboard-StandardQWERTY.artwork in this tutorial, I replace file-you-are-opening.artwork with that.
  • if you are using a windows machine, you need to create the pngs directory in the artwork folder, before running this command.
Step 4

You may get a couple errors at the front, no worries, then you should see a bunch of lines pass by, each one is an image being pulled from the .artwork file. At the end you will be back to the command prompt.

Step 5

Now you can see all your images stored in the pngs folder we created (Desktop/artwork/pngs).

Now you may edit away, but remember a couple things:
>Transparent images must remain transparent. In Adobe Photoshop please add one black layer and set fill to 1 or 0%
>File dimensions must not be changed!

Step 6

Now, to recompile into an .artwork file again, lets go back to Terminal or the command line, and make sure we're back in the artwork folder by again typing:
cd ~/Desktop/artworkand hit return. Remember, if you are using a Mac with multiple users, type:
cd /Users/your_user_name_here/Desktop/artworkand hit return.

Step 7

Now type:
java -jar iPhoneShop-0.4.jar ARTWORK file-you-want-to-create.artwork import ./pngs/
and hit return. I am creating KeyboardGeneralQWERTY.artwork in this tutorial, so I will replace file-you-want-to-create.artwork with that.
This line is telling your computer to use iPhoneShop, a Java (.jar) file to import all the .png's from the folder called pngs and create an .artwork file called KeyboardGeneralQWERTY.artwork.

*****NOTE----I'm using windows and typing in

java -jar iPhoneShop-0.4.jar ARTWORK Keyboard-StandardQWERTY.artwork export ./pngs/

worked for me instead of the command above. So, if you're getting error messages in Windows when typing in the commands above, use the one I used. It worked perfect!****

Step 8

You will again see a bunch of lines going by as it processes each .png file, and will end with a message telling you where the new file is stored (in your /Desktop/artwork/pngs folder).

****You'll have to put the file in the /System/Library/Frameworks/UIKit.framework folder.
You need to restart your phone for the changes to take effect.****


I made a brown one. You can download it here. It's too big to upload here. I'll make more as time permits.



New Member
Aug 13, 2007
this is sweet! if only i knew how to use photoshop better to make my own icons and stuff -_-