I am creating a website header in Photoshop CS5, however when I look at it, the text looks very blurry and I have no idea why.
I use the Web preset. What do you recommend for the sharpest and best results?
Here's the current mockup:
The anti-aliasing options are available on the toolbar and in the
NB: if you are planning to use the text layers as regular (HTML) text in the final product, the browsers most probably will render the text differently than Photoshop does. More info on this you can find on the same "Font (anti)aliasing in Photoshop" question mentioned.
Make sure the
width attributes (or CSS) for your
img tag match the actual size of the image. Otherwise, it will be rescaled by the web browser, and many web browsers do this in an ugly way. Even the ones that do it relatively well may render the image somewhat blurry.
If you want to make sure that it looks right, keep the pixels 1:1.
I would not display text as an image as that leads to accessibility and search engine problems.
However, if you do want to display a text as an image, png or gif images give better results than jpg images due to the jpeg compression. Even if you don´t compress your image, a browser like Opera mobile or an internet 'accelerator' might.
I should point that say there is absolutely no need to use image text in your design. Avoid using non-web fonts for the body copy. -I know they look great on the design but you get more trouble in HTML than what its worth -
Just select 'None' from the anti-aliasing options in PS if you don't want blur in your text. HTML version will always render text differently depending on the OS or Browser so there isn't really a lot that you can do.
Have a look at this as well, it should help you more to solve text rendering issues in your HTML rather than PS
I always design with 'Crisp' antia-aliased option selected and aware of the fact that text in HTML will look different anyway!