Making display text for web pages

M
Posted By
meredith78
Mar 3, 2009
Views
378
Replies
9
Status
Closed
I have very little experience in terms of making files for webpages. I have an image, that contains display text and I need to know what the best format for webpages would be??? The thing that annoys me is that as soon as I make a jpeg, the text turns blurry. What to do??

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

DM
dave_milbut
Mar 4, 2009
text on a web page should generally be done in html.
JW
John_Waller
Mar 4, 2009
JPG for photos.

PNG or GIF for solid colours and text.

But as Dave notes, text on web pages is usually best done as plain text in the HTML code and then styled with CSS.


Regards

John Waller
JJ
John Joslin
Mar 4, 2009
You can also compress the text less in the Save for Web dialog.
DM
Don_McCahill
Mar 4, 2009
Also, if you need small fonts in a graphic, Google for "pixel fonts"
M
meredith78
Mar 5, 2009
So basically if I have an image, with some display test above it, the image is best to be saved as a seperate file than the text…therefore do the test as html? This way it’ll avoid it looking slightly blurry?
JW
John_Waller
Mar 6, 2009
In short, yes, although it depends on your website layout.


Regards

John Waller
A
ashleydn
Mar 6, 2009
But what if your text is part of the image? i.e. company logo; graphic with text on it as the header banner? how do you keep the text from becoming blurry once it’s saved as a jpg?
JJ
John Joslin
Mar 6, 2009
But what if your text is part of the image?

See post #3. As long as it’s on its own layer it can be given less compression. It’s not an ideal solution.

(I am not sure whether the OP is using the term "display text" in its narrow typographical sense.)
DM
dave_milbut
Mar 6, 2009
what john said.

sometimes you can’t help having text in the image. quite often actually as in the case of nav bars. keep the original ppi high (300ish), keep the text int he original live so that it stays vector and crisp. save the original as a psd, don’t flatten it. and when you export to a final format like gif or jpg, use less compression on the text (see help file – F1 – to see how to make that happen).

GIF is probably a better final format for maintaining text crispness than JPG. haven’t played with PNG for the web much, esp. for graphics containing text, but experiments might yield some good results as that’s a non-lossy format as well and can handle more colors than GIF.

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections