Hacker News new | ask | show | jobs
by flowerbeater 1472 days ago
Pixel art is a fun retro hobby, but as the article acknowledges, "we create work for high-resolution HDR screens." Icons, logos, and illustrations in general should be vector-first, so they will show up cleanly on HiDPI and in the future, 4X or 8X DPI interfaces. Too many icons and logos (even the Y on the top left here in HN) look blurry on a simple 4K monitor with 200% scaling (which is not uncommon now).
4 comments

Even in the vector age, though, one of the things we've learned from pixel icons is that different sizes would ideally have different levels of detail.

For example, see this camera icon: https://useiconic.com/icons/camera-slr/ (in the left pane, click the "three squares" icon to render them all at the same size). All three are vectors (you can inspect them if you want), but they still show different levels of detail. If you take the high-detail icon and render it at a small size, the details add visual clutter that are hard to understand at a small output size. Or with this book icon (https://useiconic.com/icons/book/), if you go the other way and scale the small book up to a larger size, it's harder to tell what it is because the "pages" part at the bottom is so thick -- which was a design necessity at smaller outputs, or it'd have been invisible, but at larger sizes it's too thick.

So even with vectors, the essential takeaway of this particular challenge still stands:

> [how to] distill the essence of your design and make sure your icon is clear and understandable at all sizes

Every vector icon still gets rasterized at some point for displaying to your monitor's pixel grid, not to mention human perception. Vectorization is a transport/delivery concern, but in and of itself it doesn't replace the thoughtful design of the pixel era.

Fonts can work similarly... they are usually vector these days, but still each glyph can look different at different sizes and can be dynamically controlled to look better at different render sizes: https://developer.mozilla.org/en-US/docs/Web/CSS/font-optica...

This is what annoyed me the first time I saw vector icons used in Linux desktop environments. I appreciate the attempt at making something that scales to any size, but in practice you need to custom design the smallest versions of an icon.

Even at the larger sizes, a vector won't always look great. If the renderer doesn't fudge vector edges to snap to pixel edges, you'll end up with blurry edges instead of clean, sharp ones.

> Even at the larger sizes, a vector won't always look great. If the renderer doesn't fudge vector edges to snap to pixel edges, you'll end up with blurry edges instead of clean, sharp ones.

Do you have an example? Text is essentially "vector" these days, and I've never heard of anyone complaining that text rendered on a modern screen has blurry edges. The blurriness of some text is often "cleartype" or whatever tricks are being used to make it look better on low-dpi screens, which end up making it worse on modern displays.

Fonts have hinting to align to pixels, which vector icons don’t.
True, and pixel art was originally designed for cathode ray tubes. This leads to a funny effect where modern pixel art designers perhaps misunderstand the intended look of actual oldskool pixel art and emulate it anyway. The same is true of old fonts.
Modern pixel artists far from "misunderstand" the legacy of pixel art. They're specifically designing for a sensibility and context that didn't exist when pixel art was originally made. Actually talk to pixel artists and they'll explain this to you themselves perfectly fine
I have no idea about modern pixel art artist’s thought process, but it’s generally under-appreciated that CRT-era pixel art looks significantly different on todays displays than it looked on the originally targeted hardware.

That being said, there were also a couple of years in the 2000’s where pixel-based icons were specifically designed for LCD.

So it seems you missed the word “perhaps” which essentially makes this correction meaningless.
You can’t just slap “perhaps” on arbitrary statements and expect to not be corrected if they’re inaccurate.
We can never know what each and every pixel art designer means or intends, simply because there is no single answer.

Because of this obvious fact, I offered a common explanation among those designers I know that produced pixel art: that they simply do not consider the particulars of how pixel art was rendered on cathode ray tubes. Hence /perhaps/, a possibility is presented.

I find your counter-argument superficial and perhaps intentionally missing the point.

This is true for retro video game consoles and early computers that had ~240p displays or output to TVs. But later PC CRTs were pretty crisp and not really that much different from an LCD at native res.
> Too many icons and logos (even the Y on the top left here in HN) look blurry on a simple 4K monitor with 200% scaling (which is not uncommon now).

This has been an issue with application icons on Windows for a long time. For many applications the largest icon would be 32x32. So when they changed the default desktop icon size to 48x48, those all looked terrible. I hated seeing blurry icons enough that I would make a larger version myself if I couldn't find a decent replacement online

In some cases I would actually need to make a custom 16x16 or 24x24 icon, because whoever made the icon went the easy route of just scaling down a larger icon to create the small ones. Even if the source is a vector, most icons will not scale down to those sizes and retain readability since the details disappear. Alignment to the pixel grid is essential for tiny icons. In these cases I would have to use Resource Hacker to modify the icon stored in the executable (for desktop icons that wasn't needed since you can change a shortcut to use any icon file).

> will show up cleanly on HiDPI and in the future, 4X or 8X DPI interfaces

That future is still as far away as it was 20 years ago.

Why do you think so? 20 years ago, everything was clearly in 1X. Now, the Windows default for many resolutions is 1.5X and my Macbook is 2X by default. iPhones and Androids are at least 2X scaled by default. iPhones in the last 2 years (like iPhone 12 and 13 are scaled 3X. So we've gone from 1X only, to 2X pretty much everywhere for desktop, with 3X on the latest phones.
Full-HD monitors and laptops are still very common in the corporate world and for non-affluent PC gamers. I don’t see this lower-cost segment going away anytime soon, since display yield drops quadratically with DPI, and therefore the associated cost increases quadratically with DPI.
You can get a 4K monitor for ~$300 now - or significantly less if you shop deals. I spent that much on a super basic FHD display in 2016. Costs seem to be dropping pretty well even with inflation and the supply chain mess.
4K is still not enough to get rid of pixel perfect icons.

So, another 10-20 years before nor requiring a pixel grid becomes a reality? So why pretend we don't need it now?