Re: Want crisper text

K
Posted By
KatWoman
May 24, 2005
Views
509
Replies
2
Status
Closed
as his page has a textured background how would you select the matte? in this case white is close but what about other pages with patterns in background?
"tacit" wrote in message
In article ,
wrote:

Hi. I just finished a re-write of a site I’ve had for about eight years. I finally learned enough of Dreamweaver to do the project. I’m happy with the results, except for some text I’ve put there. I created both the title in the main frame and the word "index" on the left with Photoshop. But they don’t look that great.

Yep, that’s correct. You put drop shadows on them and saved them as transparent GIFs. But the GIF standard does not support translucency; a pixel must be 100% percent transparent or 100% opaque, with no in-between permitted. So when you save a transparent GIF that has smooth antialiased edges or soft drop shadows, it looks raggy and ratty.
Open the original .psd file–NOT the .gif–in Photoshop and go File->Save for Web. In the Save for Web window, you will see a place where you can specify a "matte color." This is used by Photoshop to create the illusion of translucency, which makes a smoother edge. Choose a "matte color" that is the same color as your Web page background.

Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html

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!

T
Tacit
May 25, 2005
In article <%6Jke.9262$>,
"KatWoman" wrote:

as his page has a textured background how would you select the matte? in this case white is close but what about other pages with patterns in background?

It’s virtually impossible to create a transparent GIF that blends cleanly with a textured background. This is simply one of the limitations of the Web that Web designers have to contend with. There are a number of solutions, none of them perfect:

– Choose a matte color that matches the predominant color of the textured background. It doesn’t look perfect, but it does look surprisingly good. This is the most common solution.

– Do not create a transparent background at all; instead, merge the background texture in with the logo. Works flawlessly, but the designer must be careful; if the image does not precisely align with the texture of the background, it doesn’t work. This means controlling the location of the image precisely in the browser window–something that’s not always easy to do.

– Create the image with no matte, and accept that it may have a jagged edge or a halo around it.

– Create the image as a transparent PNG, and accept the fact that the majority of Web browsers will not render it properly–probably the least desireable solution.

– Rework the Web page design so as not to use a textured background, or to use a textured background with only a subtle texture, and then use solution #1 above.

If you’re going for a text-heavy design, using no textured background (or a very subtle textured background) is probably good design anyway. In fact, I’ve mostly stopped using textured backgrounds in Web sites I design, as they do tend to make text more difficult to read.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
K
KatWoman
May 25, 2005
thank you for such detailed info
I mostly do retouching and printing so I don’t use gif format too much. Now that I am doing some web design I find a lot of stuff I don’t know. I am trying my first ‘from scratch" pages using Illy, PS, Image Ready and Flash. I like the FrontPage program but never used the templates without having to do a lot of customization to the graphics.
I thought the guy’s site needed better design overall.

"Tacit" wrote in message
In article <%6Jke.9262$>,
"KatWoman" wrote:

as his page has a textured background how would you select the matte? in this case white is close but what about other pages with patterns in background?

It’s virtually impossible to create a transparent GIF that blends cleanly with a textured background. This is simply one of the limitations of the Web that Web designers have to contend with. There are a number of solutions, none of them perfect:

– Choose a matte color that matches the predominant color of the textured background. It doesn’t look perfect, but it does look surprisingly good. This is the most common solution.

– Do not create a transparent background at all; instead, merge the background texture in with the logo. Works flawlessly, but the designer must be careful; if the image does not precisely align with the texture of the background, it doesn’t work. This means controlling the location of the image precisely in the browser window–something that’s not always easy to do.

– Create the image with no matte, and accept that it may have a jagged edge or a halo around it.

– Create the image as a transparent PNG, and accept the fact that the majority of Web browsers will not render it properly–probably the least desireable solution.

– Rework the Web page design so as not to use a textured background, or to use a textured background with only a subtle texture, and then use solution #1 above.

If you’re going for a text-heavy design, using no textured background (or a very subtle textured background) is probably good design anyway. In fact, I’ve mostly stopped using textured backgrounds in Web sites I design, as they do tend to make text more difficult to read.

Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html

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