Let’s Make Your Retina Shine

Written by Steve in iDevices

I’ve have spent quite a bit of time discussing the difficulties of theming on the iPhone 4. Well now that we have the impending Jailbreak for 4.1 on the horizon and the iPod Touch 4th gen. Let’s talk about actually getting a theme onto your device and really making that display shine.

Whether you are making your own theme, applying a created theme or adding new icons to a theme. The rules remain the same.

  1. Icons are a standard size. At this time there are no strange shapes or sizes, your limited to the square with rounded corners.
  2. All apps from the App Store use icons of 114×114 and cannot have transparencies.
  3. Apps from Cydia use a canvas size of 118×120 as do the default apps.
  4. iOS 4 LOVES shadows (more on this later)
  5. BACKUP EVERYTHING (seriously back up all files BEFORE changing them)

Lets get started

Bundles are everything now. Rather than placing all of your icons into a folder called icons, you now have to use folders to tell the device where to look. This can seem like to much to start with but using these helpful spreadsheets its not to bad. Thiese will tell you what the Bundle name should be and also what the icon will be called. (they vary)
For example your mobile notes icon would be placed Yourtheme.theme/Bundles/com.apple.mobilenotes and the icon would be called [email protected]
The Spreadsheets are here and extremely useful.
Spreadsheet 1
Spreadsheet 2

First thing you will notice is that iOS4 just LOVES shadows. When you start to change a few things you will notice just how much this is the case. The icons on your springboard have a drop shadow behind them as do your dock icons and multitask bar. Heck even the wallpaper has a gradient fill shadow applied to it. Luckily though all of these are pretty easy to remove/change. They are located on your phone under the Springboard.app. This can be found at System/Library/CoreServices/SpringBoard.app

There are a few ways of changing these. You can add them to the SpringBoard.app folder within your theme. You can simply delete them from your phone (not recommended). Or you can rename them, change the .png to .bk or .alt

The offending files that your looking for are:

[email protected]
[email protected]
[email protected]
[email protected] (Switcher being your multitask bar)

If your unsure about images sizes etc here is a UIImage resource for the iPhone 4
iPhone 4 UI Resources

Most of the themes currently being released or in development actually have the Bundles in place for the icons created. Once you have found a theme that you like it’s simply a matter of transfering it to your device using SSH. By using CyberDuck or software like it navigate to Library/Themes and place your chosen theme in there. After you have placed your theme it will simply be a matter of activating it through Winterboard.

The Bundle locations will come into play once you need to either add icons to an existing theme or start to create your very own. Once again current themes will often come supplied with a template PSD to aid you in creating icons for it. One of the best examples of this is Black’UPS Darkness HD by JackieTran available here: Black’UPS Darkness HD

Not only is this one of the most visually stunning and complete themes currently available for the Retinal display. It also one of the most user friendly. It comes complete with a handy read me file, 2 templates (one for each size) and even short videos on how best to use the templates. I highly recommend it, even if just to see some examples of how to create icons and what sizes.

If you want to create icons of your own from scratch the base that you start on will be all important. When start out to create your icon, open photoshop and create a new document 114×114. Choose the rounded rectangle tool from the toolbar and set the radius to 20px, hold down shift and drag out your square. There you will have your starting point for your masterpiece. You can apply highlights, shading, depth and imagination and maybe you might just create the next big thing that we are all talking about.

There are 3 closing points that I want to touch on before I end this post.

The first probably the most known to you all. Make it mine available through Cydia will allow you to add that little extra to your theme. With it you can change your carrier name to something of your choosing. For you iPod owners it will allow you to change the iPod in the status bar. Another handy option in this app is that it will also allow you to change the statusbar time. You can add in your name, nickname or anything you desire. Or if you really like the minimal look you can just add in a space instead of text and  remove the carrier and time altogether.

Secondly is your dock. The dock has been able to be themed right from the start and now is no different. In fact its exactly the same as before. Simply create your dock and place it in the main folder of your theme named Dock.png. However now that we have wallpaper changing as native don’t be afraid to apply a blank dock. If you apply a blank dock.png and instead add the dock to your wallpaper you can change both on the go for dramatic effects to show friends. It can add new life to current icons or just give a completely different effect to suit your mood.

Lastly, Iconoclasm. This extremely useful app is available in Cydia. It will allow you to alter the layout of icons to spectacular effect. (see top screenshot) You can adjust how many you have in each row or column and even the spacing in-between. Ideal if you like the minimal or cluttered look. Also of note would be Gridlock. Also available on Cydia this is a great replacement for iBlanks. It will let you place icons anywhere on your springboard without them bouncing into a uniform setting. Yes you can include gaps between icons without the need for iBlanks. Its free and well worth checking out.

Well thats all for this time folks. I hope that this has been helpful for you and most importantly until the next time, have fun.


  1. Gert Jan says:

    Great and very informative item Steve. Very usefull. Keep it up buddy! ;)

  2. Umar Irshad says:

    Ohh nice stuff man :) thanks

  3. adni18 says:

    Very good work! Thank you for all these useful information!

    Though, I still can’t get rid of the dock shadows that appear in the top outside area of the dock, (not the dock icons shadow)

Leave a Reply

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Notify me of followup comments via e-mail. You can also subscribe without commenting.