How to make Auto Create Icons - This will theme all AppStore Apps


I get this question quite a bit so here is "How to Create and Auto Skinning Icon mask and Shadow"


Lets start first with the file structure.

Create a folder MyNewIcon

Inside MyNewIcon create a folder named Bundles

Inside Bundles Create a folder com.apple.mobileicons.framework

Simple enough huh? 

Inside the com.apple.mobileicons.framework we will have three images the AppIconMask@2x~iphone.png, AppIconShadow@2x~iphone.png, and AppIconOverlay@2x~iphone.png

The AppIconOverlay@2x~iphone.png only works half the time, but is not needed so go ahead and make this image transparent.

Time to photoshop
Open photoshop and create a new canvas 118x120 on a transparent background. *If you deviate from this size there is a chance it will not work

Create your icon. At this point I just make the icon in full. Make it look like the finished product.

Here is mine from 1ntox


As you see it looks like the finished product, and will work for when you theme cydia apps.

Next Step would be to break the icon down in photoshop.

I usually do the AppIconShadow first cause its simple. Just remove the image and make sure you have a black background and White Glow (if you have a glow)
Here is mine

Last and final step is to create the mask.

This is where everybody messes up. "mainly cause they dont follow directions"

So here we go. Remove everything from the icon in photoshop besides the part where you want the AppStoreIcon image to be. 
As you see here there is nothing but the space where the appstoreicon image would be. 


Now you may have noticed that the mask above is white and grey. Anything that is white Will show 100% of the image behind it. If different shades of grey then it would be used kinda like opacity. If black then nothing will be shown. 

The Mask has to be at 100% opacity. This means no transparency in the mask AT ALL!!! 
Once you have finished your mask it is time to save it. But before we do we need to fill the background of the mask. Since on a mask the White Shows 100% we need to fill the background with Black. Yes fill the background with black. This is a have too. 

Here is mine


Now to save, you DO NOT want to go to file and save as. You will never get the mask to work nomatter how hard you try.

You want to go to "File" and select "Save for Web and devices" Select png 24

That's it put the images in the folders you made earlier, stick it in winterboard and respring.

No comments:

Post a Comment