Earlier quoted context omitted.
https://devimages-cdn.apple.com/wwdc-services/articles/image... your saying there is no anti aliasing ? this looks really blurry, like you said open it up check with a color picker and you will see the gradients....
There's something odd going on with that picture, though, because it has faint grid lines for the pixels. It's hard to tell what's anti-aliasing blurring, and what's a grid line.
Challenge: Pixel perfect design
31–40 of 116 posts
Re: Challenge: Pixel perfect design
#32Re: Challenge: Pixel perfect design
#33Re: Challenge: Pixel perfect design
#34Pixel 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).
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...
Re: Challenge: Pixel perfect design
#35See also: all the commentary around font rendering on MacOS/OS X vs Windows. IMHO Windows has always been far more towards pixel accuracy, but what the hell do I know (the internet will tell me I’m wrong either way!)
Re: Challenge: Pixel perfect design
#36Pixel 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).
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.
Re: Challenge: Pixel perfect design
#37Re: Challenge: Pixel perfect design
#38Just a thought: what if this some kind of teaser for a new device Apple is preparing? Maybe some e-ink device? Ok, I know we are in 2022, but I would really love to see some “low-tech” device from them. I’ll try to wake up now :)
Yeah, my wife just wants a shuffle. No not some other thing that needs you to be connected to Spotify. Just music to run with.
https://support.apple.com/guide/watch/add-music-apd483798d11...
Re: Challenge: Pixel perfect design
#39Pixel 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).
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).
Re: Challenge: Pixel perfect design
#40This is a really good video about how Apple cares about being pixel perfect compared to Windows with something simple and obvious like the mouse cursor icon: https://www.youtube.com/watch?v=YThelfB2fvg The improvements he made are also quite nice, Microsoft should take note...