Transparent gif button in Photoshop

[TN Todd]

I am trying to make the background of a few buttons transparent but nothing I am doing seems to get me the effect I am looking for.

Here is the page I am working on

http://www.computer-services.us/saf7/index6.html

What I am trying to do is make the design so that (at leaset) the top 4 buttons on the left hand navigation bar are semi-transparent and I will be able to see the background image slightly. This background image will change from category to category so I can't use a button image with the background image already already on there.

Here is the .psd file I am using if anyone needs to look at that

http://www.computer-services.us/saf7...tton-blue2.psd

Thanks in advance for any tips on getting this to work correctly.

[jdiben]

gifs cannot be semi-transparent. every pixel of a gif is either fully transparent or not transparent. To acheive the semi-transparent effect you would have to use a png. The only problem that you will run into using pngs is that internet explorer doesn't support their semi-transparancy. There is a work around for making internet explorer show pngs properly but I have never used it. you should be able to find more information on google for making pngs work in ie if no one here can help.

[speed]

For one of the fixes to make PNG work on IE see http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html, relies on JavaScript being enabled.

You can also use PNG8 which will behave in the same way as gif, solid or transparent, under IE but on other browsers will give you true transparency.

Third option and probably the safest is to create the top 4 buttons without the shadow, and instead make the shadow part of the background image, now you don't have to worry about transparency. If you want the whole button rather than just the shadow semitransparent then I'd create a different set for each category.

[pmhb]

I agree with speed, why make life complex. Separate the drop shadow effect in PS and forget the semi transparency idea. It will keep download times down once the files are cached and will also prevent any conflict with possible readability if you have an image underlying navigation text.

I always design for the lowest common denominator so keep in mind the typical end user PC and connection speed.

However, if download times are not a major consideration for you, you could use flash to achieve exactly what you want but your nav. bar and top image would still require re-loading for every page. Two 3's of one and 6 of another really.

[noel_x99]

I agree with speed and pmhb. If the same image is always used on a page, make a set of three buttons for that page. The user can't tell if it's "real" tranparency or "fake" tranparency. It's sure to work, it's easy, and doesn't depend on a browser or javascript.

[ADAM Web Design]

Agreed with all of the above. Put your transparency layer underneath your button, with the background beneath said layer, and export. Then you have the option of GIF, JPG, or PNG.

[TN Todd]

Thanks for your help, that's what I was afraid of. :D

[WebMasterKrames]

an alternative to PNGs is flash files can have transparency