Jump to content
JokeRat

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

Recommended Posts

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

pixel-problem_01.thumb.PNG.b1c7ec6338affdbc779709174cb701d0.PNG

 

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

pixel-problem_02.PNG.3a89e7acc2036ae48268a52885e8207a.PNG

 

Thanks for your help,

Jay

 

Share this post


Link to post
Share on other sites

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

693640817_ScreenShot2018-07-24at08_45_43.png.a25e5e9c87ef09790a214e0766fa33cb.png


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - FeedbackInstagram & Flickr

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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:

pixel_aligned_1px_strokes.thumb.gif.fe87b2f00c61382286f34f7480ade5ea.gif

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 … :(

Button.png.8d0f5a543ee27ef9e990a6d39e66c979.png

Share this post


Link to post
Share on other sites

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

 

blurry.PNG.548666ea52ca9ad7300c479bfe2e980c.PNG

 

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)

blurry2.PNG.85bda1e9a2f99f0bef29ce85727003e3.PNG

Share this post


Link to post
Share on other sites

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

Example.afdesign

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.