Here's a guide to auto-skinning app-store icons:

(extra special thanks to santaf for teaching me how to do this.... at least 8 times )

THIS IS VERY IMPORTANT - THIS ONLY SKINS APP-STORE ICONS... native apps and cydia apps have to be manually skinned... essentially, if you press and hold down an icon (like you're going to move or delete it from your springboard), all the app icons that jiggle around with the "x" box allowing you to delete them ARE APP-STORE APPS - those will skin with your mask and shadow... all the ones that jiggle and DON'T show the "x" box to delete are native or cydia apps - those you have to manually create.

There are three files that the iPhone and iTouch use to skin app-store icons (located in ios3 theme folder "UIImages") - the AppIconMask.png, AppIconShadow.png and AppIconOverlay.png:




First step to applying auto-skinning to your theme's icons is DELETE THE APPICONOVERLAY.PNG - you don't use this image at all, and here's why.. On custom themes the overlay image will work, just not on all icons for some reason... If you have some very nice overlay effects, it's a shame to see those few icons that inevitably show up with your custom icon frame but your beautiful overlay effects missing. Like one of my favorite journalists once said, "...40-percent of the time, it works EVERY time..." ... oh, and welcome to the buggy world of iDevice theming  ...the way I'm showing here builds the overlay effects INTO THE MASK AND SHADOW. If you have problems with the mask and shadow not skinning correctly, you can also try using a transparent version of the overlay.png - that sometimes makes a difference.

VERY IMPORTANT - MAKE SURE YOUR CANVAS SIZE FOR BOTH THE MASK AND SHADOW IS 59x60 PIXELS (118x120 for iP4) - NO BIGGER, NO SMALLER... APP STORE ICONS ARE THIS EXACT SIZE AND AUTO-SKINNING WON'T WORK IF YOU DEVIATE

You apply all the effects to the AppIconMask.png and AppIconShadow.png. The MASK is used mainly for the icon graphic and the shadow effects on top of the graphic. The effects are achieved by using the color BLACK to HIDE any desired area of the graphic that you DO NOT want to show - notice in the illustrations how the outside edges of the mask are all black - that means that portion of the stock app store icon WON'T show.... The color WHITE is just the opposite - it's used to achieve transparency, so different shades of white can apply a wide range of desired over-effects - solid white means it's 100% transparent in that area and the entire graphic image for that particular area WILL show.

The SHADOW allows you to apply the custom icon frame and some other minor effects to the icon, like using solid black or white to accentuate the shaded areas of the mask that you applied. Imagine that the shadow sits ON TOP of the Mask, and any area of the AppIconShadow.png that resides directly above the solid black areas of the AppIconMask.png will appear at 100% opacity on the final product. If you place any portion of the shadow over the white or gray areas of the mask however, you'll notice the stock icon graphic will appear on that part of the shadow image you created.

FOR BOTH IMAGES, MAKE SURE TO LEAVE THE OPACITY AT 100%, MEANING NO PORTION OF EITHER IMAGE SHOULD BE TRANSPARENT - YOU SHOULDN'T BE ABLE TO SEE THE CANVAS THROUGH ANY OF YOUR IMAGE GRAPHICS... this is unless you want your icons to actually be transparent when they appear on the springboard - if this is a part of your theme idea then play around with the opacity, but make sure to leave the solid black portions of the mask 100% opaque with no transparency or portions of the stock icon will show up.

I've added a couple helpful images below so you can see what it looks like on my themes:







... this is an important note - if you follow all these steps and the images just don't seem to be skinning correctly, you may want to try saving the MASK image as a 24-bit png (go to "File" and select "Save for Web and devices" -- thanks to Blue for this helpful tip).

For version ios3 the AppIconMask and AppIconShadow need to be in the theme's "UIImages" folder (don't forget to DELETE THE OVERLAY). For ios4, you must manually create a new folder named " com.apple.mobileicons.framework", put both the mask and shadow pngs in and place the new folder in the theme's "Bundles" folder. And this is VERY important - as for everything else in your theme, the file names MUST BE CASE SENSATIVE and match the exact spelling as the stock iphone theme mask and shadow files. Make sure you have them named as "AppIconMask.png" and "AppIconShadow.png" - they must be spelled exactly how I just labeled them. This nuance can be said for all files in a custom theme - when in doubt tap into the stock theme and make sure your custom images have the exact same spelling with upper-case and lower-case, just like the stock theme has them labeled (if you don't have a copy of a stock iDevice ios3 or ios4 theme, GET ONE -- you can do a search here on MMi and find multiple links to download stock themes)...

IPHONE 4 AUTO SKINNING:

Follow the exact process above (although you'l be doing it on 2-times the canvas size). In the com.apple.mobileicons.framework folder (within the theme's bundles folder). Label the mask "[email protected]" and the shadow "[email protected]". You may also want to put the low-res mask and shadow files in there too, because the icons that show up on the lists when you're actually IN the App Store-application on your device show up low-res, so they will stay stock without the 59x60 px versions in there.

I encourage anyone with more detail that I didn't provide to add your two cents. I know this is probably very confusing, but this should give you a great head start -- mess around with the images and load them on your phone and respring often until you land on something you like. Hope this helps

-- by the way, if anyone is interested in any other similar tutorials like this, please provide any suggestions and I'll see what I can do...