Yes, add Subpixel-Rendering to your Photoshop text layers

March 17th, 2010 in with 49 Comments
Regarding the topic:

I finally figu­red out a way to add sub­pi­xel hin­ted font-rendering to text in Pho­to­shop. For those of you not kno­wing what that means, please read The Ails Of Typo­gra­phic Anti-Aliasing.

The usual way, to smooth text in Pho­to­shop, is to choose one of the dif­fe­rent anti-aliasing tech­ni­ques in the drop down menu. The down­side as you know is, that the smoot­hing of the text is done by grey­scale and not by blen­ding dif­fe­rent channels.

But it’s doable. And I saved my work­flow as an Action. All of you can down­load and use it for free. But the trick has a down­side, too: You receive three text-layers just for one piece of text. The rea­son for that is, that I nee­ded to blend the dif­fe­rent chan­nels and it’s not even rasterizable.

It is still edita­ble, but you need to edit ever­y­thing three times. My recom­men­da­tion: Before you run the Action, copy the layer and make one of them invi­si­ble. Then, if you need to make an edit on the subpixel-hinted text, delete it, make the edit on your old text layer and then run the Action again.

Double-click the file to load it into Pho­to­shop. Then select your text layer and run the Action. Done. Zoom in to see the dif­fe­rence. Now you have font ren­de­ring how it actually is.

Update: 26.03.2010

This tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file (e.g. on a new blog tem­plate or so). This was what I had in mind as the most com­mon use. But in some cases, when the out­put device has screen-rotation, the pre-defined sub-pixel hin­ting ren­de­ring shouldn’t be applied (to images). So: Just for your con­cepts when you want to see text like the sys­tem ren­ders it, but not for images you use in a final pro­ject (e.g. I didn’t use sub-pixel hin­ting ren­de­ring for this Down­load button).

Chuck Skoda explai­ned the issue very well. (Thanks)

Update: 09.01.2011

If you run the action on a Smart Object (You can create one out of a text layer by choo­sing Fil­ter > Con­vert for Smart Fil­ters) you get three Smart Objects which are con­nec­ted to each other. That way, you just need to dou­ble click on one to edit it and after you hit CMD+S all three Lay­ers are updated. This sol­ves the issue I explai­ned in the text above. (Thanks to Came­ron).

Update: 10.01.2011

As Kars­ten Luecke poin­ted out a while ago, the term »subpixel-hinting« is not cor­rect in that con­text, because actual subpixel-hinting can only be done by the sys­tem resp. the dis­play. Read his Arti­cle. So keep in mind that this is just faked.

Responses are currently closed, but you can trackback from your own site.

49 Comments and Trackbacks

uberVU - social comments says:
March 19, 2010 at 10:20 PM

Social com­ments and ana­lytics for this post…

This post was men­tio­ned on Twit­ter by thomasmaier_: New: Yes, add subpixel-hinting to your Pho­to­shop text lay­ers http://bit.ly/cG90Lk...

Add subpixel-hinting to your Photoshop text layers – Antti-Jussi Kovalainen says:
March 20, 2010 at 3:09 PM

[…] Add subpixel-hinting to your Pho­to­shop text layers […]

jkymarsh (J. Ky Marsh) says:
March 15, 2011 at 3:28 PM

Awe­some, awe­some sub­pi­xel hin­ting tip for #pho­to­shop #text — http://bit.ly/hoegTU Never use text in PS wit­hout it, seriously. #web #design

studioantwork (Makoto Kamimura) says:
March 30, 2011 at 7:44 AM

サブピクセルレンダリングをある程度再現するアクション http://bit.ly/hoegTU / アンチエイリアスについてまとめている記事 http://bit.ly/evuddp

Useful Photoshop Tools and Techniques For Your Workflow - Smashing Magazine says:
May 4, 2011 at 3:22 PM

[…] CS5 in addi­tion to using it to enable easier sharing of CS5 works­paces bet­ween machi­nes or people.Subpixel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Photoshop […]

Useful Photoshop Tools and Techniques For Your Workflow | CRICKET ka FUNDA says:
May 4, 2011 at 3:45 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Technology Story says:
May 4, 2011 at 4:23 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow says:
May 4, 2011 at 6:26 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow « Free One Way Link Directory says:
May 4, 2011 at 6:36 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Neil Kearney Design says:
May 4, 2011 at 6:41 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Design Magazine » Useful Photoshop Tools and Techniques For Your Workflow says:
May 4, 2011 at 7:08 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Blogs – NG Outsourcing says:
May 4, 2011 at 7:22 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Programming Blog says:
May 4, 2011 at 7:46 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Web Design Course Brisbane: Next Course Wednesday 25th May 2011 says:
May 4, 2011 at 10:36 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow « e-wok.fr, le blog says:
May 4, 2011 at 10:48 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | IdentityNepal.com says:
May 4, 2011 at 11:09 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Portsmouth Media says:
May 4, 2011 at 11:56 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

ThemeDigg » Useful Photoshop Tools and Techniques For Your Workflow » ThemeDigg says:
May 5, 2011 at 4:00 AM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Dotisio says:
May 5, 2011 at 4:08 AM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow - Welege says:
May 5, 2011 at 5:10 AM

[…] Sub­pi­xel Hin­ted Font-Rendering This tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Serene Global says:
May 5, 2011 at 5:16 AM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Ruturaj Pradeep Kohok | Your Web Advisor says:
May 5, 2011 at 6:29 AM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | World's Greatest T-Shirt says:
May 5, 2011 at 7:01 AM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | test2 says:
May 5, 2011 at 8:13 AM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Remake Wordpress Theme says:
May 5, 2011 at 7:00 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Designer Brisbane blog says:
May 6, 2011 at 6:11 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow » abdie.web.id says:
May 6, 2011 at 8:40 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow … | Ispey Seo Expert says:
May 7, 2011 at 10:27 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | i know idea says:
May 8, 2011 at 8:38 AM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | 20 One | Designers Blog says:
May 8, 2011 at 3:05 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow - desmaksolutions.com | desmaksolutions.com says:
May 10, 2011 at 11:22 AM

[…] Sub­pi­xel Hin­ted Font-Rendering This tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | 87studios.net says:
May 15, 2011 at 2:47 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

新鲜有用的Photoshop工具脚本和资料文章 | Jackchen Design 1984 says:
May 16, 2011 at 7:23 AM

[…] 亚像素暗示字体渲染 这种技术是伟大的，当你的概念，你要模拟的Photoshop文件中的实际文字。 托马斯麦尔拯救了他作为一个动作的工作流程。 您可以下载子像素渲染技术和免费使用它。 […]

Useful Photoshop Tools and Techniques For Your Workflow | Gold Coast Creative Agency | 24hr Design Quotes says:
May 16, 2011 at 5:23 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

20 Free PSD UI Element for Web Designer | denbagus blog says:
May 26, 2011 at 12:36 AM

[…] Sub­pi­xel Hin­ted Font-Rendering […]

Субпиксельный рендеринг в фотошопе | INSTRUMENTARIAL says:
May 31, 2011 at 8:58 AM

[…] клиртайп для чего угодно, не только для шрифтов. GO This entry was pos­ted in WEB and tag­ged action, fonts, PS, text, typo­gra­phy. Book­mark the […]

Useful Photoshop Tools and Techniques For Your Workflow | Sejix Technologies Blog says:
July 16, 2011 at 10:10 AM

[…] Sub­pi­xel Hin­ted Font-Rendering This tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow | Tekki Web Solutions Pvt. Ltd. says:
August 29, 2011 at 3:54 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools and Techniques For Your Workflow - pocongseXy ::Art and Dezign:: says:
September 17, 2011 at 12:11 AM

[…] Sub­pi­xel Hin­ted Font-Rendering This tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Useful Photoshop Tools - Wilson Joseph says:
November 2, 2011 at 9:43 AM

[…] Sub­pi­xel Hin­ted Font-Rendering This tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]

Prestashop Templates says:
November 6, 2011 at 2:32 AM

Rela­ted.. Trackback…

[…]the time to read or visit the con­tent or sites we have lin­ked to below the[…]…

Photoshop Useful Photoshop Tools and Techniques For Your Workflow says:
January 2, 2012 at 10:56 PM

[…] Sub­pi­xel Hin­ted Font-RenderingThis tech­ni­que is great for your con­cepts when you want to simu­late actual text in your Pho­to­shop file. Tho­mas Maier has saved his work­flow as an action. You can down­load the subpixel-rendering tech­ni­que and use it for free. […]