One problem with 'pixel-fitting' is that certain letterforms will appear sharper or crisper than others. For example, in the article the PLUS (from Hulu Plus), the PLU are sharper than the S because more of their outer surfaces conform to square pixels, while the S has continuous curves that have to alias all the way around. So you end up with some characters looking overly crisp while the S looks soft. I prefer to not draw attention to specific characters and have consistent aliasing across all the characters of a logotype. Photoshop has several font rendering modes that let designers choose how aliasing is rendered (Strong, Crisp, etc) to achieve a desirable result, depending on the typeface and font size chosen.
This equivalent to TrueType hinting, right? It's funny that hinting went out of fashion over the years, mainly due to a fairly sensible argument from Apple that displays would get better - which they undoubtedly have if you look at an iPad 3. Linux users, who had a choice, started switching from patent-encumbered pixel-fitted full hinting to the softer anti-aliased look, perhaps in part because many of their cool Apple owning friends told them that it "looked right".
So in a way, because of all this history, the pixel-fitted logo actually looks too sharp, and hence a little uncool.
This sort of thing is a tough call. I'd say the pixel fitted logo looks better if each is considered in isolation, but viewed as a set the anti-aliased ones look better as they look more consistent.
Fonts have a similar issue. The TrueType font hinting made fonts more readable but sacrificed correct horizontal spacing and often made them less aesthetically pleasing IMO. If I were considering a font purely for on screen work without scaling then I think a carefully designed and hinted font looks best, but if there is going to be any scaling (through different font sizes or zooming in or out) then I'll go with the Apple style every time.
I don't know, my "cool Apple owning friends" told me for years that unhinted font rendering was better, and I always thought they could pry my Bitstream Vera from my cold dead hands. Then I used OS X full-time for a while. Upon switching back to Linux, I immediately turned hinting off. It just... looked "wrong".
This reads exactly like Microsoft's ClearType patent where they shift the 'rendered' glyph around to maximize the number of 'whole pixels' it uses. Sounds like 'pixel fitting' is the same process (albeit done manually it seems).
Waaaay back when I was at USC the Image Processing Institute there here some interesting image filter analysis of high frequency images. Basically when you take a horizontal line, and plot it x/y with X being the horizontal position and Y being the value of the pixel there, you can treat that as a signal and measure the frequency of it. If you look at B&W text you will see a series of very sharp transitions from background level to foreground level and back again. These are square waves which have well defined harmonics. So taking the image and increasing the rate of change between high to low or low to high 'sharpens' it, similarly if you are rendering an image and you have choices about the function which determines which pixel represents which part of the rendered image, you can do several renders with pixel offsets and maximize harmonics for maximum sharpness.
I actually find the "sharper" Hulu icon to look worse... because the curved parts of the letters stay blurry, while the straight parst are razor-sharp. The "L" and "S" look in the "pixel-fitted" version look totally different, like they don't go together at all.
I don't mind the "extra blurriness" all over everything on my screen at all, because the mind gets used to it quite quickly, and it actually allows for more detail, because our brain automatically interprets sub-pixel width changes, curvatures, etc. This is why fonts on Macs look have more accuracy and detail in their letterforms, because they aren't hinted, i.e. "pixel-fitted".
I don't mind the "extra blurriness" all over everything on my screen at all
Add that many of us roll at a zoom level != 100%, immediately undoing all of this pixel-perfection work. Only when you're targeting the iOS devices do you have any realistic control over pixel to pixel mapping.
When using the vector tools in photoshop, it is important to make sure "snap to pixels" is selected. It fixes this issue when creating things like boxes and buttons.
As someone who has been creating digital graphics for broadcast for over 20 years, typically at resolutions that are far lower than anything we have to deal with now, it's interesting to see all this activity lately on HN.
There are times and places where "hand fitting" your pixels is useful, but they are few and far between. Good filtering will almost always get you a better looking result. The constraints on old NTSC monitors are/were horrendous, so you simply have to filter things or you will end up with text and designs that are not only "crunchy" looking, as my assistant used to say, but with images that vibrate, strobe, comb, and burn. Burn like a soul in hell.
The first thing to learn is almost never work with full on black or white. (Or fully saturated color) In broadcast video there are legal reasons for this. But even there, you should always work at least 5% inside your "legal" gamut, or color space. There's plenty of contrast in the remaining space, and it gives you some "headroom" for your filtering to work.
For "white" I like to work down about 15%. The bottom around 10%. This is a starting point, and different designs may make me change things. Anything above or below this should be the result of filtering or as a very, very light application of color, usually feathered and not noticeable. You should be able to "feel" the effect, but not see it.
There's really no getting around the fact that whoever is designing your stuff should know their way around a color wheel. You can use complementary colors to achieve useful contrast. Select your colors to work well together. It's not just a matter of looking "pretty", but a matter of controlling the viewer's eye. It's a form of engineering. And yes, tons of designers don't really get this. The better ones do and are worth the extra money.
Filtering is a matter of making the highly synthetic image you are creating look like something your optical viewing system would find in the real world. All that laborious pixel fitting is simply going to make your image "ring" like a bell if you don't do the other stuff. And if you do the other stuff, correctly, and away from pathological situations, you probably don't need to do the pixel fitting.
If an image is too sharp, it looks fake. Phony. Synthetic. If you are creating a design that is supposed to look like a 15 year old video game graphic, then go for it. (But those were actually pretty blurry and were typically viewed on crummy NTSC monitors.)
So a controlled amount of blur, and I'm not talking about anti-aliasing, can actually help you here. It does help if the image is anti-aliased, but not if the structure of your element is close to the sample size of your image. You shouldn't even be doing that kind of thing. Unless you are creating "small type" that you don't want anyone to read, type should be large enough to filter. If this doesn't fit with your design spec, you've got a design spec done by an amateur.
Now, once you've blurred your image, just a bit, and at the right scale(!), then you can sharpen it a bit. What!?!? But you just blurred it! Yep. Don't go overboard. And don't try it on small details (they probably don't need sharpening anyway. They are small, right?) You can run into trouble on corners, particularly concave ones. Here you might want to do a bit of pixel fiddling, but it should be subtle, and filtered. Don't just go and plunk down a single pixel color change, or a flat color. If you do, that defect will ring like a bell. I used to keep a whole library of photoshop layers with filtery, blurry, corners and edges for dropping into tight spots.
Control your environment. Drop shadows are not a decorative item. Well, they can be, but in this case the thing they do is to create a sense of environment. Soft and fuzzy. Extended, but subtle. You are creating your own fake radiousity space here. And yes, a little creative use of color bleed and fake reflection can work wonders here. But don't overdue it. If the viewer can notice it, explicitly, you've probably overdone it. The window drop shadows on OS X are probably just a touch too strong for my taste. YMMV.
The drop shadow doesn't actually have to be a shadow. It can be though of as merely a filtered edge.
If you really want to get into it, find a good book on oil painting. These tricks have been around for a while. I can recommend the Andrew Loomis classic from the 1930s-40s, Creative Illustration. It's full of all kinds of filtering tricks. For a more modern book, James Gurney's Color and Light and Imaginative Realism are both quite good. You can also pick up a copy of one of his Dinotopia books, it won't help designing graphics, but, hey, dinosaurs. Right? (He also has an excellent website: http://gurneyjourney.blogspot.com/)
Gradients and ramps are useful, both to break up large flat areas of color and to add depth and a sense of space. But they are also useful on flat, graphic (old sense of the word) designs. A gentle use can place it in the viewer's world space without disrupting the, well, flatness. Just apply the effects uniformly, always being aware of color. Use of these within color fields can be useful and add visual interest and verisimilitude as well. A lighter hand is usually better than screaming "HEY, COLOR GRADIENTS!!!!"
Noise and dithering are also very useful, but can be very dangerous. Less is usually more. Noise is particularly useful on large areas, especially those with gradients. 24 bit color space is actually pretty limited when you start throwing gradients across all your colors.
I grey smallish elements slightly, unless I need them to pop (but you probably shouldn't be needing smallish elements to pop!) Over a uniform or low detail background, a bit of transparency can help, but there are technical limitations here on the web (see below).
When I need the user to look at different areas, instead of "glows" or movement in rollovers, use shifts in saturation instead. High saturation should be used only for directing attention. These days I discourage interactive things like rollovers because, they are a crutch, and mobile devices don't support them. (I have been playing around with using saturation with drag and drop, but it's more for fun and to see what happens. If you try this, be careful.)
Finally, you can use all these effects over the entire visual field. This is more useful inside illustrations or in environments where the content is contained. Vignettes and hot spots, if subtly applied can control the eye, filter the entire scene, and control perceived depth. This is harder in typographic environments, like the main areas of web pages and such. You can use these techniques, but you run the risk of looking less like a web page and more like a "Crazy Eddie" TV ad.
This is all mostly for display areas, illustrations and display type. For the reading typographical areas most of the filtering will need to be done by the OS and you don't have much control over that. You don't want to be screwing around with ham handed filtering on body type. You can still control color and contrast here, but remember old folks eyes, and don't unnecessarily grey the type.
In the new world where we can use Canvas and 8 bit alpha transparency, I've been known to slip in a few vignettes and hot spots as environmental effects. But think of the poor user's CPU, and only do this when it either pays off big time or is in a "display" area like a landing page or interstitial page of some type. Even then, try and talk yourself out of it.
For what it's worth, the hulu logo example in the article looks fine to me. It looks to me like it's been filtered, not just anti-alised. The "improved" one rings, to my eyes. Particularly in the corners.
YMMV.
Edit: Hinting mostly works best with very small elements, like body type, and even then in high contrast situations at high resolutions. Like laser printers. I've always found it annoying on CRTs and flat panels. I used to keep an old pair of reading glasses around to "filter" my screen. These days, with largers monitors, I use a 24 inch, at an appropriate distance, I don't need any filtering than my own aging eyes. The body type looks just great. Younger, sharper eyed readers may not agree, but just wait a few years ...
Very good comment, though broadcast and video are much harsher environments for graphics than a computer monitor. The resolution is lower as you point out, especially chroma resolution, and there may be interlacing and/or compression going on too. Each of these makes heavier blurring more desirable for high-frequency images such as text.
Regarding this:
So a controlled amount of blur, and I'm not talking about anti-aliasing,
it's worth pointing out that anti-aliasing is a form of blur, but most software usually uses a box filter which is a really a poor filter. I have some demonstration images here:
The first one is what cairo produces; the second is improved in three ways: (1) The antialiasing filter is based on the Jinc function rather than a box, (2) white and black are offset slightly from the top and bottom, and (3) the compositing is done in linear light, not sRGB.
The strokes in the second image are also somewhat wider in order to compensate for the lighter appearance that gamma-aware compositing produces.
Thanks to commieneko and ssp for a couple of good posts.
Followup questions:
What do you think about the effect that pixel-alignment produces specifically in the context of this comparison?
There seem to be a couple of basic problems with the "clarity" of the pixel-aligned images (please correct):
- As lines diverge from rectilinear, aliasing is inevitable. Either the aliasing or the anti-aliasing will produce discontinuity.
- High-contrast neighbors on pixel boundaries are more likely to highlight perceptual problems related to frequency.
The part that interests me here is the presentation of this comparison on Dustin Curtis' site. His site seems to be pursuing visual impact as an ultimate goal, and contrast is a big part of that:
http://i.imgur.com/UC8ZX.png (OP with histogram overlay)
Does the context minimize the negative effects you've described? Do the filtered images look out of place in such a stark environment?
I'm curious how you came to be on hackernews. Usually it's either business or coding type people, with almost disdain for visual design. A recent article had the headline that visual design won't fix your broken business.
Manual hinting may be fine for simple vector shapes like that, but in most cases it does more harm than good. It's the same debate of windows vs OSX anti-aliasing: windows tries to fit shapes in to the pixels for a sharper look, while OSX favors preserving the exact shapes resulting in more blur.
In the Hulu pixel-fitted example, the typeface is mutilated beyond recognition. Yes, it's sharper, but it doesn't look right, the 'u's even appear higher than the x-height.
In a screen where everything is anti-aliased, images like that stick out like 8-bit art. And just like in HD vs FullHD, most people can't even tell the difference. Be patient and we'll be over this in a couple years :)
As a programmer, I switched from Windows 7 to Mac (Lion) since everyone at my new medical-related job uses Macs. I must say that I much prefer the W7 anti-aliasing, because I care little about how close my characters are to their true glyph shapes and care much about how crisp a page of code looks like on my monitor. I've gotten used to the blur now, but whenever I go back and look at my old W7 machine the crisp nature of the text really jumps out at me.
I hope I'm not naively over-generalizing a complex process, but is 80% of what he doing just not anti-aliasing straight lines? If that is most of it, couldn't pixel-fitting be improved by just doing that?
For example, in his "Markdown Mark" example, he's careful to make sure that the rectangular border is exactly three pixels wide on every side. Just rounding straight lines to the nearest pixel boundary wouldn't guarantee that (it's pretty easy to wind up with shapes that should look even, but are 2px on one side, and 4px on the other).
TrueType fonts face exactly the same challenges as described in the article, and they include bytecode for a specialised VM to describe how to nudge control points to pixel boundaries. The open-source FreeType rasteriser has code that's pretty good at doing this automatically, but it's very domain-specific to font-rendering; it would be no use to a general SVG renderer, for example.
Great post. I would have kudo'd it were I not so annoyed with having been tricked by the kudo button's hover-for-irrevocable-action on another article in the past.
I went back to see what you were talking about and now I'm in the same boat as you. I think it's a good opportunity for another cool effect though. I imagine you could hover (after "kudoing") and the animation would happen in reverse resulting in an "un-kudoing".
Isn't it a fairly meaningless metric, though? I don't give much credence to the fact that n people gave the article 'kudos' - Dustin is already a trusted reader for most of HN.
"Until we have Retina displays everywhere, we're going to have to live with antialiasing techniques"
I don't think Apple needs to come in and rescue every display maker in the world with their branding. Any sufficiently high resolution display will do.
I see your point, but "retina" is just a simple stand-in for "pixels so dense individual pixels are no longer distinguishable". It doesn't seem like the author was saying 'just apple devices' -- it's simply a convenient way to reference that class of displays.
Once more displays come out with extremely high pixel density, we'll probably have an industry wide name for it.
What the author misses is that with colour LCD displays you can do sub-pixel anti-aliasing with the 3 RGB sub-pixels, if you start from a vector, which is why HTML type looks better than Photoshop rendered type.
I purposefully chose to ignore subpixel antialiasing because it's complicated and you have little control over how it works. It's done at a layer further abstracted from the source file, so you can't accurately pixel-fit anything to a subpixel. It's also just another hack, using a smaller unit than a half-pixel, and, like most hacks, it has some serious negative side-effects.
A small tip here: if instead of using 2d vectors like Illustrator, you use 3d vectors like Blender for your logos and icons. Then the smooth shading of the 3d objects (versus the opaque shading 2d styles usually go for) makes these manual hinting problems meaningless. So 3d vectors are much easier to scale automatically than 2d vectors, without worrying about quality loss.
So many choose 2d logos and icons instead of 3d, simply out of style. But this little advantage is certainly something to at least consider.
Also note that SVG logo's are rendered far better than a scaled down pixel version. I tried a lot of different reduction methods but the SVG version was always "sharper".
Just include it in your image-tag: <img src="logo.svg" alt="my logo">
I think you can use a background image as fallback.
Anyone feels this everlonging problem is related to autofocus ? Pretty sure it wouldn't be very hard to automatically realign subparts to fit based on Fourier analysis.
I really wish Fireworks or some image editor was designed for asset creation first and took care of these kinds of issues. Even with Fireworks if you zoom in on the palette and draw a box you can end up creating it on the half pixel and get anti aliasing issues. I want a tool that restricts you to whole pixels for everything, including when it does automatic resizing.
Can you clarify your issue with Fireworks? By "palette" do you mean "canvas"? From my experience, there are no sub-pixels initially on the edges of boxes drawn in Fireworks. Sub-pixels will occur if you use the Scale tool (Q) to resize the box, however you may subsequently snap the box to full pixels using Cmd+K. Also, if you resize the box using the X/Y dimension inputs in the Properties inspector, the edges will remain at full pixels.
This seems like it could be automated algorithmically — it looks like an optimization problem where you want to minimize the number of partially-filled (e.g. "gray") pixels, especially along vertical and horizontal lines.
For rectangular shapes, even a simple repositioning could do a lot.
[+] [-] danboarder|14 years ago|reply
[+] [-] dtf|14 years ago|reply
So in a way, because of all this history, the pixel-fitted logo actually looks too sharp, and hence a little uncool.
[+] [-] unknown|14 years ago|reply
[deleted]
[+] [-] aardvark179|14 years ago|reply
Fonts have a similar issue. The TrueType font hinting made fonts more readable but sacrificed correct horizontal spacing and often made them less aesthetically pleasing IMO. If I were considering a font purely for on screen work without scaling then I think a carefully designed and hinted font looks best, but if there is going to be any scaling (through different font sizes or zooming in or out) then I'll go with the Apple style every time.
[+] [-] decklin|14 years ago|reply
[+] [-] ChuckMcM|14 years ago|reply
Waaaay back when I was at USC the Image Processing Institute there here some interesting image filter analysis of high frequency images. Basically when you take a horizontal line, and plot it x/y with X being the horizontal position and Y being the value of the pixel there, you can treat that as a signal and measure the frequency of it. If you look at B&W text you will see a series of very sharp transitions from background level to foreground level and back again. These are square waves which have well defined harmonics. So taking the image and increasing the rate of change between high to low or low to high 'sharpens' it, similarly if you are rendering an image and you have choices about the function which determines which pixel represents which part of the rendered image, you can do several renders with pixel offsets and maximize harmonics for maximum sharpness.
[+] [-] crazygringo|14 years ago|reply
I don't mind the "extra blurriness" all over everything on my screen at all, because the mind gets used to it quite quickly, and it actually allows for more detail, because our brain automatically interprets sub-pixel width changes, curvatures, etc. This is why fonts on Macs look have more accuracy and detail in their letterforms, because they aren't hinted, i.e. "pixel-fitted".
[+] [-] xsmasher|14 years ago|reply
You're right though; The P and S look too plump, and the L looks too skinny. It's not a good advertisement for the procedure.
[+] [-] kevinchen|14 years ago|reply
[+] [-] huggyface|14 years ago|reply
Add that many of us roll at a zoom level != 100%, immediately undoing all of this pixel-perfection work. Only when you're targeting the iOS devices do you have any realistic control over pixel to pixel mapping.
[+] [-] jcampbell1|14 years ago|reply
[+] [-] pbhjpbhj|14 years ago|reply
[+] [-] commieneko|14 years ago|reply
There are times and places where "hand fitting" your pixels is useful, but they are few and far between. Good filtering will almost always get you a better looking result. The constraints on old NTSC monitors are/were horrendous, so you simply have to filter things or you will end up with text and designs that are not only "crunchy" looking, as my assistant used to say, but with images that vibrate, strobe, comb, and burn. Burn like a soul in hell.
The first thing to learn is almost never work with full on black or white. (Or fully saturated color) In broadcast video there are legal reasons for this. But even there, you should always work at least 5% inside your "legal" gamut, or color space. There's plenty of contrast in the remaining space, and it gives you some "headroom" for your filtering to work.
For "white" I like to work down about 15%. The bottom around 10%. This is a starting point, and different designs may make me change things. Anything above or below this should be the result of filtering or as a very, very light application of color, usually feathered and not noticeable. You should be able to "feel" the effect, but not see it.
There's really no getting around the fact that whoever is designing your stuff should know their way around a color wheel. You can use complementary colors to achieve useful contrast. Select your colors to work well together. It's not just a matter of looking "pretty", but a matter of controlling the viewer's eye. It's a form of engineering. And yes, tons of designers don't really get this. The better ones do and are worth the extra money.
Filtering is a matter of making the highly synthetic image you are creating look like something your optical viewing system would find in the real world. All that laborious pixel fitting is simply going to make your image "ring" like a bell if you don't do the other stuff. And if you do the other stuff, correctly, and away from pathological situations, you probably don't need to do the pixel fitting.
If an image is too sharp, it looks fake. Phony. Synthetic. If you are creating a design that is supposed to look like a 15 year old video game graphic, then go for it. (But those were actually pretty blurry and were typically viewed on crummy NTSC monitors.)
So a controlled amount of blur, and I'm not talking about anti-aliasing, can actually help you here. It does help if the image is anti-aliased, but not if the structure of your element is close to the sample size of your image. You shouldn't even be doing that kind of thing. Unless you are creating "small type" that you don't want anyone to read, type should be large enough to filter. If this doesn't fit with your design spec, you've got a design spec done by an amateur.
Now, once you've blurred your image, just a bit, and at the right scale(!), then you can sharpen it a bit. What!?!? But you just blurred it! Yep. Don't go overboard. And don't try it on small details (they probably don't need sharpening anyway. They are small, right?) You can run into trouble on corners, particularly concave ones. Here you might want to do a bit of pixel fiddling, but it should be subtle, and filtered. Don't just go and plunk down a single pixel color change, or a flat color. If you do, that defect will ring like a bell. I used to keep a whole library of photoshop layers with filtery, blurry, corners and edges for dropping into tight spots.
Control your environment. Drop shadows are not a decorative item. Well, they can be, but in this case the thing they do is to create a sense of environment. Soft and fuzzy. Extended, but subtle. You are creating your own fake radiousity space here. And yes, a little creative use of color bleed and fake reflection can work wonders here. But don't overdue it. If the viewer can notice it, explicitly, you've probably overdone it. The window drop shadows on OS X are probably just a touch too strong for my taste. YMMV.
The drop shadow doesn't actually have to be a shadow. It can be though of as merely a filtered edge.
If you really want to get into it, find a good book on oil painting. These tricks have been around for a while. I can recommend the Andrew Loomis classic from the 1930s-40s, Creative Illustration. It's full of all kinds of filtering tricks. For a more modern book, James Gurney's Color and Light and Imaginative Realism are both quite good. You can also pick up a copy of one of his Dinotopia books, it won't help designing graphics, but, hey, dinosaurs. Right? (He also has an excellent website: http://gurneyjourney.blogspot.com/)
Gradients and ramps are useful, both to break up large flat areas of color and to add depth and a sense of space. But they are also useful on flat, graphic (old sense of the word) designs. A gentle use can place it in the viewer's world space without disrupting the, well, flatness. Just apply the effects uniformly, always being aware of color. Use of these within color fields can be useful and add visual interest and verisimilitude as well. A lighter hand is usually better than screaming "HEY, COLOR GRADIENTS!!!!"
Noise and dithering are also very useful, but can be very dangerous. Less is usually more. Noise is particularly useful on large areas, especially those with gradients. 24 bit color space is actually pretty limited when you start throwing gradients across all your colors.
I grey smallish elements slightly, unless I need them to pop (but you probably shouldn't be needing smallish elements to pop!) Over a uniform or low detail background, a bit of transparency can help, but there are technical limitations here on the web (see below).
When I need the user to look at different areas, instead of "glows" or movement in rollovers, use shifts in saturation instead. High saturation should be used only for directing attention. These days I discourage interactive things like rollovers because, they are a crutch, and mobile devices don't support them. (I have been playing around with using saturation with drag and drop, but it's more for fun and to see what happens. If you try this, be careful.)
Finally, you can use all these effects over the entire visual field. This is more useful inside illustrations or in environments where the content is contained. Vignettes and hot spots, if subtly applied can control the eye, filter the entire scene, and control perceived depth. This is harder in typographic environments, like the main areas of web pages and such. You can use these techniques, but you run the risk of looking less like a web page and more like a "Crazy Eddie" TV ad.
This is all mostly for display areas, illustrations and display type. For the reading typographical areas most of the filtering will need to be done by the OS and you don't have much control over that. You don't want to be screwing around with ham handed filtering on body type. You can still control color and contrast here, but remember old folks eyes, and don't unnecessarily grey the type.
In the new world where we can use Canvas and 8 bit alpha transparency, I've been known to slip in a few vignettes and hot spots as environmental effects. But think of the poor user's CPU, and only do this when it either pays off big time or is in a "display" area like a landing page or interstitial page of some type. Even then, try and talk yourself out of it.
For what it's worth, the hulu logo example in the article looks fine to me. It looks to me like it's been filtered, not just anti-alised. The "improved" one rings, to my eyes. Particularly in the corners.
YMMV.
Edit: Hinting mostly works best with very small elements, like body type, and even then in high contrast situations at high resolutions. Like laser printers. I've always found it annoying on CRTs and flat panels. I used to keep an old pair of reading glasses around to "filter" my screen. These days, with largers monitors, I use a 24 inch, at an appropriate distance, I don't need any filtering than my own aging eyes. The body type looks just great. Younger, sharper eyed readers may not agree, but just wait a few years ...
[+] [-] Pheter|14 years ago|reply
Also, I'm curious - what are the legal reasons for not working with full black or white in broadcast video?
[+] [-] ssp|14 years ago|reply
Regarding this:
So a controlled amount of blur, and I'm not talking about anti-aliasing,
it's worth pointing out that anti-aliasing is a form of blur, but most software usually uses a box filter which is a really a poor filter. I have some demonstration images here:
http://www.freedesktop.org/~sandmann/tigers
Compare these two especially:
http://people.freedesktop.org/~sandmann/tigers/tiger-box.png
http://people.freedesktop.org/~sandmann/tigers/tiger-jinc-ga...
The first one is what cairo produces; the second is improved in three ways: (1) The antialiasing filter is based on the Jinc function rather than a box, (2) white and black are offset slightly from the top and bottom, and (3) the compositing is done in linear light, not sRGB.
The strokes in the second image are also somewhat wider in order to compensate for the lighter appearance that gamma-aware compositing produces.
[+] [-] modulusprime|14 years ago|reply
Followup questions:
What do you think about the effect that pixel-alignment produces specifically in the context of this comparison?
There seem to be a couple of basic problems with the "clarity" of the pixel-aligned images (please correct):
- As lines diverge from rectilinear, aliasing is inevitable. Either the aliasing or the anti-aliasing will produce discontinuity.
- High-contrast neighbors on pixel boundaries are more likely to highlight perceptual problems related to frequency.
The part that interests me here is the presentation of this comparison on Dustin Curtis' site. His site seems to be pursuing visual impact as an ultimate goal, and contrast is a big part of that: http://i.imgur.com/UC8ZX.png (OP with histogram overlay)
Does the context minimize the negative effects you've described? Do the filtered images look out of place in such a stark environment?
[+] [-] its_so_on|14 years ago|reply
[+] [-] hej|14 years ago|reply
To me, the fitted hulu logo looks so much better. I like the crispness.
[+] [-] ricardobeat|14 years ago|reply
In the Hulu pixel-fitted example, the typeface is mutilated beyond recognition. Yes, it's sharper, but it doesn't look right, the 'u's even appear higher than the x-height.
In a screen where everything is anti-aliased, images like that stick out like 8-bit art. And just like in HD vs FullHD, most people can't even tell the difference. Be patient and we'll be over this in a couple years :)
[+] [-] jmpeax|14 years ago|reply
[+] [-] michael_fine|14 years ago|reply
[+] [-] thristian|14 years ago|reply
For example, in his "Markdown Mark" example, he's careful to make sure that the rectangular border is exactly three pixels wide on every side. Just rounding straight lines to the nearest pixel boundary wouldn't guarantee that (it's pretty easy to wind up with shapes that should look even, but are 2px on one side, and 4px on the other).
TrueType fonts face exactly the same challenges as described in the article, and they include bytecode for a specialised VM to describe how to nudge control points to pixel boundaries. The open-source FreeType rasteriser has code that's pretty good at doing this automatically, but it's very domain-specific to font-rendering; it would be no use to a general SVG renderer, for example.
[+] [-] ianterrell|14 years ago|reply
[+] [-] rpicard|14 years ago|reply
[+] [-] chrisdroukas|14 years ago|reply
[+] [-] sad_panda|14 years ago|reply
[+] [-] chrisdroukas|14 years ago|reply
[deleted]
[+] [-] grannyg00se|14 years ago|reply
I don't think Apple needs to come in and rescue every display maker in the world with their branding. Any sufficiently high resolution display will do.
[+] [-] harpastum|14 years ago|reply
Once more displays come out with extremely high pixel density, we'll probably have an industry wide name for it.
[+] [-] AncientPC|14 years ago|reply
Why not use the company agnostic term HD? You can be even more technical and say displays with 100+ DPI.
[+] [-] Kevin_Marks|14 years ago|reply
[+] [-] dcurtis|14 years ago|reply
[+] [-] darkstalker|14 years ago|reply
[+] [-] rorrr|14 years ago|reply
[+] [-] vibrunazo|14 years ago|reply
So many choose 2d logos and icons instead of 3d, simply out of style. But this little advantage is certainly something to at least consider.
[+] [-] gurraman|14 years ago|reply
http://methodandcraft.com/videos/pixel-hinting-vectors-in-ph...
[+] [-] ThomPete|14 years ago|reply
Apple+k and it finds the nearest pixel.
It's doesn't always do good, but sometimes it's just what the doctor ordered.
[+] [-] falava|14 years ago|reply
http://www.pushing-pixels.org/2011/11/04/about-those-vector-...
http://news.ycombinator.com/item?id=3720363
[+] [-] tintin|14 years ago|reply
I think you can use a background image as fallback.
[+] [-] justincormack|14 years ago|reply
[+] [-] agumonkey|14 years ago|reply
[+] [-] seanalltogether|14 years ago|reply
[+] [-] blehn|14 years ago|reply
[+] [-] jwr|14 years ago|reply
For rectangular shapes, even a simple repositioning could do a lot.
[+] [-] ricardobeat|14 years ago|reply
[+] [-] fusiongyro|14 years ago|reply
http://www.jvuletich.org/Morphic3/Morphic3-201006.html
I'd say there's still work to be done in this area.