#1 Jan 29, 2008 6:01 am

Zack Schiller
Member
Joined: Mar 28, 2006

[Guide] Tweaking WebClip Icons

WebCips are stored as .webclip files, and all your WebClips are located in /private/var/root/Library/WebClips. A .webclip basically consists of two things:
an info.plist (this stores pan and zoom information, title information, and the url)
an icon.png (which isn't stored in Apple's secret png format)
You can replace that icon with anything you like, anything at all. If you don't want to have to do modification for each and every webclip, you can modify the resources they're generated from. The resources are located in MobileSafari.app and are as follows:
http://dznr.org/fzpv
WebClipIconOverlay.png (the gloss, the gradient, on a white mat)
http://dznr.org/4sbt
WebClipIconShadow.png (the shadow, unmasked)
http://dznr.org/5cpq
WebClipPageMask.png (the mask used to trim the icon)
Then, just re-generate all of your webclips and you're done!
I hope the next version of either Customize or SummerBoard supports WebClip customization.

Offline

 

#2 Jan 29, 2008 8:08 am

cwsm
Member
Joined: Aug 21, 2007

Re: [Guide] Tweaking WebClip Icons

Thanks!

Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?

Offline

 

#3 Jan 29, 2008 8:28 am

Zack Schiller
Member
Joined: Mar 28, 2006

Re: [Guide] Tweaking WebClip Icons

cwsm wrote:

Thanks!

Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?

As far as I know... but why would you want a blank WebClipIconOverlay when you can just make it sticker style?

Last edited by Nuclear Potato (Jan 29, 2008 8:29 am)

Offline

 

#4 Jan 29, 2008 8:29 am

Mac Guru
Retired Staff
From: The Interwebs
Joined: Dec 30, 2004
Website

Re: [Guide] Tweaking WebClip Icons

Should be easy to do all theme icons as long as a pack is released or a PSD is available and you know what you're doing.

Offline

 

#5 Jan 29, 2008 11:51 am

cwsm
Member
Joined: Aug 21, 2007

Re: [Guide] Tweaking WebClip Icons

Nuclear Potato wrote:

cwsm wrote:

Thanks!

Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?

As far as I know... but why would you want a blank WebClipIconOverlay when you can just make it sticker style?

Because if you don't replace WebClipIconOverlay.png, iPhone/iPod will add official Apple gloss on top of  the WebClip icon.

Offline

 

#6 Jan 29, 2008 1:44 pm

Zack Schiller
Member
Joined: Mar 28, 2006

Re: [Guide] Tweaking WebClip Icons

cwsm wrote:

Nuclear Potato wrote:

cwsm wrote:

Thanks!

Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?

As far as I know... but why would you want a blank WebClipIconOverlay when you can just make it sticker style?

Because if you don't replace WebClipIconOverlay.png, iPhone/iPod will add official Apple gloss on top of  the WebClip icon.

What I propose is replacing the overlay with the sticker stroke and the folded sticker sheen, then replacing the mask with a folded sticker shape, then the shadow with the sticker shadow. If you were going to just make the overlay blank, you might as well replace the webclip icon in the .webclip file.

Offline

 

#7 Jan 29, 2008 2:00 pm

Hiratai
Banned
Joined: Dec 2, 2007

Re: [Guide] Tweaking WebClip Icons

Is there any way to remove the gloss on the icons? I want them to match my Agua theme nicer.

As in the gloss I mean the top half of the icon that kinda shiny.

Offline

 

#8 Jan 29, 2008 2:03 pm

Zack Schiller
Member
Joined: Mar 28, 2006

Re: [Guide] Tweaking WebClip Icons

Hiratai wrote:

Is there any way to remove the gloss on the icons? I want them to match my Agua theme nicer.

As in the gloss I mean the top half of the icon that kinda shiny.

tongue Remove WebClipIconOverlay.png from MobileSafari.app and then re-generate your webclips.

Offline

 

#9 Jan 29, 2008 2:10 pm

Pierre Breteau
Member
From: France
Joined: Mar 17, 2007

Re: [Guide] Tweaking WebClip Icons

Great, thank you, I wish I had a fully layered Agua template psd sad

Offline

 

#10 Jan 29, 2008 6:59 pm

NetworkShadow
Retired Staff
From: Johnson City, TN USA
Joined: Jan 3, 2005
Website

Re: [Guide] Tweaking WebClip Icons

applefish wrote:

Great, thank you, I wish I had a fully layered Agua template psd sad

+1 That would be great. smile_thumbup

Offline

 

#11 Jan 29, 2008 7:43 pm

cwsm
Member
Joined: Aug 21, 2007

Re: [Guide] Tweaking WebClip Icons

Sounds good smile_thumbup

Offline

 

#12 Feb 1, 2008 6:34 pm

TheSpaz
Member
Joined: Jan 3, 2005

Re: [Guide] Tweaking WebClip Icons

I just made a PSD template file out of those files if anyone's interested.

Offline

 

#13 Feb 1, 2008 7:47 pm

lapinbionic
Member
From: France
Joined: Jun 18, 2005

Re: [Guide] Tweaking WebClip Icons

It would be great smile_thumbup

Offline

 

#14 Feb 1, 2008 8:11 pm

TheSpaz
Member
Joined: Jan 3, 2005

Re: [Guide] Tweaking WebClip Icons

Offline

 

#15 Feb 2, 2008 1:11 am

Pierre Breteau
Member
From: France
Joined: Mar 17, 2007

Re: [Guide] Tweaking WebClip Icons

Thank you! It rocks!

Offline

 

#16 Feb 2, 2008 8:01 am

TheSpaz
Member
Joined: Jan 3, 2005

Re: [Guide] Tweaking WebClip Icons

applefish wrote:

Thank you! It rocks!

Thanks! It wasn't hard to do... hehe.

Offline

 

#17 Feb 3, 2008 8:50 am

lapinbionic
Member
From: France
Joined: Jun 18, 2005

Re: [Guide] Tweaking WebClip Icons

I tried to do a sort of agua inspired webclip overlay, it looks like this :

http://img186.imageshack.us/img186/4597/webclipiconpreviewse8.png

Place it in Applications/MobileSafari.app/ and replace, don't forget to backup.

http://img263.imageshack.us/img263/9876 … layyq4.png

Last edited by lapinbionic (Feb 3, 2008 8:51 am)

Offline

 

#18 Feb 3, 2008 1:26 pm

sandro
Member
Joined: May 3, 2007

Re: [Guide] Tweaking WebClip Icons

@lapinbionic

thanks, but whats the difference from the default ones? will try it now smile

Offline

 

#19 Feb 3, 2008 8:05 pm

lapinbionic
Member
From: France
Joined: Jun 18, 2005

Re: [Guide] Tweaking WebClip Icons

It is less glossy and match more with agua iconset, but it's not perfect.
I hope Louie gonna release one big_smile

Offline

 

#20 Feb 4, 2008 12:43 pm

Mac Guru
Retired Staff
From: The Interwebs
Joined: Dec 30, 2004
Website

Re: [Guide] Tweaking WebClip Icons

Has anyone successfully modded up a Buuf webclip version of this hack?

I'm trying to but I can't figure out what to put where.

Offline

 

#21 Feb 5, 2008 2:02 pm

Mac Guru
Retired Staff
From: The Interwebs
Joined: Dec 30, 2004
Website

Re: [Guide] Tweaking WebClip Icons

Anyone?

Offline

 

#22 Feb 5, 2008 6:35 pm

TURN
Retired Staff
From: U.S.A.
Joined: Aug 22, 2007
Website

Re: [Guide] Tweaking WebClip Icons

Mac Guru wrote:

Anyone?

ok I have been trying to make a Buuf WebClips.  it is taking me some time. this is not perfect at all  but I'm working on it. I think someone else could probably do a better job. so if you want to give it a try i will tell you what I did...  which is probably wrong anyway ... lol

from the buuf template. i took the gradient and the grain  and  merged them together  set the opacity to 50.  and then I cut that out exactly the same shape as the White part of the icon.
after that  I cut out the White part of the icon and  paste that on top  (hope you understand that part)

so at the end I had the grain the white part of the icon and the icon itself.

save the grain as WebClipIconOverlay.png
http://img164.imageshack.us/img164/5276/grainax6.png  NO more red now smile thanks Dustin

save the white part of the icon as WebClipPageMask.png
http://img520.imageshack.us/img520/6583/webclippagemaskkv8.png

save the icon as WebClipIconShadow.png
http://img123.imageshack.us/img123/6064/webclipiconshadowkl9.png

I know it looks bad now but it's a start.  it looks a little bit better with dark clips. like mmi and mint.

fix 
http://img182.imageshack.us/img182/9589/snap221848ol2.jpg

Last edited by TURN (Mar 23, 2008 9:08 am)

Offline

 

#23 Feb 5, 2008 6:38 pm

Fadakar
Member
From: Orange County, CA
Joined: Jan 21, 2008

Re: [Guide] Tweaking WebClip Icons

Is there any way to get rid of the red tint? yikes

Offline

 

#24 Feb 5, 2008 6:46 pm

ConnorCimowsky
Member
From: Toronto, Canada
Joined: Jun 5, 2007
Website

Re: [Guide] Tweaking WebClip Icons

Desaturate it.

Offline

 

#25 Feb 5, 2008 6:52 pm

TURN
Retired Staff
From: U.S.A.
Joined: Aug 22, 2007
Website

Re: [Guide] Tweaking WebClip Icons

Fadakar wrote:

Is there any way to get rid of the red tint? yikes

One problem... if I take away the color you can not see the grain.  but like i said I'm working on it. hopefully I can work that out or someone can help me do it. smile

Offline

 

Board footer

[ Generated in 0.103 seconds, 7 queries executed ]