PDA

View Full Version : Font with transparency bg gif


paispais
06-12-2007, 02:57 PM
There's a unpopular font I want to use on a site. I'm using photoshop to create the text and placing it on a transparent background so it can be placed on the web page in a <img> tag. I've tried to save it in multiple formats(gif, png) but there's problems with both. With the png image the text looks crisp, excellent and then when viewed in ie the background isn't transparent. The gif image makes the text look jagged along with a white stoke around some parts of each character. Is there a way around this situation? Can I create type in Photoshop using a transparent background that can be viewed in multiple browsers without any problems?

L3XXY
06-13-2007, 05:46 AM
Welcome to the world of "It came free with my PC, so it must be good!" IE is a really bad browser, there is no doubt.

I say - Use the .png so you get a nice crisp image with a transparent BG. Go and Download Fire fox 2. People who use IE should be use to seeing white space around transparent images on the net.
If you really want to fix it for those pesky ie users, drop the .png into image ready, save as a .gif (But click on the matte button and select the BG colour of your site, export as optimised 2. This should fix your outline problem & will work in ALL browsers.

Post your site addy and the .png and I will fix it up for you if you like ;)

domedia
06-13-2007, 02:03 PM
Feel free to use PNG with transparency. Event hough IE does not support alpha channel in PNG's yet, this website explains how you can make this happen with the addition of a javascript.
http://homepage.ntlworld.com/bobosola/pnghowto.htm

paispais
06-14-2007, 07:56 PM
Feel free to use PNG with transparency. Event hough IE does not support alpha channel in PNG's yet, this website explains how you can make this happen with the addition of a javascript.
http://homepage.ntlworld.com/bobosola/pnghowto.htm

Thank you domedia. This info is very helpful.

paispais
06-14-2007, 08:04 PM
Welcome to the world of "It came free with my PC, so it must be good!" IE is a really bad browser, there is no doubt.

I say - Use the .png so you get a nice crisp image with a transparent BG. Go and Download Fire fox 2. People who use IE should be use to seeing white space around transparent images on the net.
If you really want to fix it for those pesky ie users, drop the .png into image ready, save as a .gif (But click on the matte button and select the BG colour of your site, export as optimised 2. This should fix your outline problem & will work in ALL browsers.

Post your site addy and the .png and I will fix it up for you if you like ;)

I use firefox on a mac. I'll agree with you about ie being a horrible browser, but the majority of the public uses it. Thank you for your advice.

domedia
06-14-2007, 08:23 PM
but the majority of the public uses it. And that is often all that matters.

d a v e
06-15-2007, 04:15 AM
if you're using a simple background to set the text against then all you need is a gif. only use a png (unless you mean 8 bit png) if you have a background that has many different colours/gradients

L3XXY
06-15-2007, 04:48 AM
Feel free to use PNG with transparency. Event hough IE does not support alpha channel in PNG's yet, this website explains how you can make this happen with the addition of a javascript.
http://homepage.ntlworld.com/bobosola/pnghowto.htm


nice mate, cheers :)

guitardave
06-18-2007, 09:04 PM
There is also this solution to transparent pngs in IE6:
An IE6 bug which causes a great deal of hassle is that it doesn’t support transparent PNG images.
You will need to use a filter which overrides the CSS.
* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src="filename.png", sizingMethod="scale");
}

domedia
06-18-2007, 09:12 PM
Great snippet dave.
Does it do the same as the javascript in the link?

If it does, I guess a one line in CSS is better than having to add another js file to your pages.