4 ms·

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 sh

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).

toxik 4y ago
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.
- p1necone 4y ago
  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.
- qubidt 4y ago
  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
  - toxik 4y ago
    So it seems you missed the word “perhaps” which essentially makes this correction meaningless.
    - cylon13 4y ago
      You can’t just slap “perhaps” on arbitrary statements and expect to not be corrected if they’re inaccurate.
      - toxik 4y ago
        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.
  - layer8 4y ago
    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.
dmitriid 4y ago
> 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.
- flowerbeater 4y 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.
  - layer8 4y ago
    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.
    - doublepg23 4y ago
      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.
      - dmitriid 4y ago
        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?
solardev 4y ago
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/ 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/ 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-optical-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/font-optica...
- ziml77 4y ago
  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.
  - flowerbeater 4y ago
    > 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.
ziml77 4y ago
> 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).

toxik 4y ago

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.

p1necone 4y ago
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.
qubidt 4y ago
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
- toxik 4y ago
  So it seems you missed the word “perhaps” which essentially makes this correction meaningless.
  - cylon13 4y ago
    You can’t just slap “perhaps” on arbitrary statements and expect to not be corrected if they’re inaccurate.
    - toxik 4y ago
      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.
- layer8 4y ago
  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.

dmitriid 4y ago

> 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.

flowerbeater 4y 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.
- layer8 4y ago
  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.
  - doublepg23 4y ago
    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.
    - dmitriid 4y ago
      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?

solardev 4y ago

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/ 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/ 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-optical-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/font-optica...

ziml77 4y ago
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.
- flowerbeater 4y ago
  > 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.

ziml77 4y ago

> 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).