How to Skin Safari and your Ipod's/iPhone's GUI

This will be a quick how-to on skinning your Safari browser and many other GUI elements previously thought impossible. This tutorial assumes that you have already jailbroken your iPod Touch or iPhone. I have a separate tutorial on how to do that, you can search my blog for "Jailbreak." You'll also need to SFTP into your Touch, or gain read/write access to the file directory in some way. I use WinSCP, and it works flawlessly.

Now, the first thing to do is install the Java SDK, if you don't already have that installed. You can download it from the top right of this blog. Next, download iPhoneShop, also available at the top right of this blog under the downloads section, to any directory on your computer. Something convenient, preferably. I saved mine directly to the C drive. On that same directory, create a folder, and name it something simple, like "png."

Open WinSCP or whichever client you're using, and navigate to System/Library/Frameworks/UIKit.framework on your touch, and locate a file called Other.artwork. Transfer the file to the same directory that you save iPhoneShop to.

Now open the command prompt, or a terminal on your computer, and navigate to were you saved these two files.

your going to be extracting the PNG files from Other.artwork. To do this type in the command prompt;

java -jar iPhoneShop-0.6.jar ARTWORK Other.artwork export /png/ (or in place of /png/ the name of the directory you created).

This should extract all of the artwork to that folder.

You'll now have a few hundred different PNG's in that folder that you're free to edit. The images for Safari are; Other-ver111_4.png and Other-ver111_97.png. You need to make sure that you don't alter the file dimensions when editing. To play it safe, I use the original image as a template, and design on top of that image.

After you've created your artwork, you'll want to compile it back into Other.artwork. To do this, open the command prompt again, and again navigate to where you saved iPhoneShop, and type:

java -jar iPhoneShop-0.6.jar ARTWORK Other.artwork import /png/

Now all that's left is to transfer the newly created Other.artwork file to the UIKit directory of your touch.

Note: Do not delete Other.artwork from your touch, this will make things difficult for you. Instead COPY it to your computer as a backup... rename it Other.artwork.backup and then transfer it back to your Touch. Now you can overwrite the original.


Enjoy.