iPhoneized

If you like designing custom iPhone icons and themes, you’ll find this little package extremely handy. Giovanni Corti developed the iPhone Theme Creation Tool using HTML, CSS and jQuery.

It allows designers to test their icons and themes locally, in a browser, before loading them onto the iPhone.

It’s quite simple to use. The first thing you’ll need to do is download the package. Extract it to a local directory and open iPhone.html or iPodTouch.html. By default you will see the first page and the native iPhone icons.

Switch to the second page (click page indicator dot) and you’ll see the contacts icon and 16 blank icons.

This means you have enough space for 40 custom icons to test.

To replace the native icons with your own, open new-icons.css and take a look at the code:

/*This is an Icon*/
#page-1 .Blank, #page-2 .Blank { background: url(Theme/Icons/blank.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*This is another Icon*/
#page-1 .Blank, #page-2 .Text { background: url(Theme/Icons/digg/Text.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

All you’ll need to do is replace each instance of the word ‘Blank’ with whatever the name of your icon is. For example, I downloaded the Digg icon set and used 16 of those icons. I placed them in their own directory (digg) within the icons directory so my css now looks like this:

/*Digg Calendar*/
#page-1 .Calendar, #page-2 .Calendar { background: url(Theme/Icons/digg/Calendar.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg SMS*/
#page-1 .Text, #page-2 .Text  { background: url(Theme/Icons/digg/Text.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg Clock*/
#page-1 .Clock, #page-2 .Clock  { background: url(Theme/Icons/digg/Clock.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg Contacts*/
#page-1 .Contacts, #page-2 .Contacts  { background: url(Theme/Icons/digg/Contacts.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg iPod*/
#page-1 .iPod, #page-2 .iPod  { background: url(Theme/Icons/digg/iPod.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg Mail*/
#page-1 .Mail, #page-2 .Mail  { background: url(Theme/Icons/digg/Mail.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

etc etc. Refresh iPhone.html or iPodTouch.html and they should now look similar to this:

Happy Designing!

Download Source here