[AD]1 pixel lines not displaying as 1 pixel wide (not crisp)

[JokeRat]

I have something that bothers me big time and makes AD almost unusable for me. I draw a lot of UI designs and often times I need borders that are 1 pixel wide. The problem is, AD doesn't always display them properly. Sometimes they are 1 pixel wide, often times they are not. Not in the vector view, nor when in pixel-preview/exported.

Is there something I'm missing? Like a setting I missed? Or is the antialiasing just way off?

See screenshots below:

 

Pixel-Preview. You can clearly see that the selected pink line is "blurred" to 2 pixels width, while the smaller one on top is one pixel wide (how it should be).

 

And here a 100% zoom of the vector view: (you can also see the "effect" on the button. vertical lines are 1 px, horizontal lines are 2 px.)

 

Thanks for your help,

Jay

 

[firstdefence]

Hi have you tried using Pixel Persona and using the Pixel Tool (B) All lines are 1px 

[JokeRat]

Hi firstdefence

Thanks a lot for your help. Unfortunately the Pixel-Persona is not really an option, as I heavily rely on the flexibility and scalability of vectors. Besides that: drawing something like a rounded rectangle with the pixel tools is not as easy to get (without much effort).

[MEB]

Hi JokeRat,
The issue is those blurred lines are not aligned with the pixel grid. To appear sharp the nodes of a 1px vertical or horizontal line must be placed in the middle of a pixel and not where the pixel grid lines cross themselves otherwise the line will be split between two rows or columns (depending if it's an horizontal or vertical line) of pixels rather than use a single one. The best way to do this is using the Automatic grid with snapping enabled which will snap nodes to half-pixels letting you place the nodes exactly in the middle of a pixel ensuring the line will fill a single row/column of pixels. Here's an example of it working. I've set the grid to red so it's clearly visible. Notice the snapping lines - red and green - appearing in the middle of the pixels:

 

[JokeRat]

Hello MEB

Thanks for the answer. So you're saying that I have to actually move objects to half pixels instead using the app provided 'force pixel alignment/move by whole pixels' option? (which I have on (as you can see on the screenshot). That doesn't make much sense to me, to be honest.

Then - if not for proper alignment - what is 'force pixel alignment/move by whole pixels' for?

[MEB]

No, the above only applies mostly to lines with 1px width or shapes with a stroke with 1px width aligned to the centre (the only cases where you want the stroke nodes placed in the middle of pixels). For all other cases Force Pixel Alignment should do it. Although i have it disabled in that video it can be turned on simultaneously.

Another option/alternative you may want to consider if you don't want to use the Automatic Grid is adjusting the Nudge distance in Preferences to 0.5px (in Affinity Designer Preferences, Tools section). So when you draw a line you see it's blurred/not aligned you can easily fix its position nudging it with the cursor keys.

[A_B_C]

In other words, for closed shapes like your button frame, you could, for instance, set Stroke Alignment to Inside, and snap your rounded rectangle to the pixel grid. 

But I admit, it would be welcome to have a better, simpler option for open shapes. I found myself using little rectangles instead of single strokes only to overcome this half-pixel alignment … which isn’t perfect as well … 

[JokeRat]

Thank you MEB and A_B_C. much appreciated!

The 'middle alignment' argument makes totally sense.

Now I tried to apply this to the button in my example and the horizontal lines are indeed crisp as they should be. but unfortunately the vertical ones are now blurry. Any clues why (the dimensions and positions are on full pixels)?

 

 

Edit: 

Here is another example. This time it's again the horizontal line (bottom border) that is blurry. (and to a certain degree the right vertical one as well)

[A_B_C]

That should not be the case. If the position and the size of your rectangle are snapped to the pixel grid, everything should come out pixel-perfect. However, you must have in mind that the Transform Panel does not necessarily display fractional pixel values, depending on your settings in the Preferences. So I would suggest that you either manually enter the coordinates to test your document or try the following:

• Switch off Move by Whole Pixels, but engage Force Pixel Alignment. You can disable all other snapping options for testing purposes.
• Grab the top left handle of your rectangle and move it a little to snap it to the pixel grid
• Do the same with the bottom right handle
• Make sure that your stroke is precisely one pixel wide and that the alignment is properly set
• Is there still some blurriness?

Everything should be crisp now. You can also compare my example document below. If you still experience problems, I can only imagine that your document or export settings are wrong. 

 

Example.afdesign