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

**TCcentex** · 07-29-2010, 05:50 PM

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 - you must "flatten" the MASK image in photoshop then save it as a 24-bit png (go to "File" and select "Save for Web and devices" -- thanks to Blue for this helpful tip). THE MASK MUST BE FLATTENED AND SAVED THIS WAY TO WORK.

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]" (ios5 = "AppIconMask@2x~iphone.png" and the shadow "AppIconShadow@2x~iphone.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

JESUS IS LORD

**AnthonyGiola** · 07-29-2010, 11:21 PM

Wow great post TC. I know this took me a while to figure it out. I mostly had problems with the black and white doing transparency

hopefully this will help put some new comers.
If a mod checks out this thread defo make it a sticky.

Out not put

Here is just another picture that is basically the same as TC's. Just so that you have more examples to look at and understand

Lol woops left in a black border around the AppIconShadow FAIL!!!
I just made those fast lol

**ziggy7** · 07-30-2010, 05:25 AM

Aye great info there TC..thanks

**icyferno** · 07-30-2010, 09:59 AM

this is what i find a really useful thread, makes understanding how auto-creating appstore icons work out. thanks!

**Ven0M0D** · 07-30-2010, 10:51 AM

i did this and it didnt work..soo i looked into a theme that i had that already worked. i think i need app icon overlay or something for iOS 4. im not sure correct meif im wrong

**TCcentex** · 07-30-2010, 11:12 AM

Did you create the new folder you have to place the mask and shadow into and put it in the Bundles folder in your ios4 theme? Check the second to the last paragraph on the first post for the details...

**Ven0M0D** · 07-30-2010, 11:17 AM

yeah i placed the folder and checked it 3 times. but i took an overlay that worked with the theme and it works now. soo you need tht on iOS 4

**TCcentex** · 07-30-2010, 11:29 AM

If it was already a theme that had an overlay then you must continue using it... You might notice that the overlay won't apply to all app store apps - that's the issue with the overlay, it a little buggy with custom themes. If you incorporate the effects of the overlay into the mask, you won't have that problem

**10millionmiles** · 07-30-2010, 11:33 AM

if you make an app icon mask you can shape the icons

**Blue** · 07-30-2010, 11:37 AM

Thanks for that, 2 weeks too late for me LOL, i used this technic on my wallet:

JUST one word as my first masks did not work. On photoshop you must EXPORT THEM "for web and devices" as a "PNG-24" graphic.

**decke** · 07-30-2010, 11:41 AM

I didn't export for web and devices and it works fine.. Weird. I did save it as 24png though

@10millionmiles: Yup. The icon will be shaped whatever the mask is

**TCcentex** · 07-30-2010, 01:57 PM

Originally Posted by Bluemetal

Thanks for that, 2 weeks too late for me LOL, i used this technic on my wallet:

JUST one word as my first masks did not work. On photoshop you must EXPORT THEM "for web and devices" as a "PNG-24" graphic.

Holy moly - the idea that I'm two weeks late on possibly teaching you something blows me away... Your Realized icons are the very images that got me into theming. It's an honor for you to have posted here Blue - I'm a huge fan

**metaserph** · 07-30-2010, 03:14 PM

Excellent and helpful info. Tim, kudos bro!

**PhanaticD** · 07-30-2010, 05:07 PM

how come for appiconmask there is the shades of gray? isnt the appiconshadow supposed to make the shine etc? if the shadow adds the effects like half being brighter whats with the gray ?

**TCcentex** · 07-30-2010, 05:15 PM

Originally Posted by PhanaticD

how come for appiconmask there is the shades of gray? isnt the appiconshadow supposed to make the shine etc? if the shadow adds the effects like half being brighter whats with the gray ?

for the mask, black and white are used to set the transparency of the icon graphic... so different shades of gray allows you to apply different levels of transparency to the graphic... almost like the appiconoverlay is built into the mask -- notice on my final products that the gray areas of the mask produced a glass-effect over the icon graphic, and the black and white in the shadow determined what the gray shading revealed - a darker or lighter shaded transparency

**AnthonyGiola** · 07-30-2010, 09:54 PM

How do you save it as a web PNG from Photoshop CS5??
I cant find the option anywhere and its the only thing that could possibly be causing this thing to not skin right...
Its applying the stuff on the shadow mask but it wont use the Mask no matter what I do...
I swear.
If anyone else can render in 24png is it alright if i send you marked PSD's of them and can you render them out for me??
Huge thanks if anyone can.

**Truckinlow** · 07-31-2010, 03:46 AM

good job with this TC!

**Blue** · 07-31-2010, 04:01 AM

I´m on CS 4 and there is no way to simply save it as PNG 24 so i found out there is a function under "File" called "für Web und Geräte" (for Web and device). I don´t know if this is called the same on a english photoshop version.

So basicly if your mask is not PNG-24 i does not work at all !

**AnthonyGiola** · 07-31-2010, 08:02 AM

Alright then Ill go looking for it. It would seriously stink if they dont have it for CS5

Thanks blue

Yes I just found it under
File>For Web and Device
At the top right where it says GIF change it PNG-24
Thanks Blue

**Aldog18** · 07-31-2010, 08:23 AM

A very usefull post
Now i know the secret

Time to make my own

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.

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

iPhone 2G|3G|3GS iPod Touch 1G|2G|3G New Skins / Themes Launches

New Skins / Themes Launches

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

The Following 71 Users Say Thank You to TCcentex For This Useful Post:

The Following 3 Users Say Thank You to AnthonyGiola For This Useful Post:

The Following User Says Thank You to ziggy7 For This Useful Post:

The Following User Says Thank You to icyferno For This Useful Post:

The Following User Says Thank You to 10millionmiles For This Useful Post:

The Following 5 Users Say Thank You to Blue For This Useful Post:

The Following 2 Users Say Thank You to metaserph For This Useful Post:

The Following User Says Thank You to PhanaticD For This Useful Post:

The Following User Says Thank You to TCcentex For This Useful Post:

The Following User Says Thank You to Truckinlow For This Useful Post:

The Following 2 Users Say Thank You to Blue For This Useful Post:

The Following User Says Thank You to AnthonyGiola For This Useful Post:

The Following User Says Thank You to Aldog18 For This Useful Post: