|
|
Creating Subpixel-Rendered Text onto Transparent Background
|
|
|
|
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Jan 2001
Location: Australia
Status:
Offline
|
|
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...
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Aug 2006
Location: The deep backwoods of the PNW
Status:
Offline
|
|
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?
|
Sell or send me your vintage Mac things if you don't want them.
|
|
|
|
|
|
|
|
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status:
Offline
|
|
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::
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Aug 2004
Location: FFM
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Dec 1999
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Dec 2000
Location: UK
Status:
Offline
|
|
|
It'll be much easier if you just comply.
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Jan 2001
Location: Helsinki, Finland
Status:
Offline
|
|
You may be familiar with the 3px font— this thread contains links and info on sub-pixel rendering, IIRC.
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Jan 2001
Location: Australia
Status:
Offline
|
|
Originally Posted by tooki
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 07:49 PM.
)
|
|
|
|
|
|
|
|
|
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status:
Offline
|
|
Originally Posted by TETENAL
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
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
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
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?
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Jan 2001
Location: Helsinki, Finland
Status:
Offline
|
|
Originally Posted by tooki
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.
|
|
|
|
|
|
|
|
|
Admin Emeritus
Join Date: Oct 1999
Location: Zurich, Switzerland
Status:
Offline
|
|
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: - Take screenshot of ClearType (or Mac OS X's LCD-optimized) text on white background.
- In Photoshop, create RGB file.
- Paste in screenshot as a layer.
- 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.
- Set the CMY layers' blend mode to Multiply.
- Open Channels view for the screenshot layer.
- 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.
- 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 04:34 AM.
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|