How to Create 'HTML-quality' text within Photoshop?

megatabbers

megatabbers

New member
Jul 21, 2009
1,284
29
0
Boston, MA
I've always wondered how some banner ads have such great looking text whereas mine always look 'funny'. For example, Arial 10pt looks so 'grainy' compared to the same font and size text written on a webpage. Is there some setting in there to make them comparable in quality?
 


I think am a bit late in answering this question, but I decided to go ahead with it nonetheless.

The anti-aliasing feature is basically a method to fool the eyes into believing that the particular object has smooth/softened edges.

When you type in a regular character on a webpage, there is no anti-aliasing performed and hence the text comes across as general. It may go unnoticed, but the effects can be made out when the text is stretched across in a graphic software such as photoshop.

I just created a quick demo for you to give you a gist of what anti-aliasing basically can do to your text.

zx6t0k.jpg


When looked together, your eyes can immediately make out the blur in the edges of the bottom four as opposed to the one with anti-aliasing set to none.

An easier way to change your anti-aliasing preference quickly is to select the Type tool in photoshop - when you type in the text the userbar at the top automatically changes to the Type tool preferences. Look at the fourth option in the above bar and you can see anti-aliasing preferences.



Happy designing :)
 
Also try to export as GIF or PNG with no dithering instead of JPG. If you have to use JPG try to find the balance between file size and keeping the text un-molested.
 
You must log in or register to reply here.
Top Bottom