Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Community > MacNN Lounge > Creating Subpixel-Rendered Text onto Transparent Background

Creating Subpixel-Rendered Text onto Transparent Background
Thread Tools
tooki
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status: Offline
Reply With Quote
Jan 6, 2010, 04:30 AM
 
Hi everyone,

Since the MacNN community never fails to come through, I am appealing to your collective knowledge once more.

At work, we're refreshing a series of icons for our application. In particular, we have a "special characters" toolbar with things like punctuation and fractions that don't have easy keyboard entry methods. Because these are standard 16x16px toolbar icons, there's not much room to work, so the numbers in a fraction, for example, end up very small.

To help make them legible, I'd love to render the icons using ClearType (or the Mac OS X equivalent, the "optimized for LCD" text rendering mode), aka subpixel rendering.

Unfortunately, no graphics program I am aware of can generate ClearType text onto a transparent background, which we require in order to make alpha-transparent PNGs that will work in the current Windows version over multiple background colors, as well as in the future Mac version. (We even tried writing our own program to do this, but Windows won't draw ClearType text onto nothing, it demands a background.) Photoshop (and every other app I've tried) generates text using traditional grayscale antialiasing.

I've been able to mock up the effect in Photoshop by taking a screenshot of the ClearType text, then adding a layer mask containing the same screenshot in inverse. But this makes the text noticeably thinner. Also within Photoshop, I can get almost the exact result I want by using the screenshot as a layer above the background, using the "multiply" blend mode. But since the toolbars can't do "multiply", this doesn't work outside of Photoshop itself.

For other reasons, it is not feasible to use text buttons in the toolbars -- they must be alpha-transparent bitmaps.

Does anyone have any tricks or tips?

Thanks!
antonio
     
moonmonkey
Professional Poster
Join Date: Jan 2001
Location: Australia, the greatest country in the world, (Australians keep telling me).
Status: Offline
Reply With Quote
Jan 6, 2010, 07:29 AM
 
I thought subpixel incorporates elements of the background colour so it would be hard to render against a clear background.
I may be wrong though...
     
shifuimam
Addicted to MacNN
Join Date: Aug 2006
Location: Somewhere in the Pacific Northwest
Status: Offline
Reply With Quote
Jan 6, 2010, 10:47 AM
 
I don't think that ClearType is going to be better with text that small. The pixels are too close together, and you end up with a blur. Why not use a font that's designed for super small point sizes?
     
tooki  (op)
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status: Offline
Reply With Quote
Jan 6, 2010, 11:55 AM
 
Actually, ClearType makes a huge difference, which is exactly why I'd like to use it.

As for incorporating the background color, there's really no reason why it shouldn't be possible, since ordinary antialiasing also incorporates the background color. By replacing brightness with opacity, you get flexible text that layers on anything… ::sigh::
     
TETENAL
Addicted to MacNN
Join Date: Aug 2004
Location: FFM
Status: Offline
Reply With Quote
Jan 6, 2010, 12:07 PM
 
Sub-pixel rendering requires knowledge of the physical order of the colour pixels on the LCD. It therefore only works properly on text that is rendered at runtime, not on a static image.
     
olePigeon
Clinically Insane
Join Date: Dec 1999
Status: Offline
Reply With Quote
Jan 6, 2010, 01:35 PM
 
You could try making a folder window that has a transparent background, make a folder or document inside that labeled with whatever text you want, then take a screenshot of the transparent window.

OS X should maintain the transparencies with the screenshot. You can then just crop the text using Photoshop.
"…I contend that we are both atheists. I just believe in one fewer god than
you do. When you understand why you dismiss all the other possible gods,
you will understand why I dismiss yours." - Stephen F. Roberts
     
ajprice
Professional Poster
Join Date: Dec 2000
Location: UK
Status: Offline
Reply With Quote
Jan 6, 2010, 01:43 PM
 
Fraction signs at 16x16 are going to blur and be indecipheraple. Go for a bitmap font something like one of these Bitmap, pixel, screen fonts, small fonts, userbar | dafont.com

To make it look as good as it can be find a font that doesn't have diagonals or curves.

It'll be much easier if you just comply.
     
Judge_Fire
Mac Elite
Join Date: Jan 2001
Location: Helsinki, Finland
Status: Offline
Reply With Quote
Jan 6, 2010, 06:21 PM
 
You may be familiar with the 3px font— this thread contains links and info on sub-pixel rendering, IIRC.
     
moonmonkey
Professional Poster
Join Date: Jan 2001
Location: Australia, the greatest country in the world, (Australians keep telling me).
Status: Offline
Reply With Quote
Jan 6, 2010, 06:34 PM
 
Originally Posted by tooki View Post
Actually, ClearType makes a huge difference, which is exactly why I'd like to use it.

As for incorporating the background color, there's really no reason why it shouldn't be possible, since ordinary antialiasing also incorporates the background color. By replacing brightness with opacity, you get flexible text that layers on anything… ::sigh::
But initialising is just done by adjusting the degree of opacity of the text colour, Cleartype is done by painting surrounding pixels multiple specific colours which are calculated based on some type of complex algorithm which is beyond me to explain, but i'm sure the background colour is factored in.
( Last edited by moonmonkey; Jan 6, 2010 at 06:49 PM. )
     
tooki  (op)
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status: Offline
Reply With Quote
Jan 7, 2010, 06:13 PM
 
Originally Posted by TETENAL View Post
Sub-pixel rendering requires knowledge of the physical order of the colour pixels on the LCD. It therefore only works properly on text that is rendered at runtime, not on a static image.
Technically, that is true, but in practice, except on PocketPC's, the only pixel arrangement in use is RGB. Other arrangements are so rare that Mac OS X doesn't even support anything but RGB.

Originally Posted by olePigeon View Post
You could try making a folder window that has a transparent background, make a folder or document inside that labeled with whatever text you want, then take a screenshot of the transparent window.

OS X should maintain the transparencies with the screenshot. You can then just crop the text using Photoshop.
Ooh, clever, I'll try that tomorrow!

Originally Posted by Judge_Fire View Post
You may be familiar with the 3px font— this thread contains links and info on sub-pixel rendering, IIRC.
I'll take a look, thanks!

Originally Posted by moonmonkey View Post
But initialising is just done by adjusting the degree of opacity of the text colour, Cleartype is done by painting surrounding pixels multiple specific colours which are calculated based on some type of complex algorithm which is beyond me to explain, but i'm sure the background colour is factored in.
Well, it's not really black magic, it's only a slight variation on the traditional antialiasing methods. There's truly no reason why a renderer couldn't do both. The real question is, can it be done with just an RGBA image?
     
Judge_Fire
Mac Elite
Join Date: Jan 2001
Location: Helsinki, Finland
Status: Offline
Reply With Quote
Jan 7, 2010, 06:40 PM
 
Originally Posted by tooki View Post
Technically, that is true, but in practice, except on PocketPC's, the only pixel arrangement in use is RGB. Other arrangements are so rare that Mac OS X doesn't even support anything but RGB.
Rotating the screen messes with things. If it's the OS doing the algorithm, it may work (or be disabled) but for static images you need to test and see for yourself. Many displays are pivotable and I actually use one in portrait mode.
     
tooki  (op)
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status: Offline
Reply With Quote
Jan 8, 2010, 03:14 AM
 
True, but most people really do use their displays in ordinary horizontal rotation.

Anyhow, I figured out a way to do it from a screenshot, and the result is identical to what the Windows ClearType rasterizer produces on the same background:
  1. Take screenshot of ClearType (or Mac OS X's LCD-optimized) text on white background.
  2. In Photoshop, create RGB file.
  3. Paste in screenshot as a layer.
  4. Create 4 fill layers: white as the background, and one each with #00FFFF (cyan), #FF00FF (magenta), and #FFFF00 (yellow). Don't use Photoshop's CMYK fields, because it won't look right.
  5. Set the CMY layers' blend mode to Multiply.
  6. Open Channels view for the screenshot layer.
  7. Take the red channel of the screenshot and paste it as the layer mask for the cyan fill layer, then invert the layer mask. Repeat, taking the green channel for the magenta layer, and the blue channel for the yellow layer.
  8. Compare. The screenshot and the 3 multiplied channels should produce the identical result, except that now, you can change the background image to whatever you want.
( Last edited by tooki; Jan 8, 2010 at 03:34 AM. )
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 11:37 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,