Video: 022 Simulating sub-pixel rendering

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.

This course is a collection of short Photoshop and Illustrator projects and creative effects that can be completed in ten minutes or less. The series is taught by computer graphics guru Deke McClelland, and presented in his signature step-by-step style. The intent is to reveal how various Photoshop and Illustrator features can be combined and leveraged in real-world examples so that they can be applied to creative projects right away.

022 Simulating sub-pixel rendering

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 strugglingwith little type inside of Photoshop. And you try those different anti-aliasingsettings 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 calledsubpixel rendering.Now this is such an arcane topic that even folks who are comfortable saying theword anti-aliasing dare not to speak it.

I am going to show you exactly how subpixel rendering works, and how to simulateit 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 ofPhotoshop. 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 andachieving somewhat smooth results.

For example here, imagine that this gray checkerboard is the pixel grid, and weare 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 aretalking 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'sall there was too it. All right!Then comes along anti-aliasing. And this time I have made my pixel grid blue inorder 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 flatscreens. And on a flat screen, specifically in LCD let's say, a single pixel lookslike 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 redand 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 theyare not firing at all, they look black, and so forth.

So what pixel rendering does is it takes advantage of the fact that you reallyhave 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 goahead 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 theleft-hand side of the character, that blue component would be very dark, and thenthe green component would lighten up a little bit, and the red component wouldlighten up even more.So what we get is much smoother character outlines, especially when you'reworking 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 workswith 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 becauseJPEG, 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 typeoutlines, and let me show you how that works.I am going to switch over to this file right here. And that sample text is justsome text that I was working with that I actually had to use for my ownwebsite, and you can see here Nack and Hughes--these are product managers ofPhotoshop, 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 abit. And notice that we don't have any such thing, where this type isconcerned, as a 100%-opaque pixel.Everything is getting cut into to some degree or other, and we are really losinginformation 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 tothis 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 yourType 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 justgoing 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 differenteffect 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 crispanti-aliasing, and I'll go ahead and move down here to this other type that I have set upthat'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 insideeach 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 editindependently 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 layerthere 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 LayerStyle dialog box. And over here in these little channels checkboxes that younever 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 centralinformation for the type. And then I will go ahead and click OK. And after allwe are working with green by default for the background here because green isthat 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'llclick OK. And I'll double-click on it, and I'll go ahead and turn off G thistime and turn on B. And this is the effect that's going to appear a little bitover on the right-hand side, because that's where the blue component is, and Iwill 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 wantbecause subpixel rendering is entirely a horizontal effect. And I am going tochange 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 ofyellow 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 theFilter menu and I'm given to choose the command that is exactly the opposite ofMotion 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 usedinside 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 imagesin Photoshop, to Motion Blur, and then make sure the Angle value is set to 0degrees, More Accurate needs to be off-- as almost always where this filter isconcerned. Click OK in order to apply that effect. Oh and I forgot to changethe 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, assimulated here in Photoshop.Now this is not strictly speaking the same effect because I can't splice pixelsthe 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 beable 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 youroriginal 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 itdown a little bit, so I can see both of these layers at the same time hereat 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 Ihave 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 mySmart Object, which contains the edible type, and let's say that I don'twant 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 whatthat 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 updateyour text, all three layers of text, here inside the larger composition, andthat's how you simulate subpixel rendering here inside Photoshop.

Find answers to the most frequently asked questions about Deke's Techniques .

Here are the FAQs that matched your search "" :

Expand all | Collapse all

please wait ...

Q: Why can't I earn a Certificate of Completion for this course?

A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.