+ Reply
Page 1 of 15 123 11 ... LastLast
Results 1 to 20 of 282

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


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

is a discussion within the

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

forums, a part of the

New Skins / Themes Launches

section;
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
...
  1. #1
    Theme Kingpin TCcentex's Avatar
    Join Date
    Jan 2010
    Location
    San Antonio, Texas
    Posts
    1,777
    Thanks
    1,857
    Thanked 1,972 Times in 876 Posts

    Default How to Create AUTO-SKINNING App-Store Icons for Your Theme....
    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
    Attached Thumbnails Attached Thumbnails How to Create AUTO-SKINNING App-Store Icons for Your Theme....-cydia3.jpg  
    Last edited by TCcentex; 03-08-2012 at 08:41 AM.

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

    .ZIP (02-28-2012), 1hihum (11-30-2010), Aldog18 (07-31-2010), ansari0 (10-05-2010), AnthonyGiola (07-31-2010), aph1982 (09-03-2010), ApocalypticSpirit (07-23-2012), bgattis (01-13-2011), cachehog (01-13-2011), Calmfixup (11-05-2010), Charly_ (11-11-2010), cj.artworks (10-17-2010), CrazyAssNuTTcase (10-24-2012), dmagic1 (08-11-2010), dnapro (02-28-2011), duongdior (12-26-2010), eddietah (08-28-2010), eenofonn (04-06-2011), ElderRoco (07-12-2012), FG-Paradiize (10-18-2010), FiVe5tArPlAy3r (07-30-2010), flybritn (07-31-2010), gabessdsp (04-17-2011), GaN-MaN (01-14-2011), Heardy10 (08-26-2010), henftling (12-30-2012), icyferno (07-30-2010), ikesmasher (11-21-2010), iPhoneMuscle (08-03-2010), It's Mi (10-27-2012), iVereor (12-05-2010), iZangetsu (09-23-2011), Jackim (10-14-2010), Jahooba (09-23-2011), jamjamnorman (09-28-2010), jannah (10-15-2010), jayeshb (05-20-2011), johnposh (11-08-2010), JonnyBoy333 (03-04-2011), JumpWar (08-04-2010), kaB00M (09-27-2010), Maarten16 (08-15-2010), Maleficent66 (09-02-2010), ManNextDoor (11-04-2010), McManimal (08-30-2010), mikelegend (01-17-2011), milleung (05-02-2011), MindGem (08-19-2010), munaim1 (08-10-2010), NDM (10-30-2010), o3vegeta (08-26-2010), PhanaticD (07-30-2010), Phatmartino (10-13-2012), Ramses2 (08-26-2010), ReBourne (11-01-2010), santaf (08-03-2010), seanG (08-12-2010), sephiroth726 (03-26-2011), SirTimothy1 (02-17-2011), Sk37cH (08-08-2012), streinjer (08-23-2010), TheCrow13 (08-27-2010), Truckinlow (07-31-2010), UltimateCydiaSource (12-16-2010), umma_urban (12-29-2010), VampiraQula (08-30-2010), whitebelt (01-09-2011), wim66 (07-31-2010), yahhcold (08-07-2010), yamakasi73 (12-31-2012), ziggy7 (07-30-2010)

  3. #2
    Undisputed Theme Champ AnthonyGiola's Avatar
    Join Date
    Jun 2010
    Location
    .theme>Bundles
    Posts
    2,344
    Thanks
    588
    Thanked 1,568 Times in 853 Posts

    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
    Last edited by AnthonyGiola; 07-29-2010 at 11:21 PM. Reason: Automerged Doublepost

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

    Aldog18 (08-14-2010), jdogg84 (01-11-2012), TCcentex (07-29-2010)

  5. #3
    Failing means yer playin! ziggy7's Avatar
    Join Date
    Mar 2010
    Location
    Scotland
    Posts
    2,797
    Thanks
    4,406
    Thanked 2,374 Times in 1,275 Posts

    Aye great info there TC..thanks

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

    TCcentex (07-30-2010)

  7. #4
    What's Jailbreak? icyferno's Avatar
    Join Date
    May 2010
    Location
    Singapore
    Posts
    19
    Thanks
    2
    Thanked 4 Times in 4 Posts

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

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

    TCcentex (07-30-2010)

  9. #5
    iPhone? More like MyPhone
    Join Date
    May 2010
    Posts
    119
    Thanks
    21
    Thanked 9 Times in 9 Posts

    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

  10. #6
    Theme Kingpin TCcentex's Avatar
    Join Date
    Jan 2010
    Location
    San Antonio, Texas
    Posts
    1,777
    Thanks
    1,857
    Thanked 1,972 Times in 876 Posts

    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...
    Last edited by TCcentex; 07-30-2010 at 11:26 AM.

  11. #7
    iPhone? More like MyPhone
    Join Date
    May 2010
    Posts
    119
    Thanks
    21
    Thanked 9 Times in 9 Posts

    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

  12. #8
    Theme Kingpin TCcentex's Avatar
    Join Date
    Jan 2010
    Location
    San Antonio, Texas
    Posts
    1,777
    Thanks
    1,857
    Thanked 1,972 Times in 876 Posts

    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

  13. #9
    What's Jailbreak? 10millionmiles's Avatar
    Join Date
    Jun 2010
    Posts
    15
    Thanks
    2
    Thanked 8 Times in 5 Posts

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

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

    TCcentex (07-30-2010)

  15. #10
    Master Theme Creator (aka Bluemetal) Blue's Avatar
    Join Date
    Dec 2008
    Location
    Germany
    Posts
    6,402
    Thanks
    2,941
    Thanked 12,196 Times in 3,337 Posts

    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.

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

    Bar alush (08-06-2010), It's Mi (10-27-2012), iZangetsu (09-23-2011), TCcentex (07-30-2010), ziggy7 (07-30-2010)

  17. #11
    Theme Creator decke's Avatar
    Join Date
    Aug 2008
    Location
    Tampa, FL
    Posts
    891
    Thanks
    269
    Thanked 707 Times in 277 Posts

    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
    Last edited by decke; 07-30-2010 at 11:45 AM.

  18. #12
    Theme Kingpin TCcentex's Avatar
    Join Date
    Jan 2010
    Location
    San Antonio, Texas
    Posts
    1,777
    Thanks
    1,857
    Thanked 1,972 Times in 876 Posts

    Quote Originally Posted by Bluemetal View Post
    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
    Last edited by TCcentex; 07-31-2010 at 11:04 AM.

  19. #13
    "The Truth" metaserph's Avatar
    Join Date
    Feb 2009
    Location
    Houston, Texas U.S.A.
    Posts
    4,680
    Thanks
    12,505
    Thanked 9,122 Times in 2,709 Posts

    Excellent and helpful info. Tim, kudos bro!
    @Metaserph
    "You can only attain Peace through spreading Love to create Unity and earn the Respect of others" - Complex Simplicity

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

    .ZIP (02-28-2012), TCcentex (07-30-2010)

  21. #14
    Theme Creator PhanaticD's Avatar
    Join Date
    Oct 2009
    Location
    NJ
    Posts
    2,152
    Thanks
    209
    Thanked 574 Times in 337 Posts

    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 ?

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

    TCcentex (07-31-2010)

  23. #15
    Theme Kingpin TCcentex's Avatar
    Join Date
    Jan 2010
    Location
    San Antonio, Texas
    Posts
    1,777
    Thanks
    1,857
    Thanked 1,972 Times in 876 Posts

    Quote Originally Posted by PhanaticD View Post
    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

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

    ziggy7 (07-30-2010)

  25. #16
    Undisputed Theme Champ AnthonyGiola's Avatar
    Join Date
    Jun 2010
    Location
    .theme>Bundles
    Posts
    2,344
    Thanks
    588
    Thanked 1,568 Times in 853 Posts

    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.

  26. #17
    Master Truck Truckinlow's Avatar
    Join Date
    Mar 2009
    Location
    NW-Florida
    Posts
    3,528
    Thanks
    1,586
    Thanked 8,564 Times in 2,038 Posts

    good job with this TC!
    I'll smoke it with ya bro, we'll go to the loony bin together. I don't give a ****!
    https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=jfriends4438%40gmai  l%2ecom&lc=US&currency_code=USD&bn=PP%2dDonationsB  F%3abtn_donateCC_LG%2egif%3aNonHosted

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

    TCcentex (07-31-2010)

  28. #18
    Master Theme Creator (aka Bluemetal) Blue's Avatar
    Join Date
    Dec 2008
    Location
    Germany
    Posts
    6,402
    Thanks
    2,941
    Thanked 12,196 Times in 3,337 Posts

    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 !
    Last edited by Blue; 08-01-2010 at 04:18 AM.

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

    AnthonyGiola (07-31-2010), TCcentex (07-31-2010)

  30. #19
    Undisputed Theme Champ AnthonyGiola's Avatar
    Join Date
    Jun 2010
    Location
    .theme>Bundles
    Posts
    2,344
    Thanks
    588
    Thanked 1,568 Times in 853 Posts

    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
    Last edited by AnthonyGiola; 07-31-2010 at 08:02 AM. Reason: Automerged Doublepost

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

    flybritn (07-31-2010)

  32. #20
    iPod Touch FTW! Aldog18's Avatar
    Join Date
    Jun 2010
    Location
    I come from a land down under (Australia)
    Posts
    381
    Thanks
    147
    Thanked 50 Times in 48 Posts

    A very usefull post
    Now i know the secret
    Time to make my own
    Last edited by Aldog18; 07-31-2010 at 06:57 PM.
    Can I play with madness?
    Follow me on twitter
    If you like what I say, hit the button, you know which one

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

    TCcentex (07-31-2010)

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