Results 1 to 3 of 3

How to Create AUTO-SKINNING App-Store Icons for Your Theme.... you can use any icon mask ... Apple iPhone forum

  1. #1
    sooner's Avatar
    sooner no está en línea Stack Professional
    Join Date
    Aug 2008

    How to Auto Mask Icons including on iOS4


    How to Create AUTO-SKINNING App-Store Icons for Your Theme....

    you can use any icon mask you like from any theme just save the Icon Mask

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

    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.


    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 saying the images as 24-bit pngs (go to "File" and select "Save for Web and devices"

    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 "", 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)...


    Follow the exact process above (although you'l be doing it on 2-times the canvas size). In the folder (within the theme's bundles folder). Label the mask "AppIconMask@2x.png" and the shadow "AppIconShadow@2x.png". 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...


    An easy prgram to use to change from jpg to png is Fotosize its fREE it will also let you size those icons.

    Good luck and enjoy.

    iLord is DEAD!

  2. #2
    bmay82's Avatar
    bmay82 no está en línea Stack Professional
    Join Date
    Feb 2008
    Nice info Sooner
    Apple iPhone 5C 16gb (Green)

    Follow Me on Twitter

  3. #3
    cobra66r's Avatar
    cobra66r no está en línea Stack level 1
    Join Date
    Mar 2011
    Sooner, thank you for the tutorial. It was a huge help! I'm just starting to learn the ins and outs of iPhone themeing and still have a lot of questions. Similar to this tutorial I was wondering if you knew what files control the folder icons? I created my auto mask icons and that is working great but the folder icons are still being skinned by the theme that I was modding. Any assistance you might be able to provide would be a great help.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts