[Mentalikryst]

This thread will teach you the basics of making a WinterBoard theme. Also included is how to make an icon. This will not make you a great artist, or the next great designer, but simply allow you to put your artistic skills toward creating a theme for your iPhone or iPod Touch.

How to make an Theme

The first thing I will say, is that using Ubuntu (or a similar, user friendly Linux distro) can speed up the process, mainly just in the incorporation of SSH into the file explorer, allowing drop-and-drag between the device and your computer. This guide is done in Ubuntu 9.04 with nothing but:

• The GIMP
• A Text Editor (any)

For Windows you will need:

• WinSCP
• The GIMP
• Notepad

Ok, first lets just create the basic folders needed for a theme, here is the directory tree (all are folders, even though some may seem to be files):

|-myTheme.theme
| -Bundles
| -Icons
| -UIImages

That is a very basic theme, now lets add some files.

The first file you will want is your Info.plist file in your root directory of your theme. Just create it using a text editor. (IMPORTANT: It must be Info.plist, not Info.plist.txt!). All you really need in it is:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0"><dict>
</dict></plist>

Now, that will not do anything, as all it will do is define that it is a UTF-8 text document that is XML code and uses the PLIST 1.0 DTD. If you want some cool effects, like changing the color of your icon label text, try this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0"><dict>

<key>DockedIconLabelStyle</key>
<string>color: red</string>

<key>UndockedIconLabelStyle</key>
<string>color: green</string>

</dict></plist>

There are many things you with the labels, such as font, color and many other things. If you want more details, just ask or google it.

Now you have your basic theme. Now for some customising, how about Icons?

How to make an Icon
This is done in GIMP, but it should be relatively easy to do the same thing in photoshop.

First, create a 60x60 image, with a transparent background.



Then, zoom in to 400-800%, it helps alot.

Then select the rectangle select tool and, in the settings, make it have rounded corners (5-10px) and then select all of the image, what will result is a selected area that is beginning to look like an iPhone icon.



After you have that, select the bucket tool (without deselecting the area) and fill it with whatever color you want the background to be.




Next, select the oval select tool, and select something like this:



Now create a new layer, and on that new layer, fill that area selected by the oval with white. Next, change the transparency of the new layer to about 30%.

We are almost done creating the basic icon. Now for applying the top and bottom "glow". Create a new layer and just select the gradient tool and create gradients at the top and bottom. Again, change the transparency of this layer to about 30%.



Now all thats left is to get rid of the glow around the corners. To do that just reselect the entire thing with the rectangle tool with rounded corners enabled (like you did to create the background) and press ctrl-I (invert selection) and then delete. Repeat for each layer.

Now you have a basic icon. Just add an image and put it below the glow and glare layers and you have a (possibly) good looking icon.

How to create a wallpaper

Please download this file, as it is the template for the wallpaper. GIMP XCF. Photoshop PSD. PNG (No layers).

That should give you a basic idea, just mod the background, top bar and dot-bar to whatever you want and add it to your theme. Do not worry about legal issues, don't even give me credit. I release the images into public domain. Just put a png version in the root directory (named "Wallpaper.png") and a png version in "myTheme.theme/UIImages/" named "DefaultWallpaper-iPhone.png". (replace "iPhone" with "iPod", if you have an iPod)

How to change strings

This section will tell you how to change some simple things, like your "slide to unlock" text, your "enter passcode" text, your "slide to shutdown" text and your "slide to cancel" text.

First create a folder called "com.apple.springboard" in your bundles folder. Then create another folder called "en.lproj" (replace en with your iso language code) within that folder. Then create a file called "SpringBoard.strings" (text file where .strings is the extension). In that you can add many things, to get a full list, I recommend googling it. Here is a sample.

"AWAY_LOCK_LABEL" = "Unlock my iFone";
"SYNC_IN_PROGRESS" = "Syncin' yo junk";
"ENTER_PASSCODE" = "ENTER PASSWORD";
"POWER_DOWN_LOCK_LABEL" = "killall *";
"SLIDE_TO_CANCEL" = "Slide me to cancel";

Coming Soon: How to mod the UI of individual apps, how to create a lockscreen background and how to change the dock.

[Broomhead]

Thanks for the info, appreciate it

[Mentalikryst]

Originally Posted by Broomhead

Thanks for the info, appreciate it

Wait until its done, you only read the first part.

[blkcadi]

Nice job. certain this will help a bunch.

[Zwayne]

Nicely done. Thanks for the guide.

[soto806]

I Will definitely be using this.
Thanks!

[wakara1n]

How do u make the rectangle rounded?
I'm running gimp on a mac if that helps. I would think it was the same anyway

Oh. And then how do u add the icons to the coding??