Pixelated text on ImageReady ebpage

[gemoon]

For some projects, Ive been making webpages from sliced photoshop/imageready documents. I've had a recurrent problem that text in photoshop documents seems pixelated and fuzzy.

For example:

http://www.informedhorizons.com/hivdart2002/PROOF/NEW_WELCOME/welcome.html

The clarity is even worse when the page is printed.

This problem seems to be independent of which font I use, but gets worse as font size decreases. Im not sure if this is a problem inherent to photoshop being a pixel based program vs a vector based program such as illustrator. Or, this may be a problem I can solve by through changing some settings.

Some advice would be greatly appreciated,

gemoon

 

[danielh68]

These are probably some things you are already aware of, but I will mention anyhow:
1. Do you have the font set to "crisp"?
2. Possibly try a larger font, such as one designed for the web, like Verdana.
3. Do you refresh the size when you reimport the graphic into your html editor? Sometimes when I replace the older graphic with a newer one that graphic may be a pixel or two larger, consequently I have to browse the code until of locate the dimension tags and change them to accomodate the new size. Otherwise, there's subtle distortion.
4.Generally, images from the web do not print high quality. Especially, if the text is an image such as your case. Web images are only 72 pixels per inch. If you want your text clear, in regards to the main content, use text and not artwork.
I hope this helps.

--DanH

 

[gemoon]

Thanks for the helpful advice.

I have two related questions in reply:
1. Is there a resource which list fonts that are designed for web display?
2. Is it possible to have a brouser display html fonts which a user may not have in their system. ie. if a user doesnt have a font that i want to use, say font "X", code the page to download font "X" and then display font "X". (This may not be the place for this question, but i thought id start here.)

thanks in advance for help,
gemoon

 

[SPYDERIX]

The only way to do that, would be to put a link to the font file, and let users choose to download the font or not. Automatically downloading stuff to peoples computers, may either piss them off, because they have no control over what is going on, or their Virus Detection programs (Norton) will regard that as maliciuos scripting and will shutdown the Internet Browser.

I wonder, can you use the embed tag to embed a font for the page to view in, while not downloading the font, or using some sort of CSS???



Nate
"If you're not living on the edge, you're taking up too much space!"

 

[viol8ion]

http://hotwired.lycos.com/webmonkey/design/fonts/tutorials/tutorial2.html

This tutorial is an excellent place to start on embedding fonts into a web page. In the end, it is usually easier to stick with the standard fonts rather than to embed ... read the article and you will understand why.

When in doubt, deny all terms and defnitions.

http://www.wuli.com

 

[viol8ion]

Oh, sorry to post 2 times in a row, but it just occurred to me to ask this question.

gemoon, are you slicing and converitng the slices to GIFs? If so, that will be why your text is pixelated. Choose JPG as the format if you have fine text or graduated colors... the end result will be better. And web graphics at 72DPI are fine for screen, but will print lousy... for print you need 300DPI, which is too high a res for web use. When in doubt, deny all terms and defnitions.

http://www.wuli.com

 

[blueark]

One thing to note about creating type in Photoshop for web use is that type is anti-aliased by default. This means that they are forced onto a pixel grid, and to make it look more natural, hard edges are smoothed out. For display type (eg. headings), this works great. For small type, it makes a blurry mess, so turn it off. In general, text created in Photoshop will look worse in print than on screen (unless you save a copy as an EPS and import it into a page layout program...not the case for web graphics...)

Now, about embedding fonts....you could investigate SVG. I don't know much about it, but it seems like a more open version of Flash (if not as widely supported yet). Because it's XML based, text within SVG graphics can be searched (like a normal web page), and there is a facility to embed fonts in SVG files. Actually, I think fonts are embedded in a seperate file, so if you have many pages using the one font, it only has to be downloaded once, unlike Flash. Of course, you could use Flash to embed fonts too, but seeing as this is a Photoshop forum, and Adobe are being very supportive of SVG, it seems plausible that future versions of PS may offer some support, even if it is largely a vector format. I know Illustrator already does...