Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

About those vector icons

pushing-pixels.org

Post reply on HN
Print view View original

31–40 of 41 posts

Re: About those vector icons

#31

Post by sirclueless »

kirillcool wrote: post #25
ChuckMcM wrote: post #16

Earlier quoted context omitted.

I agree it was a fascinating look at the problem. However, the assumption in the article is pixels. Let me sum up. Scaling artifacts occur because at smaller sizes the quantitization of the unit pixel overwhelms the details of the image. When I was a system programmer at the Image Processing Institute at USC (you know the source of that Lena picture :-) this was characterized as the frequency response of the display.…

Author of the article here. If you read the closing paragraphs of the article, you will see that I do talk about the physical size of the final representation of the pixel-based icon. However, just because you can use more pixels on higher-resolution displays, it does not mean that you can just take a highly detailed vector artwork and display it. Being able to display very intricate details for each icon is not nece…

This is actually a good reason to move away from pixel designs and towards vector graphics. An assumption made now is that there is one or maybe two resolutions at which a 128x128 icon is displayed, and this is true for iOS screens. But with a more heterogenous selection of screen resolutions and expected screen distances, the actual display size of a 128x128 icon is basically unknown.

There are two problems you are conflating. One is that low-resolution icons have visual artifacts, and therefore manual pixel hinting is valuable. In general though, this problem only crops up for very small icons, say smaller than 32x32. But as screen resolutions increase, this problem will get easier.

The other problem is that at small sizes, we want icons to be less detailed and therefore more recognizable. A quarter-inch icon two feet from the eyes should have very little detail. This is a problem that vector graphics are very suited for. One can specify a low-detail icon that should be used when the real size of the icon is below some threshold, no matter whether that screen space is 64x64 or 20x20. In a world where the screen resolution of an icon that size can vary by more than a factor of two, using pixels is the wrong approach.

Re: About those vector icons

#32

Post by evincarofautumn »

bkirwi wrote: post #30
evincarofautumn wrote: post #4

The very meaning of the term “icon” implies a non-literal representation, and since there is no automatic way to transform high-res representation to low-res caricature, you end up with vector artists doing horrendous pixel art. Pixel art is a very different medium from what they’re used to, and there are specific techniques that they haven’t learned, largely because they don’t even know such techniques exist. They d…

Do you have any resources for beginners you recommend? (I'm not a designer -- just have a certain fondness for dying media, I guess.)

Absolutely! Though pixel art isn’t dying—the niche is small, but not shrinking, and there are artists who make a considerable amount in commissions, typically sprites and backgrounds for games.

I suggest you check out Pixeljoint[1]—coincidentally it’s down today for a server upgrade, but the community offers excellent feedback for new artists, and the tutorial section has links to some great resources. Pixelation[2] is a great community with many experienced artists from the pixel world and demoscene. You’ll also find a couple of tutorials on an older site of mine, Studio Purloux[3]. One is a general tutorial by my good friend Kevin Chaloux[4], an outstanding and highly regarded pixel artist; the other is my own introduction to manual antialiasing. That should be enough to get you started.

[1]: http://www.pixeljoint.com

[2]: http://www.wayofthepixel.net/

[3]: http://purloux.com/artwork/tutorials/

[4]: http://kaiseto.deviantart.com/

Re: About those vector icons

#33

Post by ricardobeat »

Fortunately all of this will be moot in a few years, when high-dpi becomes the norm.

Some of the examples he shows are much worse than reality. You can have outlines that don't increase in width for larger sizes.

Re: About those vector icons

#35

Post by dubya »

kirillcool wrote: post #26
emilsedgh wrote: post #19

Oxygen icons (by KDE project) use SVG for all sizes of icons. Here is an example: http://wstaw.org/m/2012/03/18/plasma-desktopA20554.png (The icon on the left is suited for 16x16 size. The icon in right is the same icon, just suited for larger scales) I think this scheme is supported by FreeDesktop.org's Icon Theme Specifications and other icon theme's used on Linux desktops (like Tango) use the same scheme.

Indeed, in that they have multiple SVG versions of the same icon (name) for smaller pixel sizes - 16x16, 22x22, 24x24, 32x32 - the last time I checked.

That seems like the appropriate compromise, SVG for various optical sizes. The analog example that comes to mind is Dr. Seuss books. The Cat in the Hat is much less detailed when he is far away, and has very detailed pen work close up.

Re: About those vector icons

#37

Post by jacobr »

Just like with HTML/CSS and responsive design, you can use media queries in SVG images. That way you could do the optimizations suggested in the article, including changing colours, hiding details, etc. Take a look at the demo links at http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-a...

As far as I know there's still a lack in tooling though, so you might have to write some "code".

Re: About those vector icons

#39

Post by gurkendoktor »

vibrunazo wrote: post #7

Isn't this a little bit of inefficient over-optimization. Sure auto scaled vectors look more blurred than hand made bitmaps. But the important question is: do normal people even notice the difference in today's screens? At the end of the post, the author concludes that not yet. But he doesn't seem to back it up. And I don't mean to back it up by comparing vector and manual icons for videophile designers. But actually…

I use a SIMBL extension to bring OS X 10.6's colorful Finder sidebar icons to 10.7. I have always been meaning to improve its source code because it simply scales the large versions down.

The difference is irritating and clearly noticeable for e.g. the "Documents" icon if you compare it to the "Go" menu. And it's not because the big versions are bitmaps, it was mostly the missing outline and lack of contrast.

(I still find them much faster than the monochrome versions (and with a smile) :))

The Finder's "Go" menu is really a good example of tiny, clear icons.

Re: About those vector icons

#40

Post by julienc »

wavephorm wrote: post #23

The answer is to use HTML5 canvas instead of SVG, and create your icons as a JavaScript algorithm. Canvas code can become vector if you utilize the scale() function. I've done this for the icons in one of my web apps and it's a superb solution. If there was some way to export a vector drawing as a JavaScript algorithm, or some semi-standard way to process an SVG image to Canvas then it'll become the defacto icon solu…

Can you please show an example? This is interesting.
Post reply on HN