Feather/Vignette to textured web background

In article <%fWYf.84372$>,
"JM" wrote:

I have created a web page with a textured background (suggestive of parchment paper), via a Render / Clouds / Sharpen / Noise method. I would really like to put a picture at the top of the page that fades into this textured background. However, all the methods I’ve seen for GIFs/JPEGs leave me with white edges. I can get the effect pretty close using a PNG output, but my understanding is that some browers (IE included ???) will have trouble with PNGs.

Can I accomplish what I want using PS 7?

Not easily, no.

The problem is not with Photoshop. The problem is with the standards for Web files and the way Web browsers are written.

GiF does not support translucency; only all-or-nothing transparency. You can get very close with GIF by looking carefully at the Save for Web dialog; there is an option called "matte color" which you use to choose the predominant color of your Web background. It will not be perfect on a textured background, but it’s as close as you can get with GIF.

PNG will work, except that Microsoft and some other browser manufacturers don’t support PNG with alpha transparency. (There is an ugly hack you can use to make it work in some versions of Explorer, but it is not always reliable.)

You’ve hit one of the limitations of the current Web. Sorry.

—
Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com

In article ,
says…

In article <%fWYf.84372$>,
"JM" wrote:

I have created a web page with a textured background (suggestive of parchment paper), via a Render / Clouds / Sharpen / Noise method. I would really like to put a picture at the top of the page that fades into this textured background. However, all the methods I’ve seen for GIFs/JPEGs leave me with white edges. I can get the effect pretty close using a PNG output, but my understanding is that some browers (IE included ???) will have trouble with PNGs.

Can I accomplish what I want using PS 7?

Not easily, no.

The problem is not with Photoshop. The problem is with the standards for Web files and the way Web browsers are written.

GiF does not support translucency; only all-or-nothing transparency. You can get very close with GIF by looking carefully at the Save for Web dialog; there is an option called "matte color" which you use to choose the predominant color of your Web background. It will not be perfect on a textured background, but it’s as close as you can get with GIF.
PNG will work, except that Microsoft and some other browser manufacturers don’t support PNG with alpha transparency. (There is an ugly hack you can use to make it work in some versions of Explorer, but it is not always reliable.)

You’ve hit one of the limitations of the current Web. Sorry.
—
Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com

The other solution would be to do *that* page as a composite of the background with the image feathered into it in PS. Unfortunately, everytime you change the image, you will have to also replace that background. By using the background as part of the composite, it will appear to be the same as for other pages that use it, without the image.

Hunt

—
NewsGuy.Com 30Gb $9.95 Carry Forward and On Demand Bandwidth

"Hunt" wrote in message

In article ,
says…

In article <%fWYf.84372$>,
"JM" wrote:

I have created a web page with a textured background (suggestive of parchment paper), via a Render / Clouds / Sharpen / Noise method. I

would

really like to put a picture at the top of the page that fades into

this

textured background. However, all the methods I’ve seen for GIFs/JPEGs leave me with white edges. I can get the effect pretty close using a

PNG

output, but my understanding is that some browers (IE included ???)

will

have trouble with PNGs.

Can I accomplish what I want using PS 7?

Not easily, no.

The problem is not with Photoshop. The problem is with the standards for Web files and the way Web browsers are written.

GiF does not support translucency; only all-or-nothing transparency. You can get very close with GIF by looking carefully at the Save for Web dialog; there is an option called "matte color" which you use to choose the predominant color of your Web background. It will not be perfect on a textured background, but it’s as close as you can get with GIF.
PNG will work, except that Microsoft and some other browser manufacturers don’t support PNG with alpha transparency. (There is an ugly hack you can use to make it work in some versions of Explorer, but it is not always reliable.)

You’ve hit one of the limitations of the current Web. Sorry.
—
Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com

The other solution would be to do *that* page as a composite of the

background

with the image feathered into it in PS. Unfortunately, everytime you

change

the image, you will have to also replace that background. By using the background as part of the composite, it will appear to be the same as for other pages that use it, without the image.

Hunt

That’s actually the method I went with right after posting my query. It’s working okay, but it’s certainly not ideal.

thank you for the suggestion.

jm

In article <9TiZf.74600$ says
….

"Hunt" wrote in message

In article ,
says…

In article <%fWYf.84372$>,
"JM" wrote:

[SNIP]

That’s actually the method I went with right after posting my query. It’s working okay, but it’s certainly not ideal.

thank you for the suggestion.

jm

You are correct – hardly ideal. I’ve had the same problem on several projects, and this work-around is all I have ever come up with. Were it not for the pattern in the background art, it would be so simple, but the pattern really causes some problems. If anyone ever comes up with something that I have been missing for years, I hope that they share it!

Hunt

—
NewsGuy.Com 30Gb $9.95 Carry Forward and On Demand Bandwidth

"Hunt" wrote in message

In article <9TiZf.74600$
says
…

"Hunt" wrote in message

In article ,
says…

In article <%fWYf.84372$>,
"JM" wrote:

[SNIP]

That’s actually the method I went with right after posting my query. It’s working okay, but it’s certainly not ideal.

thank you for the suggestion.

jm

You are correct – hardly ideal. I’ve had the same problem on several projects,
and this work-around is all I have ever come up with. Were it not for the pattern in the background art, it would be so simple, but the pattern really
causes some problems. If anyone ever comes up with something that I have been
missing for years, I hope that they share it!

Hunt

don’t use patterns in background?

—
NewsGuy.Com 30Gb $9.95 Carry Forward and On Demand Bandwidth