White Borders on the Web

JS
Posted By
Jim Satterfield
Nov 15, 2004
Views
237
Replies
4
Status
Closed
Sorry to those of you who have read this on adobe.photoshop.windows but these are the only two groups I’m posting this on and am annoyed that this is happening when I can’t find a clue as to why it’s happening.

I am having a problem with items for the web. I create an image with a transparent background. I’ve done this with characters and a navigation button I created and have the same problem, which is a thin white border around the image. It surrounds the button and each letter in a file created for a header. I want to be able to create an image that is usable no matter what the background instead of what I did for the text that is my title, which is use the same image I’m using for the page background for the background of the Photoshop image.

The process I used is as follows. I create the image in Photoshop then convert it to 8 bit RGB to edit in Imageready. From there I save it as an optimized gif file. This process is the same in both instances but more important for the buttons since they have rollover effects associated with them.

I’d appreciate any suggestions.

Jim

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

H
Hecate
Nov 16, 2004
On Mon, 15 Nov 2004 23:48:11 GMT, "Jim Satterfield" wrote:

I’d appreciate any suggestions.
Set the matte colour to the colour of the background when you produce the gif.



Hecate – The Real One

veni, vidi, reliqui
S
Stephan
Nov 16, 2004
Jim Satterfield wrote:
Sorry to those of you who have read this on adobe.photoshop.windows but these are the only two groups I’m posting this on and am annoyed that this is happening when I can’t find a clue as to why it’s happening.
I am having a problem with items for the web. I create an image with a transparent background. I’ve done this with characters and a navigation button I created and have the same problem, which is a thin white border around the image. It surrounds the button and each letter in a file created for a header. I want to be able to create an image that is usable no matter what the background instead of what I did for the text that is my title, which is use the same image I’m using for the page background for the background of the Photoshop image.

The process I used is as follows. I create the image in Photoshop then convert it to 8 bit RGB to edit in Imageready. From there I save it as an optimized gif file. This process is the same in both instances but more important for the buttons since they have rollover effects associated with them.

I’d appreciate any suggestions.
You are not doing anything wrong, the problem is a classic one. 2 solutions:
1) Create your graphics on a background matching the page’s it will be placed on.
2) Open your Gif at max magnification and use a small eraser to zap the white pixels.
Solution 1 is best

Stephan
E
edjh
Nov 16, 2004
Jim Satterfield wrote:

Sorry to those of you who have read this on adobe.photoshop.windows but these are the only two groups I’m posting this on and am annoyed that this is happening when I can’t find a clue as to why it’s happening.
I am having a problem with items for the web. I create an image with a transparent background. I’ve done this with characters and a navigation button I created and have the same problem, which is a thin white border around the image. It surrounds the button and each letter in a file created for a header. I want to be able to create an image that is usable no matter what the background instead of what I did for the text that is my title, which is use the same image I’m using for the page background for the background of the Photoshop image.

The process I used is as follows. I create the image in Photoshop then convert it to 8 bit RGB to edit in Imageready. From there I save it as an optimized gif file. This process is the same in both instances but more important for the buttons since they have rollover effects associated with them.

I’d appreciate any suggestions.

Jim
Make sure the Matte setting is same color or similar to your web background.


Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html
Comics art for sale:
http://www.sover.net/~hannigan/batsale.html
B
beu
Nov 16, 2004
The ‘thin white border’ you see isn’t white but a blend of pixel colors called anti-aliasing to make the edge appear smooth. It works well if your web background matches the background color in Photoshop but produces the halo you’ve seen when the web background color is very different.

The solution is to produce a hard-edge transition between the the edge pixels of your image and the transparent background.
[A hard-edge will show up as ‘jaggies’ on diagonal edges.]
You do this by disabling anti-aliasing in type and in the layer style option. See the help files under "anti-aliasing" for details.

In article <%ebmd.46330$>,
Jim Satterfield wrote:

I am having a problem with items for the web. I create an image with a transparent background. I’ve done this with characters and a navigation button I created and have the same problem, which is a thin white border around the image. It surrounds the button and each letter in a file created for a header. I want to be able to create an image that is usable no matter what the background instead of what I did for the text that is my title, which is use the same image I’m using for the page background for the background of the Photoshop image.

The process I used is as follows. I create the image in Photoshop then convert it to 8 bit RGB to edit in Imageready. From there I save it as an optimized gif file. This process is the same in both instances but more important for the buttons since they have rollover effects associated with them.

I’d appreciate any suggestions.

Jim

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections