7 ms·
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 wit
by commieneko 14y ago
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/ 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 ...
- ssp 14y agoVery 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: http://www.freedesktop.org/~sandmann/tigers 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-box.png http://people.freedesktop.org/~sandmann/tigers/tiger-jinc-gamma-wide-stroke.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.
- commieneko 14y agoI'm using the terminology pretty loosely, trying to match the tone of the discussion here. This is a casual comment. And really too long a one at that. When I'm saying anti-aliasing I'm really meaning super sampling and weighted assignment of brightness values. There's a lot of ways to do that, all with their own artifacts and advantages. Filtering is used as a catch all for operations that reduce image sampling and display artifacts. Most website designers will be using Photoshop and its blur and Gaussian blur filters. Those work just fine. If you need anything fancier, or can make use of it, you probably don't need to have read my comment. For this type of work I've found that techniques developed by oil painters over the centuries work just fine. A little math goes a log way. My point is that if you are fiddling with pixels, you probably aren't looking at the whole image, and probably should be. Counter intuitive as it may seem, sharpness is not always your friend. You've got bigger things to worry about. In the "real world" nearly everything we look at is seen by reflected light, with pigments subtracting frequencies and value from the available light. Edges come and go due to characteristics of our visual system. Brightness levels are incredibly wide compared to what we get on the screen. On a computer screen we are looking at emitted light, with a very strange, and constrained gamut. Edges and areas are defined by additively mixed samples and other artifacts. Go outside some evening, just as the sun is setting, and walk through a residential neighborhood with a lot of trees, houses and such. Very peaceful. Except for the neighbor who has his living room window open and lets his TV shine like a demon in the night, destroying the ambience and mood. (And don't get me started talking about audio!) A good designer knows how to use those characteristics, the limitations of his/her medium, to recreate the experience of the world, or to control them to create something different that serves their purposes. It's why a painting can look better than even a very good photograph. Or why a highly manipulated photograph can look better than an un-staged one. Portrait studios are not the site of a documentary :)