How To Make Text In A Picture More Clear

There are a few little tricks you can do in Adobe Photoshop to make your text look a bit sharper on your Web pages, especially at smaller sizes.

Resizing

When resampling blocks of text, there is an option you may not have noticed that will help you achieve sharper results. This is particularly useful when you have scanned in blocks of text or line art

Screen Shot 2014-10-24 at 3.08.52 PM

When we go to resize the image (Image> Image Size), Bicubic resampling is the default option. This works best for most images.

Screen Shot 2014-10-24 at 3.09.45 PM

Here is the result of Bicubic resampling on our text

Screen Shot 2014-10-24 at 3.16.12 PM

Try it again, but this time choose Bilinear (Or try Bicubic sharper) resampling

Screen Shot 2014-10-24 at 3.12.02 PM

Notice how much sharper the text is?

Screen Shot 2014-10-24 at 3.16.33 PM

Here they are again, side by side, so you can compare them better.

Screen Shot 2014-10-24 at 3.16.12 PM

Tracking

The second trick you can use in Photoshop applies to small text and its tracking, or kerning, which is the spacing between letters. Here is a line of text with standard tracking

In the tracking box (Window> Show Character), increase the amount to 20

See how much more legible the text is? Look at a road sign and notice that the tracking is set very wide. That's why you can read them from a distance.

Anti-Aliasing

Many people use anti-aliasing on text on the Web, with mixed results. Here is a line of text with the crisp anti-aliasing applied (Layer>Type>Anti-Alias Crisp). It's kind of blurry

Here is a line with sharp anti-aliasing applied Notice the difference?

These little tips help you to produce Web pages with sharper, easier-to-read text.

Get in-the-know!

CS6 Superguide

Join our list to receive more tutorials and tips on Photoshop. Get exclusive tutorials, discounts and the free super guides. No spam, all content, no more than once a week.
If you're on our list, you will receive it free by email as soon as it's available. If not, sign up now and get the CS6 Superguide for free. Or click the image below.