Cleartype Backgrounds

With Windows XP MS introduced "cleartype" antialiasing for on-screen fonts.  The idea is that on an LCD, each pixel is actually made up of 3 elements, one red, one green, and one blue.  These elements are placed side-by-side, so each element represents a sub-image 1/3 pixel offest from the element next to it.  If you antialias the red, green, and blue channels seperately with each offset 1/3 pixel from the others, you can effectively triple the horizontal resolution of your screen.

Microsoft's website has some information about the process, including some helpful diagrams.

So I started wondering.... if you could do that with an image, would it make a significant difference in the sharpness?  How would you even do it in the first place?

So I've cooked up a method in photoshop that will allow you to do just that.  As for the results, I'll let you judge for yourself (since image quality is a highly subjective thing).

Step 1: Determine Your Sizes

I'm planning on making a background image for my laptop, so I need to plan this out accordingly.  My laptop's resolution is 1400x1050, but I'm going to need to work at 3x that resolution to get the results I want.  So, my first step is to create a new image with the appropriate size (4200x3150):

Slide 1

Step 2: Creating Your Image 

Now I need a source image that's large enough that I can actually make a background out of it.  Let's face it, if you're sizing an image up to make your background, you may as well not use this technique (since there will be no fine detail to preserve).  So, to make my background I'm placing an image of Samus from Super Smash Bros. Brawl for the Wii.  It's a promotional artwork file, so it's starting out at 2000x3000.

Slide 2

Now that I have my source image, I isolate it and create a gradient in the background.  This is all basic photoshop work, and more or less irrelevant to the technique, but you will probably have to create at least part of the image yourself to wind up with a 3x desktop resolution source.

Slide 3 

Step 3: Preparing for Resize

Save a backup of your file if you want to edit it later.  The next few steps will make your file uneditible.

Flatten your image (Layer->Flatten Image), and then duplicate the resulting layer twice. Change the top two layers' blending modes to "Screen."

Slide 4 

Now we're going to use Levels to make these into Red, Green, and Blue channels.  Click on the bottom-most layer and press Ctrl+L (or Command+L) to bring up the Levels dialog.  Select "Green" from the "Channel" menu and then set both Output Levels to 0.  Repeat for "Blue." You've now made your bottom-most layer into a Red channel.

Slide 5 

Repeat this process for the other two layers, except with the center layer you turn off "Red" and "Blue," and for the top-most layer you turn off "Red" and "Green."  You will wind up with Red, Green, and Blue Channels.

Slide 6 

Step 4: Resizing

Okay, now you've got your 3 channels ... the last step is to offset them and scale down to the target size.  Zoom in to 100% or closer (this will ensure that when we nudge, we nudge 1 pixel at a time).  Select the "move" tool, and select the middle layer.  Press the "left" key once.  Now select the top-most layer and press the "left" key twice.  You should see a distinctive red/blue shift.

Slide 7 

Now it's time to output the final image.  Flatten the image one more time.  Apply a motion blur filter (Filters->Blur->Motion Blur).  Make it angled 90 and 3 pixels in length (to ensure we lose no vertical image).  Now resize the image (Image->Image Size) to your target size (in my case 1400x1050).  Any filtering method should be fine.

Now your image is complete.  Save it somewhere and set it as your background.

Click to See the Results (630 KB)


Well, I certainly think that it looks sharp, and of course it all depends on your source photo.  If your source isn't large enough, or doesn't have enough fine detail, then this probably wouldn't be worth the time.  However, if your source is a high resolution computer rendering, then you can eek out a tiny extra bit of detail using this process.

If you did all the steps above and you ended up with a really blurry image, then you probably have a BGR display (or you might have a rotated monitor).  In that case you'll need to alter the offset directions appropriately (change "left" to "right" for BGR, and use either "up" or "down" for a vertical monitor).

If it's something you're doing for yourself for just your monitor, then it should be just fine.  But if it's something you're gonna distribute online, you're better off just making the highest resolution you feasibly can and letting the users deal with their own resizing.