Icon with drop shadow and transparency

D
Posted By
DesignerNut
Aug 1, 2005
Views
304
Replies
5
Status
Closed
Greetings. I’m trying to understand how WinXP icons have a drop shadow as well as transparency on its icons and are able to work with many different background colors. Anyone have the knowledge of how to do that or where tutorials are located?

I’m familiar with creating images with transparent bkgd in gif format using a matte color, but this leaves pixelated edges on different background colors that are not that same as the matte color.
Related Tags
drop shadow icon shadow transparency

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

T
toby
Aug 2, 2005
DesignerNut wrote:
Greetings. I’m trying to understand how WinXP icons have a drop shadow as well as transparency on its icons and are able to work with many different background colors. Anyone have the knowledge of how to do that or where tutorials are located?

My ICO format plugin can create XP-style icons by saving directly from Photoshop; the first alpha channel is used to create the 1-bit "AND mask", and the second alpha channel becomes the 8-bit icon alpha: see http://www.telegraphics.com.au/sw/#icoformat

M$ has some documents on their web site, try
http://msdn.microsoft.com/library/default.asp?url=/library/e n-us/dnwxp/html/winxpicons.asp

I’m familiar with creating images with transparent bkgd in gif format using a matte color, but this leaves pixelated edges on different background colors that are not that same as the matte color.
D
DesignerNut
Aug 2, 2005
Interesting plugin…I’ll be curious to see if it answers my question. I’ll check it out.
Thanks.
FN
Flo Nelson
Aug 2, 2005
"DesignerNut" wrote in message
Greetings. I’m trying to understand how WinXP icons have a drop shadow as well as transparency on its icons and are able to work with many different background colors. Anyone have the knowledge of how to do that or where tutorials are located?

I’m familiar with creating images with transparent bkgd in gif format using a matte color, but this leaves pixelated edges on different background colors that are not that same as the matte color.

To get true alpha transparency, you can same images as pngs. Be sure to save them as 24 bit pngs with transparency – that will give you 32 bit pngs with true, modulated transparency. If you want them for the web, however, be aware that Internet Explorer does not have good png transparency support.

Flo
D
DesignerNut
Aug 2, 2005
The icons will be used in a java application and was told to make them ..jpg or .gif. Don’t know off hand if java supports .png. But I’ll do some experimenting.

Flo Nelson wrote:
"DesignerNut" wrote in message
Greetings. I’m trying to understand how WinXP icons have a drop shadow as well as transparency on its icons and are able to work with many different background colors. Anyone have the knowledge of how to do that or where tutorials are located?

I’m familiar with creating images with transparent bkgd in gif format using a matte color, but this leaves pixelated edges on different background colors that are not that same as the matte color.

To get true alpha transparency, you can same images as pngs. Be sure to save them as 24 bit pngs with transparency – that will give you 32 bit pngs with true, modulated transparency. If you want them for the web, however, be aware that Internet Explorer does not have good png transparency support.
Flo
FN
Flo Nelson
Aug 2, 2005
"DesignerNut" wrote in message
The icons will be used in a java application and was told to make them .jpg or .gif. Don’t know off hand if java supports .png. But I’ll do some experimenting.

If you have to save them as gifs, then when you use save for the web, under the transparency checkbox, you have a choice of transparency patterns. I’ve had pretty good luck with "diffusion transparency dither", but you could check them all out and see what works best for your situation – it will create the effect of more natural transparency, though not as natural as png.

Flo

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections