Icons and Icon Shadows without winterboard

I hope you already read the Theming without winterboad post if not please do this is just adding on to that to make even better looking icons.

This method was used in iOS6 on their notification icons.

You can create any icon and just throw it into the correct app and that app will use apples mask.

The mask is nothing but a square black image with rounded corners. (BORING)

I will explain how we can spice it up a bit.

First off navigate to System/Library/PrivateFrameworks/MobileIcons

Inside here you will see an icon mask, the one we are after today is

AppIconMask@2x~iphone.png

This one image, changes all the sizes/shape of the icons. Today I will be using EZ4U2NV icon for an example.

This is how this icon looks.


I love this icon.. Anyway this is what we want to achieve on our iphone. Contrary what you think we cannot do as the steps in Theming without winterboad  most of it we can, but not all.

First we want to move this icon to the right place. It is for photos so we will move it into MobileSlideshow.app

After this we need to adjust apples mask. Remember as of now it is just a Square black image. We need it round and we also want to incorporate this shadow. 

So this is what I recommend. Take this image (the icon above) in to photoshop.  Draw a circle over  this icon, then add shadow to the bottom. Here is a pic



Do not mind the yellow background. It is just there  to show you it the round circle has a shadow.

The mask lets the iphone know what part of the icon you want to show. I'm sure you've seen these ugly round icons going around. the flat ones?  Yes it is because they only created a black circle. Well if you add  this shadow to both the mask and the icon you will end up with a look much like this.




Much much better imo, almost looks real...  You don't have to do exactly as this tutorial does, but I hope it helps you understand how to give your icons a better look. 


No comments:

Post a Comment

Subscribe to: Post Comments (Atom)