icon set creation

322 views
Skip to first unread message

Q

unread,
Feb 7, 2009, 6:49:53 AM2/7/09
to jQuery UI Development
Hi,

Recently i got the attitude to generate my icon set directly by this
url
http://ui.jquery.com/themeroller/images/?new=CC3355&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png

i find it really useful and practical, the good thing is you can
generate in one second all your icons with your favourite colour.

However, i'd like to expand my icon set with some new icons but i'd
also like to keep using this method. is there any possibility to have
that script or modify it to accept colour and source image?

I could do the same with photoshop but is not likewise practical and
quick.


Cheers
Andrea

Todd Parker

unread,
Feb 7, 2009, 7:18:35 AM2/7/09
to jQuery UI Development
Hi Andrea -

There isn't currently a way to pass an image URL in and the icon
sprite itself requires a fair amount of finesse to make the mask work
in IE 6. It is an interesting idea though that we'll consider.

If you can post this request and a mockup of the proposed additional
icons, we could consider adding some of these into the core sprite in
a future release if they are generic enough to be useful to a wider
audience.

Here is a link to page the planning wik where this request belongs:
http://jqueryui.pbwiki.com/jQuery-UI-CSS-Framework

Thanks!
Todd

Recently i got the attitude to generate my icon set directly by this
> urlhttp://ui.jquery.com/themeroller/images/?new=CC3355&w=256&h=240&f=png...[]=rcd|256&fltr[]=mask|icons/icons.png

Q

unread,
Feb 8, 2009, 10:54:07 AM2/8/09
to jQuery UI Development
Good to know, i will try to create some new icons.

but now i'm curious, what's the point with the mask and ie6?

On Feb 7, 12:18 pm, Todd Parker <fg.t...@gmail.com> wrote:
> Hi Andrea -
>
> There isn't currently a way to pass an image URL in and theicon
> sprite itself requires a fair amount of finesse to make the mask work
> in IE 6. It is an interesting idea though that we'll consider.
>
> If you can post this request and a mockup of the proposed additional
> icons, we could consider adding some of these into the core sprite in
> a future release if they are generic enough to be useful to a wider
> audience.
>
> Here is a link to page the planning wik where this request belongs:http://jqueryui.pbwiki.com/jQuery-UI-CSS-Framework
>
> Thanks!
> Todd
>
> Recently i got the attitude to generate myiconsetdirectly by this
>
> > urlhttp://ui.jquery.com/themeroller/images/?new=CC3355&w=256&h=240&f=png...[]=rcd|256&fltr[]=mask|icons/icons.png
>
> > i find it really useful and practical, the good thing is you can
> > generate in one second all your icons with your favourite colour.
>
> > However, i'd like to expand myiconsetwith some new icons but i'd

ScottJehl

unread,
Feb 8, 2009, 11:28:52 AM2/8/09
to jQuery UI Development
Hi Andrea,

We design UI's icons in grayscale (src: http://jqueryui.com/themeroller/images/icons/icons.png
) so they can be combined with an icon color on the back-end to
generate a colorized icon image. This is done by creating a solid
color-filled image and then setting our icon image as a mask on top of
it. Anything white in the source image will become fully opaque color,
and gray tones will vary in transparency (black being fully
transparent).

Our final icon image is in png8 format, which can have png24-like
alpha channels while still degrading nicely for older versions of
Internet Explorer. In IE, the image will have only 1 alpha channel, so
it's either fully opaque, or fully transparent. This means our icons
need all of their important visual information to be fully white in
the source image. The less-important pixels on the edges can be
feathered out so it looks better in modern browsers.

The end result of the image processing comes out like this:
http://ui.jquery.com/themeroller/images/?new=aa0000&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png


-Scott


Reply all
Reply to author
Forward
0 new messages