Good evening iOS themers! Since I have some downtime. (waiting on a jailbreak) I would like to share some of my 3+ year experience theming iOS. In this post and future posts, I will help you understand theming a bit more. With over 12 themes (could be more) I have learned quite a bit. Useful tricks that help in theming, customizing sizes of images, getting familiar with the file stucture, and much more. I hope you follow along.
iOSThemingTip #1 Winterboard
As with most things you start at the beginning. Winterboard is where all the magic happens. Winterboard lets you change the icons of applications, use a custom wallpaper, and change pretty much everything you see.
This doesn't come easy, but with a little knowledge you will get the hang of it. Winterboard uses a main theme folder in which you put other folders so Winterboard knows what images you want to change. We will name this theme iOSThemingTips.
Create a folder iOSThemingTips. Inside that folder make 2 more folders. You will want to name these Bundles and Fallback.
Bundles Folder: You will need to name the Bundles folder with a Capitol B. This is very important in winterboard to get Caps on everything correct. Why a bundles folder? Each application contains a cfbundleidentifier. This is required on any app made for iOS. Winterboard uses this bundleidentifier to know what apps images you are changing.
Finding bundle names: Ok so we have our iOSThemingTips theme with our Bundle folder created. Now how do we find the bundle identifier? Easy go to ifile, or ifunbox. Go to system applications. Inside applications choose AppStore. Inside the AppStore.app you will see an info.plist every app has this. Open it. Inside you will find various strings and keys. Look for <key>CFBundleIdentifier</key> <string>com.apple.AppStore</string> This is your bundle name!!
Create a folder in Bundles and name it com.apple.AppStore. Thats it. Now go back into SystemApplications/AppStore.app. Inside this folder shows images you can theme. For instance the icon is icon@2x.png. Make your icon with the same size, name it icon@2x.png and put it into your com.apple.AppStore Folder. Put the iOSThemingTips Theme in Library/Themes, go into winterboard and select this theme. Respring and wala themed Icon!
Note#1 If you are theming icons, make sure you respring via winterboard. Go to winterboard deselect theme re select then respring.
Note#2 In winterboard you will notice a list icon on the right. You can grab this and move your themes. Whatever is on top with override whats below it.
This is just beginning, we will get in more indepth stuff in a couple days. Have to get the basics out of the way. If your looking for more info on winterboard check out Saurik write up. I believe every themer must read this. Winterboard
Welcome back! Just a quick overview. In #iOSThemingTips 1 We learned how to create a theme folder, inside that folder create a Bundles folder, Fallback folder, find a bundle name, and theme the AppStore icon.
Lets touch on the Fallback folder real quick. This folder is used to hold your loading screens or splash screen. This is the screen that shows while an app is loading. Inside this folder we need two things Default@2x.png and Default@2x~iphone.png.
This will replace most app's loading screens. To do them individually you will need to use the same process as we used to find the icon name and image. Go into the application folder, find the loading screen image, look in the plist to verify what the bundle name is, make a bundle, put the new image you made, naming it the same as was in the application folder.
QuickTip: The compass loaders are difficult to find. they will be in the English.lproj and other language named folders. There is also another image, you can theme here. Just make a folder named exactly as the language named folder. then put the images in, and put it in the com.apple.compass bundle.
Think thats it on loaders. I'll give my point on it. It is not necessary to theme every app with a different screen. I'm glad Saurik has implemented this feature. These images are 640x960 keep that in mind. You may want to render, if you use photoshop in File/Save for web devices then change to png-24, and click save. Then compare the size to File/SaveAs. You will see it is much smaller, and you could tweak even more. Compare loss of quality etc.
UISounds: Everyone loves unique sounds for there themes. These are pretty simple to do. First and foremost, like almost everything you do in theming you will need to know where these images are in the system.
System/Library/Audio/UISounds/ is where they are located. These are .caf files. Pretty much useless for anything but iPhone sounds. To theme them you will need to create a folder UISounds. Put this in the base of the theme. Meaning it will be with the same folder as Bundles and Fallback.
So how do you make them? For mac and windows I recommend WavePad. Nice simple program. Heres the secret. Save as .aiff once you save as .aiff just rename the .aiff to .caf now rename it as the one in the phone and put it in the UISounds folder.
You can also purchase sounds offline, there are tons of .wav sites. Bunch of free too. You can open the .wav in wave pad tweak it, then save as aiff rename to .caf and wala.
Thats it for today, if you have any questions post below. Next we will finish up with the base of the theme. Explain info.plist, and show you a few things i bet you didn't know:)
Support: If you like this please share it. What did you think about this text design? Easier to read?
This write up will explain the Folders folder. Up to this point we have a theme folder. Inside the folder we have a Bundles folder, Fallback folder. This is really all you need for a theme folder.
You may say that is wrong, but thats all you need. If you see a theme that has more folders than that. Then the themer used a different system to theme certain things. I will explain.
Some themes will have a Folders folder. Alot of my themes do. The Folders folder will contain other folders named yourapp.app for example we made com.apple.AppStore to theme the AppStore Icon. Well instead of doing that we can name a Folder AppStore.app stick it in the Folders folder, and It will theme the same.
Why to try not to use the Folders folder. The way the phone is setup is by cfbundleidentifier which we discussed in ThemeingTips #1. Saurik has included in winterboard the ability to use Folders as yourapp.app. This is only a winterboard feature. So of course using it will cause the phone to use more ram to use the theme.
Well I have done it why? If you are working on uiimages and you have the folder com.uikit.framework in your bundles. It is full of 100's and 100's of images. Instead of adding new images to that folder to test them I will make a folder in Folders named UIKit.framework. This way the only items that are in the Folders folder is the UI, I am testing.
Other features of the Folders folder that helps keep your themes current on all firmwares. If the Folders folder wasnt possible, then we could not make themes that work on all firmwares. Reason for this is Apple updating there firmware. Say in 5.1 the AppStore icon was named icon@2x.png well in 6.0 they may name is Icon@2x.png.
Just because the capitalization change, if you name it wrong it will not work. So usually for icons like this I will put one named icon@2x.png in com.apple.AppStore and put Icon@2x.png in the AppStore.app folder. This way it will work on both firmwares. This is just an example and the AppStore does not have these icon names. But there is a few apps that do.
An easy way to tell what apps should be named, is to look in your spotlight search. These names will be the name you put before the .app. One thing you will need to be very aware of is that. If you put an image in say com.apple.AppStore and put a different image but named the same in the AppStore.app folder the Bundle will always override it.
Planned on talking about info.plist, but this has become longer than I anticipated. Next one;)
Support: Glad everyone is liking these. If you could share them by hitting the tweet or like button below. Also you can help by visiting our sponsored ads. Your click counts!
Follow Us
No comments:
Post a Comment