split-etm-
asked on
How to make an image transparent on multiple colour backgrounds
Hi,
Firstly, i am not a graphics designer, but i have a little project i am attempting. I need to find out how to make a transparent gif so that it can easily be stuck on multiple backgrounds that differ in color. The backgrounds will generally only be of a single color, so hopefully that makes it a little easier.
Can anyone tell me if this is possible, and if so, could anyone point me to a tutorial or show me how to accomplish this?
Thanks!
Firstly, i am not a graphics designer, but i have a little project i am attempting. I need to find out how to make a transparent gif so that it can easily be stuck on multiple backgrounds that differ in color. The backgrounds will generally only be of a single color, so hopefully that makes it a little easier.
Can anyone tell me if this is possible, and if so, could anyone point me to a tutorial or show me how to accomplish this?
Thanks!
If u save it as a .png, then yea, it will fit on any background color.
If u save it as a .gif, then make your image in photoshop then Ctrl+Alt+Shift+S (File->Save for Web)
There, chose to export it as a gif, select the Gif 128 Dithered preset; under the Transparency check box is a combo box (drop down list), select Difusion Transparency Dither, and then decrease the Amount till it suits you.
You can also play with the other features (Matte represent the color that would be considered as transparent).
If u save it as a .gif, then make your image in photoshop then Ctrl+Alt+Shift+S (File->Save for Web)
There, chose to export it as a gif, select the Gif 128 Dithered preset; under the Transparency check box is a combo box (drop down list), select Difusion Transparency Dither, and then decrease the Amount till it suits you.
You can also play with the other features (Matte represent the color that would be considered as transparent).
ASKER
Thanks for the responses. is there any way to get rid of the nasty white jaggies on the edges of the gif? i have been told that to make it 100% smooth, i would have to redo the transparency for each color that i intend to cater for...but that kind of seems like a lot of work :S
if u want it 100% smooth then i`m afraid u`ll have to save the gif with different Matte (according to the background color).
It`s not a lot of work, so, for the same gif only change the Matte to match exactly the background color and then save it with a different name. (there will be no modification to the gif though).
There isnt another way to do it, unless u save it as .png.
It`s not a lot of work, so, for the same gif only change the Matte to match exactly the background color and then save it with a different name. (there will be no modification to the gif though).
There isnt another way to do it, unless u save it as .png.
ASKER
hmm ok, i guess that rules out .gif for my problem then since i dont know what color a user will pick every time.
is making the .png version as simple as saving it as .png, or is there also a specific process like with saving the .gif to get best results?
is making the .png version as simple as saving it as .png, or is there also a specific process like with saving the .gif to get best results?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks will_scarlet7. it seems that my real problem was IE all along. it doesnt render the transparency of PNGs (Firefox and Opera does), which is why it did not work for me the first time around...
after i had a look at the the link you posted (http://www.webmasterworld.com/forum36/1384.htm), i figured out how to make it work in IE from this url: http://webfx.eae.net/dhtml/pngbehavior/demo.html
you basically have to set the image's behaviour using javascript. if anyone is interested, they can have a look at the HTC file here: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.htc
i wonder if this is compatible with most versions of IE??
this workaround is a bit of a headache, but hopefully microsoft will sort it out in the next version of IE...
after i had a look at the the link you posted (http://www.webmasterworld.com/forum36/1384.htm), i figured out how to make it work in IE from this url: http://webfx.eae.net/dhtml/pngbehavior/demo.html
you basically have to set the image's behaviour using javascript. if anyone is interested, they can have a look at the HTC file here: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.htc
i wonder if this is compatible with most versions of IE??
this workaround is a bit of a headache, but hopefully microsoft will sort it out in the next version of IE...
Glad I could help in the right direction. ThanX for the points!
God bless!
Sam
God bless!
Sam
http://www.mediacollege.com/graphics/photoshop/transparent/gif.html