What exactly is it with graphics with extra color?

Tacit explained the problem completely, and how to deal with it for GIF images.

I would add that the png format is now supported by the majority of browsers. Png supports partial transparency, and solves the fringing problem.
—
Mike Russell – www.curvemeister.com

On Dec 13, 7:02 pm, "-Lost" wrote:

What exactly is it with graphics with extra color?

Sorry for such a vague (poorly phrased) question, but for example I am referring to the subSilver theme in phpBB (forum) package. It comes with custom graphics (GIFs) and when I change the background color of the template document, you see left over color around their edges.

I have not once created a graphic in this fashion, so I have no clue what it is or why it is.

So, #1: What would be a simple method of handling the removal of the additional bit of color?

#2: Why and how are people creating graphics like this?
The best thing I can guess is that someone created the "icon" on a solid background, and then cut it from the background? *shrugs*
http://locate32.net/forum/index.php- here is an example of what I mean. ALL graphics have a *slightly* white fleck or two around them.
The icons at the top end up looking like frames (a nice little effect I guess), but the ones at the bottom of the page (the circular ones) look like crap.

Thanks for any advice, tips, suggestions, et cetera.

—
-Lost
Remove the extra words to reply by e-mail. Don’t e-mail me. I am kidding. No I am not.

I looked at folder_locked_big.gif. If you look at the image X 20 or so times you will see the white bits very clearly. Take a 1 pixel brush and colour them the adjacent light bluish colour

owen

"-Lost" wrote in message

What exactly is it with graphics with extra color?

Sorry for such a vague (poorly phrased) question, but for example I am referring to the subSilver theme in phpBB (forum) package. It comes with custom graphics (GIFs) and when I change the background color of the template document, you see left over color around their edges.

That might be fringing. See Layers, Defringe. Also check for featheirng in your selection tool.

"-Lost" wrote in message

Response to "Mike Russell" :

[re using png instead of GIF for alpha transparency]

Good point, but for Internet Explorer 6 and below for example, transparency is not well supported (I believe JavaScript and/or filter hacks are used to achieve PNG transparency). Internet Explorer 7 I believe supports transparency in PNGs, but I’ve not yet been brave enough to install IE7 to find out.

I think the time has come to jump to PNG instead of GIF. My site shows 24% hits from people with IE6 in the last 24 hours or so, and none from IE5 or earlier. All my other hits is using a more recent browser that supports png. This was not true a year ago, when it was well over 50 percent IE6. The benefits of png are sufficient that my own judgement, and yours may differ, is that 24% of my viewers can put up with a white box around certain graphics.

Thanks for the feedback, Mike.

Ever your humble servant.
—
Mike Russell – www.curvemeister.com

In article ,
"-Lost" wrote:

Sorry for such a vague (poorly phrased) question, but for example I am referring to the subSilver theme in phpBB (forum) package. It comes with custom graphics (GIFs) and when I change the background color of the template document, you see left over color around their edges.

Yes, that is correct.

It is there because of a fundamental limitation in the GIF file format. A GIF image can be transparent, but it is "all or nothing" transparent. A pixel is 100% opaque or 100% transparent. The GIF format does not permit translucency; it does not allow a pixel to be partly transparent.

Most graphics programs, including Photoshop, do anti-aliasing. Anti-aliasing is a technique that makes curves and slanted lines look smoother, by creating an optical illusion. Because pixels are rectangular or square, curves and slanted lines look like little "stairsteps." Anti-aliasing smooths out the appearance of stairsteps by placingtranslucent pixels that are partially opaque along the edges.

Create a new image and fill it with white. Click the Line tool and set it to make black lines that are about 10 pixels wide. Draw a bunch of lines at different angles. Then turn off anti-aliasing and do it again. Notice how the lines look jaggy if anti-aliasing is off?

When you make a GIF, you can not anti-alias the edges that are transparent because GIF does not permit partly transparent pixels. GIF images that are transparent look jaggy.

Many programs, including Photoshop, get around this with "matting." When you save a transparent GIF in Save for Web, you can choose a "matte color." If you set this to the color of the background of your Web site, the program will fill in anti-aliased pixels around the edge of the GIF that are the same color as the background of the Web site. This makes the GIF look smooth and not jaggy. But if you put it on a different colored background, you will see a line or fringe around its edge. It only works as long as you do not change the background color.

If oyu change the background color of the Web site, you must go back to the original .psd and use Save for Web again, and specify the new background color of the Web site as the "matte color."

—
Photography, kink, polyamory, shareware, and more: all at http://www.xeromag.com/franklin.html

Response to tacit :

In article ,
"-Lost" wrote:

Sorry for such a vague (poorly phrased) question, but for example I am referring to the subSilver theme in phpBB (forum) package. It comes with custom graphics (GIFs) and when I change the background color of the template document, you see left over color around their edges.

Yes, that is correct.

<snip>

Many programs, including Photoshop, get around this with "matting." When you save a transparent GIF in Save for Web, you can choose a "matte color." If you set this to the color of the background of your Web site, the program will fill in anti-aliased pixels around the edge of the GIF that are the same color as the background of the Web site. This makes the GIF look smooth and not jaggy. But if you put it on a different colored background, you will see a line or fringe around its edge. It only works as long as you do not change the background color.

If oyu change the background color of the Web site, you must go back to the original .psd and use Save for Web again, and specify the new background color of the Web site as the "matte color."

That explained quite a bit. Thank you, tacit!

—
-Lost
Remove the extra words to reply by e-mail. Don’t e-mail me. I am kidding. No I am not.

Response to "Mike Russell" :

Tacit explained the problem completely, and how to deal with it for GIF images.

Yes, yes they did.

I would add that the png format is now supported by the majority of browsers. Png supports partial transparency, and solves the fringing problem.

Good point, but for Internet Explorer 6 and below for example, transparency is not well supported (I believe JavaScript and/or filter hacks are used to achieve PNG transparency). Internet Explorer 7 I believe supports transparency in PNGs, but I’ve not yet been brave enough to install IE7 to find out.

Thanks for the feedback, Mike.

—
-Lost
Remove the extra words to reply by e-mail. Don’t e-mail me. I am kidding. No I am not.

Response to "Mike Russell" :

Good point, but for Internet Explorer 6 and below for example, transparency is not well supported (I believe JavaScript and/or filter hacks are used to achieve PNG transparency). Internet Explorer 7 I believe supports transparency in PNGs, but I’ve not yet been brave enough to install IE7 to find out.

I think the time has come to jump to PNG instead of GIF. My site shows 24% hits from people with IE6 in the last 24 hours or so, and none from IE5 or earlier. All my other hits is using a more recent browser that supports png. This was not true a year ago, when it was well over 50 percent IE6. The benefits of png are sufficient that my own judgement, and yours may differ, is that 24% of my viewers can put up with a white box around certain graphics.

You know, I honestly believe the same thing… but I’m so used to the JavaScript and CSS developers telling me I need to be fully aware of EVERY possible quirk and always make it a point to say, "To deny even one user is to admit a flaw in design and usability."

The last 2 sites I did used a bit of conditional CSS to swap an image out. That’s about as far as I’m willing to go in terms of catering to users of older browsers.

Thanks for the feedback, Mike.

Ever your humble servant.

Good to know. ; ) Thanks again!

—
-Lost
Remove the extra words to reply by e-mail. Don’t e-mail me. I am kidding. No I am not.

"-Lost" wrote in message

Response to "Mike Russell" :

Tacit explained the problem completely, and how to deal with it for GIF images.

Yes, yes they did.

I would add that the png format is now supported by the majority of browsers. Png supports partial transparency, and solves the fringing problem.

Good point, but for Internet Explorer 6 and below for example, transparency is not well supported (I believe JavaScript and/or filter hacks are used to achieve PNG transparency). Internet Explorer 7 I believe supports transparency in PNGs, but I’ve not yet been brave enough to install IE7 to find out.

Thanks for the feedback, Mike.

—
-Lost
Remove the extra words to reply by e-mail. Don’t e-mail me. I am kidding. No I am not.

IE 7 is nice
but if you use Roxio ez–cd be aware it will break you ability ot make DVD menus
not sure why but it is so