Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Hey gang! This is Deke McClelland. Welcome to Deke's Techniques. This week, I have got a special treat for you web designers who are struggling with little type inside of Photoshop. And you try those different anti-aliasing settings up in the Options bar-- you know, Sharp and Crisp and Smooth and Strong--and they all look like garbage. One possible solution is to take advantage of a little thing called subpixel rendering. Now this is such an arcane topic that even folks who are comfortable saying the word anti-aliasing dare not to speak it.
I am going to show you exactly how subpixel rendering works, and how to simulate it in Photoshop, and make you absolutely king of the nerds inside this movie. All right. So this movie is all about how to simulate subpixel rendering inside of Photoshop. But first of all, I need to give you an idea of what I'm talking about. Subpixel rendering is a variety of anti-aliasing, an anti-aliasing is a method for mapping curvature on to square pixels and achieving somewhat smooth results.
For example here, imagine that this gray checkerboard is the pixel grid, and we are trying to map this smooth mathematical character definition onto that grid. Well, obviously the pixels cannot do curves, so somehow we have to map curves onto squares. Now back in the old days before anti- aliasing was conventional--and we are talking back in the days before 24-bit monitors were routinely available-- pixels were either turned on or off, and that's it. So for example, if a pixel mostly fell inside the character definition, then it was on.
If it mostly fell outside the character definition, it was off. And that's all there was too it. All right! Then comes along anti-aliasing. And this time I have made my pixel grid blue in order to demonstrate progress. And anti-aliasing is available routinely inside of Photoshop. What we see is if a pixel is 100% inside the letter form, then it's opaque. If it's 100% outside, then it's transparent. If it's 50% in and out, then it's 50% opaque. If it's just 10% in, then it's 10% opaque, and so on.
So the opacity of a pixel is linked to its intersection inside of that character outline. All right! Now let's take a look at the way subpixel rendering works. It's specifically designed to accommodate flat-panel monitors, so not CRT tubes, not those big deep old TV set kind of things, but rather flat screens. And on a flat screen, specifically in LCD let's say, a single pixel looks like this red, green, blue stripe thing that I've drawn here. So you have a series of very thin color components. And so each pixel has red and green and blue, stripes of each, and when they're firing at full intensity, then the pixel ends up looking white, because it blur together, and when they are not firing at all, they look black, and so forth.
So what pixel rendering does is it takes advantage of the fact that you really have three slim pixels in one. So I will go ahead and turn on this final item, so you can see what that looks like. Notice now, if a pixel falls entirely in a character outline, it is opaque. If it's entirely outside the outline then it's transparent. But now I'll go ahead and zoom in here. In between you have this gradient, this fading gradient of color essentially. Notice that this is entirely a horizontal effect.
Each pixel is uniform vertically. So we are just seeing this little bit of color fade horizontally across the pixels. So for example if I was talking about one of these pixels over here on the left-hand side of the character, that blue component would be very dark, and then the green component would lighten up a little bit, and the red component would lighten up even more. So what we get is much smoother character outlines, especially when you're working with very small type. But you get a little bit of color fringing as well. Now at this point you might wonder, all right, if this is the way to do type-- especially small type--why in the world doesn't Photoshop support it? Well, it would be extremely misleading for Photoshop to support it, because after all, this effect that I am demonstrating here only works with live, vector-based type.
Now Photoshop gives you editable, vector-based type; that's no problem. However, there's no way to convey that type from Photoshop to the web because JPEG, PNG, and TIFF do not support live, editable type, so it wouldn't be possible to build that information into those file formats. However, you can simulate the effect in order to smooth out your very small type outlines, and let me show you how that works. I am going to switch over to this file right here. And that sample text is just some text that I was working with that I actually had to use for my own website, and you can see here Nack and Hughes--these are product managers of Photoshop, by the way-- when a text is rendered large, it's quite legible.
It looks great, so no problems there. However, I'll switch over to the right-hand side of my image. As soon as the type becomes small, it really starts breaking down quite a bit. And notice that we don't have any such thing, where this type is concerned, as a 100%-opaque pixel. Everything is getting cut into to some degree or other, and we are really losing information in some of the character forms. Notice smushy bar inside of this E, and so forth. There's all kinds of weird aspects of this type. So I could--one of the things you can do by the way, I'll go ahead and switch to this anti-alias layer, because that's the one I am working on right now.
One of the things you can do is you can press the T key to switch over to your Type tool, and then you can try out these different anti-aliasing modes. And really, I am not going to tell you how they work here. None is just going to turn Anti- aliasing off, and everybody else is just going to switch out the character forms a little bit. The thing to do is just try them out. I wouldn't really put too much stake in the names; just try out a different effect and see if it ends up working out better. In our case, if I try out Sharp, I am going to get more opaque character forms; however, it's not necessarily going to be exactly what I'm looking for.
And using this technique that I'm about to show you, you'll get better effects. So I'll just go ahead and restore the type that I had before the crisp anti-aliasing, and I'll go ahead and move down here to this other type that I have set up that's the exact same size, just so that we can compare and contrast. Now, the idea here is I am going to have to represent the type differently inside each of the color channels: red, green, and blue. That means I need duplicates of this layer here, which is the demo type layer. However, I don't want to have three copies of that layer that I have to edit independently later if I want to make some changes, so of course I'm going to resort to a Smart Object.
So I'll go ahead and right-click on the empty portion of that demo type layer there in the Layers panel, and I will choose Convert to Smart Object. So that's the first step. And I'll go ahead and name this guy green, let's say, and I'll double-click on it, double- click on an empty area to bring up the Layer Style dialog box. And over here in these little channels checkboxes that you never use inside of Photoshop-- but we will in this case-- I am going to turn off red and I'm going to turn off blue. And we will just leave green turned on, and this will be basically our central information for the type. And then I will go ahead and click OK. And after all we are working with green by default for the background here because green is that central component inside of the pixel. All right! Next thing I am going to do is press Ctrl+Alt+J, or Command+Option+J on the Mac, in order to jump this type, and I am going to name this guy blue, and then I'll click OK. And I'll double-click on it, and I'll go ahead and turn off G this time and turn on B. And this is the effect that's going to appear a little bit over on the right-hand side, because that's where the blue component is, and I will go ahead and click OK.
I now want to follow this up with the Smart Filter. I am going to go up to the Filter menu, choose Blur, and choose Motion Blur. And I am going to enter an Angle value of 0 degrees. That's exactly what I want because subpixel rendering is entirely a horizontal effect. And I am going to change the distance to 1 pixel. I wish I could go lower; I can't. That's as low as you can go with this filter. So a distance of 1 pixel. Click OK. That will give you just a little bit of yellow highlight around the edges. All right. Let's go ahead and collapse that guy. I'm going to click on the green layer once again.
Ctrl+Alt+J. Command+Option+J on the Mac. Let's call this guy red. Click OK. I'm going to drag it above blue right there, and now I'm going go up to the Filter menu and I'm given to choose the command that is exactly the opposite of Motion Blur inside of Photoshop. And believe it or not, that command is Sharpen > Smart Sharpen. However, what you've got to do is enter a few specific settings. Make sure the amount value is at 100%. Very important. The Radius needs to be 1, that same radius effectively that we used inside Motion Blur.
Remove needs to be set to Motion Blur. So change it from Lens Blur, which is what you normally use as to sharpen images in Photoshop, to Motion Blur, and then make sure the Angle value is set to 0 degrees, More Accurate needs to be off-- as almost always where this filter is concerned. Click OK in order to apply that effect. Oh and I forgot to change the channel that's being affected here. I'll double-click on this layer in order to bring up the Layer Style dialog box, turn on R, turn off G, click OK, and there you have the effect.
So that is colorful anti-aliasing that's associated with subpixel rendering, as simulated here in Photoshop. Now this is not strictly speaking the same effect because I can't splice pixels the way that a web browser or and operating system can. However, it is once again a halfway-decent simulation. I am going to press the M key to switch back to my Rectangular Marquee tool. And just to get a sense, this isn't going to result that well on video but you'd be able to see it on screen if you are following along with me, what you want to do is just zoom out a little bit, so that you can see your original grayscale text and your subpixel rendering simulation at the same time.
What you should see is smoother text where the subpixel rendering is concerned. I'm just going to go ahead and grab that anti-alias layer there and drag it down a little bit, so I can see both of these layers at the same time here at the 300% view size. Now one last thing that I want to mention is this is an editable effect. So you may look at this and think, okay now I still have three layers, and I have to edit each one independently. Not so, if you want to make it change your text. All you have to do is double- click on any one of these layers. They are all linked to the same smart object.
So I will go ahead and double-click in the thumbnail for the blue layer-- it really doesn't matter--and that's going to go ahead and open up my Smart Object, which contains the edible type, and let's say that I don't want that semicolon right there, so I will go ahead and edit that out. And maybe I want to change the anti-aliasing mode right here. I'll go ahead and switch it from Crisp to Smooth this time in order to see what that effect looks like. Once I'm done, I'll just go ahead and close the Smart Object, click Yes to save my changes-- on the Mac you would click the Save button--and that will go ahead and update your text, all three layers of text, here inside the larger composition, and that's how you simulate subpixel rendering here inside Photoshop.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 63677 Viewers
119 Video lessons · 71241 Viewers
125 Video lessons · 32096 Viewers
84 Video lessons · 18693 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.