Photoshop transparency issue

bdi · Nobody Joined: 21 Oct 2004 Posts: 1646 Location: Chicago

Ok, so you can see the issue here.

http://www.dgard.com/dscm.aspx

On the right, the "Download Now" button has a white line around it. I have tried all kinds of settings when saving it to get rid of the line. I have tried saving as a PNG instead of a GIF. This has happened on other images I have created in photoshop and try saving with transparency too. What am I doing wrong that I get these kind of lines?

Here's a link to the actual photoshop file if it would help.

http://www.dgard.com/dev/misc/green_button2.psd

Thanks in advance.

Ankou · Posted: Mon Dec 11, 2006 8:04 am Post subject:

PNG is the better option but support in some IE browsers can be a problem. Sad

Typically if I'm working with an image with transparency that just doesn't come out right using GIF settings I'll do one of two things.

Save for Web...
Select GIF
Then matte it using the background color that the image will be placed on (matte is under the dither % on the right)

The problem here is that when you change background colors on your page to something other than your matte it make look like it does now but with the matte color you selected (as opposed to white).

If that just doesn't fly then I usually just make the image a GIF (or JPG) with a background - the same color as the background I'm using.

The other option would be to use Illustrator to get a nice clean vector image. That or recreate the button and make sure that the edges of the image at pixel level are crisp and clean.

I know... it sucks, but that's all I can offer you for help. I'm not a graphics pro.

bdi · Nobody Joined: 21 Oct 2004 Posts: 1646 Location: Chicago

I went with the matte one and it worked. Never used that before. Thanks.

I completely understand why I would want to avoid it when possible, but in this case I'm just better off getting a site done (it's already ugly enough code, so having an extra image won't hurt anything). btw.. I generally use PNG images too, they just seem to look cleaner most the time.

Ankou · Posted: Mon Dec 11, 2006 2:06 pm Post subject:

Yeah I'm starting to work more with PNG simply because the sites I'm doing now aren't for clients anymore. So if someone with IE5 comes to my site and has issues with a transparent portion of a PNG, well I could care less. They're probably use to seeing it anyway.

bdi · Nobody Joined: 21 Oct 2004 Posts: 1646 Location: Chicago

With Microsoft making IE7 a critical update I think that the rules have finally changed. It's now the client's fault for not being up-to-date rather than the web developer's fault for not working with it properly.

Still, my bigger problem with PNGs that I have noticed is the colors not always coming out right. I know I created one button that I slapped a navy background on rather than using transparency and in both IE7 and Firefox 2.0 it didn't come out right. What's worse, not only did it not come out right, but it was a different color in each browser. But, that is the trial of doing web development. You have no control over the clients people use, and that means you will need to meet multiple needs. You can complain about it (like I just did) or just live with it and work around it (like I'm about to do). Of course, as far as I see it, I admit that I'm not anything great at creating a website, so I am just going to make a tolerable one until I can afford to have one professionally done. Smile

Ankou · Posted: Mon Dec 11, 2006 5:52 pm Post subject:

Interesting, I never had a problem with a transparent background giving a color in Firefox. In IE yeah I've had that happen.

Are you using the Save for Web... PNG-24 or PNG-8? Either way IE will most likely mess it up, but Firefox should be fine with both - of course I'll always use PNG-24.

bdi · Nobody Joined: 21 Oct 2004 Posts: 1646 Location: Chicago

Must have said that wrong. If I give it a background to match, the background doesn't exactly match. That's what I meant, not that I gave it a transparent background and something happened.

http://www.dgard.com/dev/misc/blue.aspx

Take this page for instance. In the top right corner there is a navy box with the color #000080 made into a PNG using Photoshop. I also have the style for the body set wwith a background color of #000080. When I look at it in IE7 and Firefox 2.0, I see the square in both of them. If my web page is #000080 and my square is #000080, I would expect the square to be invisible because it should match perfectly.

Anyway, just illustrating it, there's not really a question there, I know. At any rate, I have the button working properly. I would assume the blue on it is probably slightly discolored as well, but if so, it's not noticeable, so I won't care. Razz

Ankou · Posted: Tue Dec 12, 2006 9:25 am Post subject:

Yeah I see what you're saying now. Still I've never had that happen to me before, I wonder if there's something in the settings of PS that need to be adjusted. I tried here at work making a 100x100 pixel square and saving 4 different PNG formats. PNG8, PNG24, PNG Interlaced and plain old "Save as" PNG (no interlace). All seem to work fine when I look at them in Firefox with a background set to #000080.

But since you don't care I'm not going to hunt down the answer. Razz

Seriosuly though if it does bother you and you want to try to figure it out, let me know I'll help.

bdi · Nobody Joined: 21 Oct 2004 Posts: 1646 Location: Chicago

bdi · Nobody Joined: 21 Oct 2004 Posts: 1646 Location: Chicago

You know, I just realized that every time I setup navy (as #000080) in Photoshop, it always changes it to #000099 and gives me an error message for the #000080. That could be why I was having troubles with the navy background. It might simply not be supporting it for whatever reason.

Just noticed it while working on a boxshot, so I thought I would share.

Ankou · Posted: Fri Jan 05, 2007 9:19 am Post subject:

Hmm... #000099 would be a "Web safe" color so it may be that some where in your settings it's picking the closest web safe colors. You mentioned in a different post that you're using PS 7 -- I'm not sure where you'd look for that though. I can hunt around later today but right now I'm running late.

bdi · Nobody Joined: 21 Oct 2004 Posts: 1646 Location: Chicago

That's odd though, #000080 is a named color (navy). Yet it's not web safe? Just odd. Oh well, I'm sure I can find that setting if I look. Is there any importance on web safe colors these days or is that something that has become obsolete?

Ankou · Posted: Fri Jan 05, 2007 4:46 pm Post subject:

I'm not sure why the named colors aren't all web safe. It could be that when browsers started to recognize color names it was different for each browser. Or they'd recognize them but it didn't mean the same color code.

Web safe colors in todays world... I really wouldn't worry about sticking to such a limited palette. If someone's monitor is so old that it has trouble with #000080 because it's not web safe then they have more issues to worry about than color.