Transparency Issues

TB
Posted By
Tara_Benson
Jun 24, 2007
Views
442
Replies
20
Status
Closed
Hi,

I’m trying to save my image slices for a website with a transparent background. I went to Save For Web – choose .png made sure it was set to transparency, yadda yadda yadda, and saved it as html and images. When i added my background to my html code and veiwed the page my transparent images had this horrible white pixelled border around them?

How can I fix this? I’ve never had this problem before when saving transparent images like .png extracts or anything. Are there certain settings I should you? I’m really stuck on how to fix this.

Thanks in advance,

Tara
Related Tags
issue 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.

RB
Robert_Barnett
Jun 24, 2007
If your using IE it only supports the on/off transparency that GIF does. It doesn’t support the alpha level transparency that would give you the edges you are looking for.
J
jayseena
Jun 24, 2007
Did you try previewing it in a browser? It does show so in an html editor. But in the browser it will show correct, if your browser supports png.

Jay
TB
Tara_Benson
Jun 24, 2007
I have preveiwed it in both IE and Firefox and both of them have the little white pixels. Here is link to a pic of how it looks in FF.

<http://img81.imageshack.us/img81/6066/whitepixelvz4.jpg>
EH
Ed_Hannigan
Jun 24, 2007
It looks to me like however you made the transarency in the first place was flawed. I would suggest going back to the psd and adding the web background temporarily so you can see what you are doing, and erase those pixels before remaking the png.
TB
Tara_Benson
Jun 24, 2007
Nope, it’s perfect when I add the web background to it in photoshop. (the background is the patterned gradient fyi) It just sems to screw up once it’s saved. Could it be the settings I’m using? Are there any certain settings I should be using?
EH
Ed_Hannigan
Jun 24, 2007
Can we see the png?
TB
Tara_Benson
Jun 24, 2007
You mean one of the image slices I’m trying to save as a transparent .png?
EH
Ed_Hannigan
Jun 24, 2007
Yes. If we could look at the actual file in question maybe someone could figure it out.
TB
Tara_Benson
Jun 24, 2007
Here is a link to one of my png image slices. It is perfectly smoooth and rounded in photoshop but when saved all the edges get the white pixelled border and become edgy.

< http://img144.imageshack.us/img144/1741/myspacepersonalheart s02it6.png>
EH
Ed_Hannigan
Jun 24, 2007
Hmm. Is it 8 bit or 24? Did you choose a Matte color?
EH
Ed_Hannigan
Jun 24, 2007
I don’t see any antialias on the edges. Try saving the original as PNG 24. It’s still not going to work in IE 7 unless you include a javascript telling the browser to display the transparency.

<http://homepage.ntlworld.com/bobosola/>
L
LenHewitt
Jun 24, 2007
Tara,

If you view the image at the pixel level, you will see that the fringing is not white, but stray pixels of the light green.

That definitely suggests a problem with how you created the transparency in the first place.
TB
Tara_Benson
Jun 25, 2007
Sorry my internet screwed up. So should i try deleting those stray pixels from the image layer then and see if that neatens it up? and with saving the file try it as png 24 then? Also how come .gif avatars display properly in ie then and this doesn’t? Could i save it the same way as a .gif avatar?
L
LenHewitt
Jun 25, 2007
Tara,

So should i try deleting those stray pixels from the image layer then
and see if that neatens it up?<<

Well that’s one way, but it might be easier to go back to square one and re-create your transparency with more accuracy.

saving the file try it as png 24 then?<<

No point in doing that – you are are only using about 6 colours and are not looking for any translucency, only complete transparency. All saving as .png 24 will do is mean you will have to code the webpages using AlphaImageLoader Active-X control for them to be transparent in IE 6 and lower.

Could i save it the same way as a .gif<<

Certainly, but you still need to get that transparency accurate first.
TB
Tara_Benson
Jun 25, 2007
Okay so how would I create it with more accuracy? What i did in the first place was hide my background layers from my brush and object layers (the ones with all the hearts etc) then went to save for web, etc etc. What could i do to improve this?
EH
Ed_Hannigan
Jun 25, 2007
Len,

Maybe I’m wrong, but I was assuming there wereantialised edges in the original which would mean translucence. That’s why I suggested png 24.
L
LenHewitt
Jun 25, 2007
Ed,

Antialiasing and transluceny are two entirely different things and you can have the first without the second. All antialiasing requires is a few extra colours in the .gif or 8-bit .png

You only need translucency and thus 24-bit.png when you want whatever is beneath the image to show through as if it were a layer set to multiply.
EH
Ed_Hannigan
Jun 26, 2007
Perhaps I used the terminology wrong, but my point is that if she wants the image to blend with the patterned web background, she needs to have translucency in the edge pixels.
L
LenHewitt
Jun 26, 2007
Ed,

All she needs to do is set a matte colour that is not dissimilar to the average tone of the background.
TB
Tara_Benson
Jun 27, 2007
Hey,

Umm i’m a little lost as to how I can fix my image quality. I have my brush and objects on separate layers, and the gradient background on another. There seems to be a problem with my object and brush layers, that is causing all that white pixeling. What exactly do i need to do to fix this? Also why am i getting pixelson my object layers. In photoshop they are smart objects and are perfectly smooth almost like a vector. I don’t understand how they can have all these white pixels on them as well.

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.

Related Discussion Topics

Nice and short text about related topics in discussion sections