• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Pixel perfect problem windows 4k

Explorer ,
Nov 09, 2021 Nov 09, 2021

Copy link to clipboard

Copied

It's been 6 months now since I switched from my 5k imac screen to a 4k pc screen and I have a problem with XD render. My lines & stroke are not pixel perfect and it's really annoying in daily use.

Is there any way to make it work?

I'm attaching an example of the same stroke duplicated.

If I move it with the keyboard arrow sometimes it becomes sharp sometimes blurred.

TOPICS
Product performance

Views

672

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 15, 2021 Nov 15, 2021

Your 5k imac has a dpi of 218. Your pixels are phisically so small that even if there was a blur @ 100% you wouldn't be able to see it. I don't know how big your PC screen is, but if it's 4k it's probably 27" or bigger. This has a dpi of 160-170 or less, which will make blurry pixels more easily visible.

 

I don't claim to know the inner workings of how MacOS handles this, so there might be something I'm missing. However, what I said in the above post still stands. If you have to design pixel-pe

...

Votes

Translate

Translate
Community Expert ,
Nov 09, 2021 Nov 09, 2021

Copy link to clipboard

Copied

What are the Y positions of each line? If you're using 1px stroke, it will be perfect provided the line is at a .5 position on the Y axis, as it will match perfectly with the pixel grid. For a 2px stroke, it is best that the line is at a whole number position.

 

If you use 0.5 size for the stroke, that is 0.5 pixels, so that can never be pixel-perfect. It can only seem that way on a high dpi screen, as the pixels are so small you don't see the blur.

 

Here's an example at 100%:

SpasK_0-1636488333567.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 10, 2021 Nov 10, 2021

Copy link to clipboard

Copied

I dont understand, why the y position is important ? When i use chrome each stroke have the same display, it does not become blurred. No matter the thickness or position

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 10, 2021 Nov 10, 2021

Copy link to clipboard

Copied

Short version: Browsers and design programs don't like half pixel values, and they will do work in the background to compensate for it, but not in all cases and not in the same way. And as a whole - it's not a good practice.

 

If your Y (or X for vertical lines) position is a .5, the stroke should be an odd value (1, 3, 5). If it's at a whole number position, the stroke should be an even value (2, 4 etc). Here's a closer look at the same lines from before on a pixel grid:

 

SpasK_0-1636572712694.png

 

 

The canvas within Xd isn't the same environment as Chrome. And there can be similar anti-aliasing issues with more complex graphics and .svgs in Chrome as well.

 

Browsers do a lot of work under the hood to make sure things look as good as they can on various screens and resolutions. They round some values and apply scaling, taking into account the pixel density of the device.

 

Most design programs understand 1 pixel as the physical size of 1 pixel on a 72dpi display. Now let's take a retina device that has 144 dpi. If you specify something has a stroke of 1px, since the density of this screen is 72dpi x2, the browser will display the stroke as 2 actual pixels on that screen. If your stroke is 0.5 pixels, this is 1 whole pixel on the high-dpi display, which will display fine.

 

If the device has a lower density display close to 72 dpi, the browser will use the original size specified. Since the monitor can't light up just half a pixel, the browser will round the .5 to 1 and still show it as a 1px stroke. Problem is, that can only happen with vector elements.

 

Xd and other similar design software work with both vector and raster graphics, and will show things as they are for the sake of accuracy. Everything is displayed through a pixel grid.

 

This is important, as you are not always exporting vector files, and a .png will not take advantage of the browser optimizations I mentioned before. The half pixel will not be rounded to a 1. If a line is half a pixel wide, it will fill a whole pixel with a color that's an average between the stroke and background color, making the line look blurry or lighter than it is.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

In absolute terms I understand  what you're telling me even if it's not so clear, and why with my Imac everything is clean then? that's what I don't understand. If the reasoning is the same all retina++ screens should have an alignment problem no ? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

Your 5k imac has a dpi of 218. Your pixels are phisically so small that even if there was a blur @ 100% you wouldn't be able to see it. I don't know how big your PC screen is, but if it's 4k it's probably 27" or bigger. This has a dpi of 160-170 or less, which will make blurry pixels more easily visible.

 

I don't claim to know the inner workings of how MacOS handles this, so there might be something I'm missing. However, what I said in the above post still stands. If you have to design pixel-perfect 18x18 pixel icons, where you put that pixel or line matters a lot.

 

You don't want to rely 100% on what you see on the screen, but make sure everything is properly placed on the pixel grid. A lot of people don't use high-dpi displays, and even if it's sharp on your screen, they might not see it as such. If it's properly placed, you will see it sharply on any screen @ 100% zoom.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

LATEST

Okay, i understand, thanks for taking the time to answer. It's very nice.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines