Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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:

Header

share|improve this question

migrated from photo.stackexchange.com Apr 24 '11 at 21:01

This question came from our site for professional, enthusiast and amateur photographers.

    
did you try to enlarge a raster image? That usually leads to blurriness. On a side note, for raster vs. vector, see e.g: graphicdesign.stackexchange.com/questions/260/… –  koiyu Apr 25 '11 at 13:27
    
@koiyu - The layers I am most worried about are the Text layers, and I did not rasterize those –  Jeff Apr 25 '11 at 13:35
    
(oh, I was looking at the curve around "xSky") Photoshop applies some anti-aliasing to the text by default and the setting might not suit your current needs. There are examples in graphicdesign.stackexchange.com/questions/1177/… (although this doesn't directly answer your question) –  koiyu Apr 25 '11 at 13:43
    
Thanks for this post, exactly what I needed to help me with my blurry text, awesome clear help :) –  user16398 Nov 6 '13 at 0:05

5 Answers 5

up vote 14 down vote accepted

By default, Photoshop applies some anti-aliasing to the text layers. Alex has provided a nice comparison in another question:

comparison

The anti-aliasing options are available on the toolbar and in the Character window:

anti-aliasing options


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.

share|improve this answer
    
So I guess its the Anti Aliasing that is doing it? How else can I achieve bold text? :) –  Jeff Apr 25 '11 at 14:28
    
You could use a boldier version of the font (if available), which can be chosen from the drop-down next to the font family. OR you could use the Photoshop's faux bold, which is enabled by pressing the T button (next to the T button). OR you could add a layer effect, e.g. a stroke, to make the text look boldier. –  koiyu Apr 25 '11 at 14:32
2  
Also, I might add, this is one reason that Pictures of Text isn't a good idea. Real text can be rendered in the most desirable way by the client. –  mattdm Apr 25 '11 at 14:48
    
Okay, thank you! –  Jeff Apr 25 '11 at 15:58

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

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

I always design with 'Crisp' antia-aliased option selected and aware of the fact that text in HTML will look different anyway!

share|improve this answer

I would make the text as a transparent PNG file for better resolution. Another alternative is to use sIFR for both the style and SEO. sIFR is basically embedding the font as Flash, but it is 100% search engine friendly. See some examples at e.g. 3d-photomontage.com.

share|improve this answer

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.

share|improve this answer
    
Always use PNG, got away from JPEG a long time ago :P –  Jeff Apr 27 '11 at 18:25

Make sure the height and 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.

share|improve this answer
    
The thing is, in Photoshop itself it looks blury. How do I do the "pixels 1:1"? –  Jeff Apr 25 '11 at 10:50
    
@Jeff "keeping pixels 1:1" is equivalent to looking at the image at 100 % zoom. –  koiyu Apr 25 '11 at 13:25
    
@koiyu - Okay, I already have that though. :) –  Jeff Apr 25 '11 at 13:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.