Pages

How to create a winterboard theme +iOS8 Bundles

Most probably think it's pretty simple to create a winterboard theme, but if you want a great theme it takes a lot of time, and a lot of work. One step in making a theme is finding things to theme. One of the biggest things is App icons. Which is what we will talk about.

There is many ways you could go about getting app icons, but I will explain a simple process. First you will need a program to ssh into your device. A simple easy to use program is i-Funbox. You can find links and a tutorial on iFunbox here. iFunBox Tutorial (I also recommend iFunbox as it makes iOS pngs usable)

Once you have ifunbox installed you simply browse to var/mobile/Containers/Bundle/Application/. Inside this folder you will see a bunch of names like 09A3DCEE-350C-458A-A90E-84F6. This is the applications unique identifier. As far as picking out apps it is pretty hard to do. It would involve opening each folder to see the .app name. To make this a little easier (if you want a specific app) you can take all of these folders, and move them to your mac/pc. By moving them to your mac you are able to use finder to search the folder for a specific app name.

Getting the info you need to theme. Inside these folders they contain the ####.app folder. Inside the .app folder you will find all the images and files needed for the app. The things you will need (for theming icons) is all the app icons, and the info.plist.

The info.plist contains information about the app. Only thing we will need from this is the app's bundle identifier. You need this bundle identifier to create a Bundle for winterboard to use. The example below shows the bundle for the Zedge.app. You can open this info.plist in Xcode or a text editor.


Most all bundles start with com, but just look for the key Bundle Identifier. Now to theme this. First create a folder, and name it exactly as the bundle id. Now you will need to create a simple file structure for a theme. Winterboard themes have one main folder. This will be named the name of the theme. For example we will use Zen8, so create a folder named Zen8. Inside the Zen8 folder you need to create another folder name Bundles. Make sure you capitalize the B. Inside the Bundles folder, you will put the folder you named from the info.plist bundle identifier. In the end you should have a file structure such as Zen8/Bundles/com.zedge.Zedge.

Now the icons. Inside the Zedge.app folder you will see icons that look just like the icon on the springboard.


As you see there are multiple icons. Each one of them theme a specific part of the phone. For example AppIcon29x29@2x.png will probably theme the settings icon, AppIcon60x60@2x.png will probably theme the springboard icon. AppIcon72x72@2x.png will probably theme the icon on an iPad. I say probably because I am only judging by the size of the icon. 29x29@2x is an icon with the size of 58px x 58px. 29 x 2 = 58. 

It is best just to take all these icons, and stick them in a folder. Preferably the one you named according to the bundle identifier. Your files structure now should be Zen8/Bundles/com.zedge.Zedge/AppIcon60x60@2x.png.

Now the actually fun part, making the icon. You can use many tools to create the icon, Photoshop, Gimp, Illustrator etc. Once you make the icon save it, and overwrite one of the stock images in the folder. Since iOS8, I have been making my icons 180x180 which happens to be the AppIcon60x60@3x.png size. You can go bigger, but downscaling also changes the quality of the image, so I like to stay around 180.  

Once you have one icon saved inside the bundle, go to the bundle, and open that icon in photoshop (or whatever you use). We need to create the rest of the icons, since we already made the design, it is better to work with a flat png (meaning no styles). When a png has no styles you can change the size and it won't effect the styles of the images. By styles I mean drop shadow, bevel etc.

In photoshop you want to change the size of the icon and overwrite the existing icons. First is to get the icon size.  (If you pay attention to the names 29x29@2x etc you can tell how big the image needs to be.) If you don't know then on a mac you can right click, and icon to get the icons info. (or open in photoshop)



Photoshop has the ability to save images for web and devices. We are using this image on a device so we will use this option. To do this the shortcut is command, option, shift, s. All pressed at once, or you can go to file, save for web and devices.


When you select this option you will be displayed this screen.


This is great so not only are we saving at a good size (for a device) if you look at the highlighted number that is the size of the icon. You can easily get to this by pressing tab, or selecting it with your mouse. Change this number to the size of the icon, press save and replace the icon you are theming in the bundle. Thats it, now do it for every icon in the folder :P  Music helps...

That's the just of theming an app icon. Now take the Zen8 folder (or whatever you named it) and put it in Library/Themes, then select the theme in winterboard. 

As you see it is not easy to theme, and designing the icon is just a piece of the puzzle. Think of this next time you are complaining about a theme being a certain price. (or the next time you pirate a theme) Themers do this for 100's of icons, and give it to you for less than you paid for your lunch.

Hope this helps. I get the question a lot on how to theme. It really is hard to make a simple tutorial as it isn't so simple.















Follow

If you have any questions my Twitter is @JunesiPhone

Previous Article - Zen 8 Winterboard iOS8 Theme