Jump to content

Transparent .png looks terrible


spk1973

Recommended Posts

Hi,

Okay, so I created a logo in AI and have played with exporting it as a .gif or .png to be placed on top of a dark background.

Opened by itself in a browser, it looks lovely, just what I want.

Opened in the web page, it looks terrible, with weird white edges all around it, and I don't know why.

Here is the site:

http://www.analyticlandsurveys.com

The logo file is currently a .png but looks equally bad as a .gif.

Presently the logo is far too big, but I'm just trying to find out why I can never get this to work.

I don't want to use a .jpg file for two reasons:

1. I don't want to cause color conflicts with the background image color and the web page color, and

2. I want to know how to properly do this.

Should I be using it as a background image? Would this really matter or make a difference?

It looks like an anti-aliasing thing, but I don't know how where to adjust this.

Any help greatly appreciated.

-Shawn

Link to comment
Share on other sites

Just realized that it's gotta be used as a background image.

Works fine now, still gotta be resized but that's about it.

Also (and perhaps more importantly) using a flat background color contributes to the problem.

It now is laid over a tiled background image, which has fixed the problem and actually is an improvement visually.

 

So:

1. Use .pngs as background-images in your CSS vs. in tags,

2. Use some sort of tiled background image vs. a flat color.

 

Very interesting.

Thoughts? Have I got this right?

 

-Shawn

Link to comment
Share on other sites

maybe it's just me, but your logo still has the white border.

I copied it to Photoshop with 'copy image' in firefox, got this weirdly tall and all black square.

I used Print Screen from the 'view image' option and pasted it to PS again, this time when i zoomed in i found the problem, you have little gray edges everywhere

My 2 suggestions are:

Create your image WITH the background already there, it's all web-colors so just use the same hex, this avoids your text having an awkward fade to white. This will prevent similar problems in the future if you just always do it. If you use Photoshop or anything else with layer functions then you can always have an editable original.

Secondly, your text image is hugely tall. The first thing I noticed when I opened the site is how long the quote on the right went down and was surprised to find a whole sight located waaaay down there. Figure out your image size you need.

Link to comment
Share on other sites

When you save your image for the web in Photoshop using a transparent background (png or gif), you have an option called "matte". Use the colour of your background in the "matte" it will make the jagged edges around your image the same colour as your background while leaving the rest of your background transparent.

 

As to your second conclusion, there is no need to use a tiling background image just use a plain colour in your background css. Your problem comes from not having added a matte to your image.

 

Just a comment, your site looks a little unbalanced with the long skinny quotation down the side.

Link to comment
Share on other sites

Like virtual said, make sure you use the matting feature in PS.

 

I would use gif as there are only 2 colors in your logo and the file would be smaller.

 

Also, transparent PNGs do not work in IE6, so without cumbersome fixes (search Google) (or the death of IE) (I prefer the latter, lol) I would steer away from them.

 

HTH

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...