DPChallenge: A Digital Photography Contest You are not logged in. (log in or register) 
 

DPChallenge Forums >> Tips, Tricks, and Q&A >> Q: anti-aliasing text for web (nix the jaggies)
Pages:  
Showing posts 1 - 9 of 9, (reverse)
AuthorThread
 05/07/2010 09:58:47 AM · #1
I'm hoping someone can point me in the right direction.

I've really struggled--and I don't know if I'm alone in this--when trying to render the edges of text smoothly for the web. Photoshop just doesn't seem to get it perfectly smooth when viewed at 100% (which is what it is going to be on the web). I've tried the different anti-aliasing modes. "Strong" seems to have the least edge jaggies, but they're still present. So, I don't know if I'm missing something.

In the past, I've tried rasterising & blurring the text on a second layer, but that definitely sacrifices sharpness and increases the text width unacceptably.

More recently, I've tried increasing the resolution a known amount, rasterising at the higher resolution, and then downsizing progressively with the various bicubic algorithms (some work better than others). This has worked the best, but it ends up being hit-and-miss whether or not one or more of the steps will create bad edge artifacts.

Can anyone help me out what's the best way? I'm guessing the same problem exists when rasterising vector graphics for web. Or maybe I'm just being O.C. about it...?
 05/07/2010 10:12:15 AM · #2
Hi Bert,

I've done lots of work with text in the Adobe suite, and I've never had a problem with the antialiasing. Sounds like something weird might be going on under the hood of your PhotoShop.

Could you perhaps post an example of the jaggies? At the very least, I or someone else could tell you if it looks wrong on a different screen from yours.
05/07/2010 10:32:54 AM · #3
Cool, yes, sure.

Here's some text, unedited with "strong" anti-aliasing


And here's some after working on it by downsizing from a higher rez image:


Message edited by author 2010-05-07 10:34:52.
 05/07/2010 11:22:34 AM · #4
Okay, I see what you're saying. From what I know, the sort of pixellation you're getting there is unavoidable. Given the strong curvature of the font face, the small point size of the text, and the strong contrast between white background and black text, there's just no way to render that perfectly smoothly. I would guess that you don't see the same kind of problem using a larger size, a different face, or a lower-contrast color scheme.

I realize this response may be unsatisfying, but I also may be wrong. If others weigh in, you may hear differently. In any case, good luck with your textual battles!
 05/07/2010 11:44:49 AM · #5
Thanks so much for your reply.

If there's other suggestions for alternate methods to deal with jaggies, I'd love to hear it...
 05/07/2010 11:51:12 AM · #6
If possible, a bold style will help.. As it will increase the size of the smallest lines that are pixelating the worst..
 05/07/2010 11:57:59 AM · #7
Your screen can only display in units of 1 pixel or more. Accordingly, any line of less than one pixel in width is going to cause problems. That's it in a nutshell. When planning type for web display you have to take this into consideration. Curved/diagonal, very thin lines *are* going to go jaggy, there is no way around it.

R.
 05/07/2010 02:18:32 PM · #8
haha, I think I've found a method that works satisfactorily (see below for examples)

Thanks also for replies. This all seems to enter a bit of a nebulous area when--as bear mentioned--1 pixel on a screen = 1 pixel on the image, so antialiasing has to trick one's eyes...

Anyways, what I found effective (resulting in not too much blur, but a smooth appearance) was this:

enlarge the image, so the following reductions are possible after rasterization:

1) reduce width to 4/5ths (eg. 425px long side --> 340px long side)
2) reduce width to 3/4ths (eg. 340px long sice --> 255px long side)
3) reduce width to 2/3rds (eg. 255px long sice --> 170px long side)

Here's three examples,
Without the above step reduction (with photoshop antialiasing of "strong"):

Using bicubic for the algorithm with the above reductions:

Using bicubic smoother for the algorithm with the above reductions:


What do ya think? (to my eyes, it's pretty smooth)

--------------------------
Edited to add:

As far as I can tell, ending with a 1/2 reduction is best ie.
reduce width to 4/5 (eg. 850 wide --> 680 wide)
reduce width to 3/4 (680 wide --> 510 wide)
reduce width to 2/3 (510 wide --> 340 wide)
reduce width to 1/2 (340 wide --> 170 wide)

Message edited by author 2010-05-07 16:56:57.
 05/07/2010 03:46:01 PM · #9
Originally posted by Medoomi:
haha, I think I've found a method that works satisfactorily (see below for examples)

Thanks also for replies. This all seems to enter a bit of a nebulous area when--as bear mentioned--1 pixel on a screen = 1 pixel on the image, so antialiasing has to trick one's eyes...

Anyways, what I found effective (resulting in not too much blur, but a smooth appearance) was this:

enlarge the image, so the following reductions are possible after rasterization:

1) reduce width to 4/5ths (eg. 425px long side --> 340px long side)
2) reduce width to 3/4ths (eg. 340px long sice --> 255px long side)
3) reduce width to 2/3rds (eg. 255px long sice --> 170px long side)

Here's three examples,
Without the above step reduction (with photoshop antialiasing of "strong"):

Using bicubic for the algorithm with the above reductions:

Using bicubic smoother for the algorithm with the above reductions:


What do ya think? (to my eyes, it's pretty smooth)


Looks about as good as it's going to get if you want those super thin lines.
Pages:  
Current Server Time: 08/26/2025 11:30:14 AM

Please log in or register to post to the forums.


Home - Challenges - Community - League - Photos - Cameras - Lenses - Learn - Help - Terms of Use - Privacy - Top ^
DPChallenge, and website content and design, Copyright © 2001-2025 Challenging Technologies, LLC.
All digital photo copyrights belong to the photographers and may not be used without permission.
Current Server Time: 08/26/2025 11:30:14 AM EDT.