Deke’s Techniques #13: Simulating subpixel rendering

Published by | Tuesday, March 29th, 2011

What, you ask, is subpixel rendering? This week’s Deke’s Technique will either make your head spin or make you feel on top of the geek heap. The idea is this: Regardless of the which rendering intent you use for your text—Sharp, Crisp, Strong, or Smooth—Photoshop has a habit of rendering very small type badly, whereas that same very small type looks nice and legible when rendered by your operating system or as editable type by a browser. What’s the difference? The reason is subpixel rendering, which permits an application to rasterize text and other vector objects, on-the-fly, to each of the three color channels (RGB) independently. Here’s a diagram to help things make slightly more sense:

Of course, if you’re working with HTML type, all is well. But as soon as you render that text to pixels, subpixel is not an option. It’s not Photoshop’s fault; JPEG, GIF, PNG, and other web image formats don’t support subpixel rendering. In this week’s free technique, Deke shares not only how subpixel rendering works, but also how to simulate it in Photoshop by creating a faux color antil-alias effect. For those of you who make small type for your screen images—whether web, kiosk, or presentation—or who just like to know the geekiest trick of the week, it’ll make all the tiny difference in the world.

Each week, there’s a new free technique from Deke. And members will find an extra cache of awesome, geektastic, or just plain useful techniques exclusively inside the Online Training Library®. See you next week!

Related links:
Deke’s Techniques
courses on Photoshop in the Online Training Library®
courses by Deke McClelland in the Online Training Library®


Share this:Share on Facebook19Tweet about this on Twitter13Share on Google+0Pin on Pinterest0Share on LinkedIn4 - start learning today

Tags: , , , ,

4 Responses to “Deke’s Techniques #13: Simulating subpixel rendering”

  1. Dan says:

    This is way too complicated for each time you need to use small type in Photoshop. Why not just import vector text from Illustrator as a Smart Object?

  2. @Dan, I asked Deke about your question, and here’s what he passed along:

    “Importing type as a smart object delivers standard grayscale antialiasing (just as when working with small vector objects). In fact, it’s an inferior solution to working with type created directly in Photoshop, which at least gives you the four ‘hinted’ antialiasing styles to choose from.

    “I believe my technique can be recorded as an action, which would dramatically simplify its application. In any case, I present Subpixel Rendering as an alternative option that may or may not meet a user’s needs. It certainly qualifies as King of the Geeks material, I’ll grant you.


  3. Luke Cyca says:

    A simpler way:

    1. Resize the image to 300%
    2. Make three copies of the type, each 1 pixel horizontally offset
    4. Set each layer to show B, G, R (from left to right)
    5. Resize the image back to its original size (33.33%)

    A major caveat with these techniques is that they optimize the image for one very specific kind of monitor. If you view these on a CRT, they look awful. If you view them on a rotated (portrait orientation) LCD, they look awful. Worse, not all LCDs have the same subpixel layout. Deke’s example optimized the image for BGR, but I have an RGB layout, for example. If you optimize for the wrong layout, it looks double-awful!

    Of course, a far better solution is to use webfonts and let the browser do the subpixel rendering.

Leave a Reply