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

[TCcentex]

i can't wait to see what you come up with

i've been thinking for a while about posting some good tutorials on the tips and tricks of theming, because I got help from some themers who were nice enough to share the things they'd found and it opened up a whole new level of this racket for me. I think there are quite a few people in our community who show great potential and i'd love to have the chance to pass on what I've learned -- please let me know if anyone has any suggestions and i'd be happy to see what I can do about adding a couple more threads like this -- i'm taking a break from theming until i can start tapping into the iPhone 4 to theme that brick anyway......

[Lolcats]

i get the mask, but i don't understand the shadow

[TCcentex]

i get the mask, but i don't understand the shadow

i'll try explain as best i can... the shadow sits on top of the mask, so you want to apply your custom icon frame if you have one, or any shadow effects on the outside of the icon graphic -- any image that you put on the shadow that would be directly above the solid black areas of the mask (if you placed the shadow square on top of the mask) will look 100% like they do on the shadow.png... in the subsequent areas of the shadow that would sit on top of the white and gray sections of the mask, you can apply black or white shades to apply a darker or lighter appearance of the white/gray shades in the mask.png.

this is pretty hard to explain, if someone else can do a better job than i can please feel free

[AnthonyGiola]

that's a pretty good explanation of the shadow. Only thing I can add is to mess with it. The mask is what controls transparency and the shadow controls your actual icon frame and any other small effects. It just takes some practice. To get right

I know your not the best with HTML but maybe someone who is. Can?

[Link4562]

I've followed all the instructions, and even tried saving it as PNG-24 using Photoshop CS4, but the icons still don't look right. Instead of showing the shadow and the mask I made, the icons just become square-shaped.

Here's what my Icon Shadow and Icon Mask look like:



I'm running iOS 4, so I've got them in root/Library/Themes/Test Skin.theme/Bundles/com.apple.mobileicons.framework

Can anyone help?

[TCcentex]

I've followed all the instructions, and even tried saving it as PNG-24 using Photoshop CS4, but the icons still don't look right. Instead of showing the shadow and the mask I made, the icons just become square-shaped.

Here's what my Icon Shadow and Icon Mask look like:



I'm running iOS 4, so I've got them in root/Library/Themes/Test Skin.theme/Bundles/com.apple.mobileicons.framework

Can anyone help?

i noticed that your file names are all lower case -- make sure you have them named as "AppIconMask.png" and "AppIconShadow.png" - they must be case sensative and need to be named exactly how I just labeled them. This can be said for all files in a 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 exactly how the stock theme has them labeled.. Try that out and let me know if it works!

[Link4562]

i noticed that your file names are all lower case -- make sure you have them named as "AppIconMask.png" and "AppIconShadow.png" - they must be case sensative and need to be named exactly how I just labeled them. This can be said for all files in a 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 exactly how the stock theme has them labeled.. Try that out and let me know if it works!

It's still not working correctly. Does it make a difference that my AppIconShadow doesn't have 100% opacity?

[TCcentex]

It's still not working correctly. Does it make a difference that my AppIconShadow doesn't have 100% opacity?

absolutely - both the mask and the shadow should be at 100% on opacity

[ALIEN1974]

I found that if you set the mask to smart object and locking the layer,you dont have to save it as png24.Im not at my PC now to explain the steps,but it works for me.

[decke]

absolutely - both the mask and the shadow should be at 100% on opacity

Well my opinion differs as I've found success doing it with the mask set to any opacity, the lower I set, the more transparent the the icon is. So you can set the opacity for your icons. Just wanted to share that.

[AnthonyGiola]

Yes just like the icons from Bars GT theme are just barely transparent the same can be done with Autocreate icons. It seems to work so whatever problem Link is having isnt related to Opacity. It must be something else entirely

[King Shady]

Hey TC I made the new folder and added the app mask and shadow (I'm on iOS4) and put the folder in bundles for you 1derful theme and still appstore icons didnt autocreate . I spelled everything right

[TCcentex]

Shady - are you using the new iPhone 4 or are you still using a 3g? Cuz 1derful v2.0 is fully comparable with all platforms except the iPhone 4, which can be said for ALL themes at present....

If you need version 2.0 let me know and I'll forward it to you

[kingjust]

TCcentex... it looks like your the yay or nay judge per se. So, judge my creation after this tutorial helped alot! Also, I would like to add that I hope, since I really haven't seen this, that i'm the first with a glow "pressed" bezel... you'll see.

++=(unpressed) & (pressed).

If any of you would like the psd, let me know. This will be going towards a theme i'm calling SFCarbon (Street Fighter Carbon). If you see, there are hints of carbon fiber, and the dialer looks like it's straight wrapped with carbon fiber with pretty led lights.

Enjoy and thanks TCcentex.

KJ

[TCcentex]

TCcentex... it looks like your the yay or nay judge per se. So, judge my creation after this tutorial helped alot! Also, I would like to add that I hope, since I really haven't seen this, that i'm the first with a glow "pressed" bezel... you'll see.

Attachment 462247+Attachment 462248+Attachment 462249=Attachment 462250(unpressed) & Attachment 462251(pressed).

If any of you would like the psd, let me know. This will be going towards a theme i'm calling SFCarbon (Street Fighter Carbon). If you see, there are hints of carbon fiber, and the dialer looks like it's straight wrapped with carbon fiber with pretty led lights.

Enjoy and thanks TCcentex.

KJ

VERY NICE! Those icons are sick!

I'm glad I could help KJ

[Aldog18]

TCcentex... it looks like your the yay or nay judge per se. So, judge my creation after this tutorial helped alot! Also, I would like to add that I hope, since I really haven't seen this, that i'm the first with a glow "pressed" bezel... you'll see.

Attachment 462247+Attachment 462248+Attachment 462249=Attachment 462250(unpressed) & Attachment 462251(pressed).

If any of you would like the psd, let me know. This will be going towards a theme i'm calling SFCarbon (Street Fighter Carbon). If you see, there are hints of carbon fiber, and the dialer looks like it's straight wrapped with carbon fiber with pretty led lights.

Enjoy and thanks TCcentex.

KJ

Those icons are epic!

i would love to have the psd XP

[kingjust]

Those icons are epic!

i would love to have the psd XP

I got you brotha, just wait till I get home tonight from work. They don't allow USB disk drives on the machines because of a security breach. Damn army... LOL

KJ

[Aldog18]

I got you brotha, just wait till I get home tonight from work. They don't allow USB disk drives on the machines because of a security breach. Damn army... LOL

KJ

Alrighty no worries

[SchmilK]

On iPhone 4 the autocreate icons are working...after a quick rename :P

[email protected]
[email protected]
[email protected]

They can be the same size as the original and iPhone will resize it or double size for better clarity.

[TCcentex]

No overlays! Remember to delete that buggy file even on the iPhone 4.