
When "Pixel Preview" is Enabled, my design is distorted. Vectors and UI Elements that are Aligned to the Pixel Grid perfectly look horrible. Only if I set the UI scale to 80% does the design look good. What's the problem?
What I'm trying to accomplish
I am working on a simple folder Icon. Everything is completely aligned to the pixel grid.
See this example image:
Icon Perfectly Aligned to Pixel Grid
Enabling Pixel Preview
Then I go to the menu, and select Pixel Preview, because I want to preview how the icon will look at 100%.
Here's where I enabled it:
The resulting image and UI components in my file look distorted, some with double borders, etc.
It just looks janky. See for yourself:
Messed up Rendering with Pixel Preview on and UI Scale at 100%
The interface zoom is set to 100%. All shapes are aligned perfectly to the pixel grid.
UI Scale Set to 80% Makes Everything Look Crisp in Pixel Preview
I noticed that if I set the interface scale to 80%, everything looks crisp!
See this image:
Pixel Preview looks Great when UI Scaling is at 80%
But, I can’t work like this - and this is ass-backwards. The UI is way too small on my monitor with the UI at 80% scale.
Why does pixel preview look horrible for me when the interface is at the default 100% scale?
Possibly Related: I have a 4k monitor and my Windows DPI scaling is set to 125%. Could this be causing the issue?
Can someone help?