spk1973 Posted July 28, 2009 Report Share Posted July 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
spk1973 Posted July 28, 2009 Author Report Share Posted July 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
AndaleTheGreat Posted July 29, 2009 Report Share Posted July 29, 2009 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted July 29, 2009 Report Share Posted July 29, 2009 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. Quote Link to comment Share on other sites More sharing options...
joomlavideos Posted July 31, 2009 Report Share Posted July 31, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.