Jump to content
arechsteiner

Bug: "Force pixel alignment" does not always work

Recommended Posts

Same issue here. This has been around since 2014 (see https://forum.affinity.serif.com/index.php?/topic/452-pixel-snapping/) and still isn't properly implemented.

 

Meanwhile it's 2018 and I'm getting this (this is a part of Grade UI pack, which everyone who has Affinity can grab):

 

snapping-WTF.png.f2475b9db066d4c14e5280b26fc8f05d.png

 

Just moved the top box, with with pixel snapping turned on, without snapping override (Alt-key). Fraction coordinates, blurred artwork. When is this going to be fixed? As in: working? When preparing this screenshot I drew an artboard to export this part of the file. Guess what: despite pixel snapping the artboard got a half-pixel height. FFS.

 

I paid for both Affinity apps and even got my company to buy another copy of Designer. I get to read a flurry of posts about yet another platform releases, awards of the year, how Affinity can replace Adobe apps, whereas basic stuff like this still causes trouble.

 

This is extremely frustrating and disappointing.

 

Cheers,

Matt

Share this post


Link to post
Share on other sites

Hi arechsteiner,

Can't you adjust the snapping settings accordingly? I don't know what situation you are dealing with but if you are getting half pixels it's possible Affinity is trying to snap to the middle of an object with an odd width for example - there's a setting in the Snapping Manager to control this (Include bounding box mid points) - untick it if you have it ticked. There may other things interfering here but without seeing the file it's difficult to guess what may be causing it.

 

Hi Matt,

I will check this out to see what's going on (have to go lunch now).

Share this post


Link to post
Share on other sites

@MEB: That's exactly my point. Snapping should not override "Force pixel alignment". It' says force, so please actually force.

I use Affinity Designer for web design, I never ever want any half pixels when sizing and positioning objects. Snapping is useful so I don't want to go and turn it on and off again all the time.

From my point of view, if I tell Designer to force pixel alignment I should never see fractured pixels on newly positioned and sized objects anymore.


Enjoying Affinity Designer on Windows 10. Check out my Bootstrap themes

Share this post


Link to post
Share on other sites

Hi arechsteiner,

That's not so simple. Affinity can be used for much more than web design and for some types of work non-integer values (half-pixels in particular) can be useful/desirable - for example to have more control over anti-aliasing when designing icons. So we provide several snapping settings to deal with various types of work. Force Pixel Alignment should work correctly when the rest of the settings are properly configured. There's situations where this can also be tricky. Picking my example above: if you want to align or size an object to half of another one with an odd width value (for example 101 px) what should the program do? Should it set the width of the new one to 49px, 51px or 50,5px?

 

Hi matisso,

Can you please attach your afdesign file here (just the bit shown above in your screenshot - the sign-up box - you can delete the rest of the design) along with a screenshot of the Snapping Manager settings please?

 

Share this post


Link to post
Share on other sites

Thanks @MEB for the hint on snapping to objects. Indeed this might be likely is the issue, I had my mid-points snapping on while testing this on the Grade UI file (I had all of them ticked, to be exact). It's worth noting that it doesn't always behave like this. I had to make a few attempts to recreate it, because sometimes the object snapped right into the pixel grid – that would actually explain the mechanism you described. However, if it also happens that it doesn’t snap where it’s expected, well, something isn’t right. @arechsteiner pretty much nailed it – it says force, so please actually force.  :)

 

Right. So I actually played with it for a bit longer, trying different snapping options and carefully observing what is happening with the object as it snaps to different candidates. It looks like this behaviour is also caused by snapping to objects that are off-grid. Text is notorious for creating such situations, as it doesn't follow the pixel grid. You might select all the text objects in the layer palette, and choose “Exclude From Snapping” option from the context menu. Then again, that would be extremely tedious to do it for every text object in your design and for every objects that you prefer to stay off the grid, for better antialiasing or whatever different reason. That's where another limitation comes in, namely the lack of selection of objects based on their kind, attributes, or so. Enter Illustrator: Select / Text Objects. Among other selection options, like select similar objects, same opacity, colour, stroke weight, etc. ;) But still it wouldn't address the underlying issue of objects not being pixel aligned, or snapping taking priority over it, if you like.

 

2 hours ago, MEB said:

Picking my example above: if you want to align or size an object to half of another one with an odd width value (for example 101 px) what should the program do? Should it set the width of the new one to 49px, 51px or 50,5px?

 

That’s actually easy (from a user’s perspective, ofc) – ideally, give the user a choice in preferences. One option would be to force integer values, another one – allowing fractions in pixel forcing mode. Or make the decision on your own, like Adobe did.

 

For the record, in the described case Illustrator snaps to either smaller or larger integer value, ± 0.5 pixel difference depending on from which side you draw the second, smaller object. It doesn’t make any difference to the eye. When centering objects manually with the help of smart guides, the object stays pixel aligned (technically being 0.5 px off the centre of the one it’s being aligned to). If you use an align feature, and centre them, it aligns perfectly, not pixel-perfect. Then again, Illustrator also has the “Align selected art to pixel grid” feature. ;)

 

Sorry for a slightly harsh tone of my previous post. It’s just that I see a lot of potential in Affinity apps but when I try to use them in a real world environment (aka actual work) I run into various glitches and I end up doing things longer and less comfortably than I would have done it using Adobe apps. Sure, a part of it happens because I’m far (well over ten years) more experienced in the latter, but some features like this clearly work in unpredictable ways (the infamous constraints/ungrouping issue being just another example).

 

Cheers,

Matt

Share this post


Link to post
Share on other sites
56 minutes ago, MEB said:

That's not so simple.

Sorry I don't see how this could be any simpler to be honest. If there is an option that says "Force pixel alignment" I expect the program to force alignment to whole pixels, period.

For types of work where you want fractured pixels you would disable "force pixel alignment".

56 minutes ago, MEB said:

Should it set the width of the new one to 49px, 51px or 50,5px?

Anything but 50.5.

Otherwise you'd have to rename the option to "Try aligning to pixels if it's convenient". In that case please add another option "Mercilessly force pixel alignment" for web designers.

Cheers


Enjoying Affinity Designer on Windows 10. Check out my Bootstrap themes

Share this post


Link to post
Share on other sites
16 minutes ago, arechsteiner said:

Otherwise you'd have to rename the option to "Try aligning to pixels if it's convenient". In that case please add another option "Mercilessly force pixel alignment" for web designers.

 

This is pure gold, I must say. xD

 

Cheers,

Matt

Share this post


Link to post
Share on other sites
3 hours ago, MEB said:

Can you please attach your afdesign file here (just the bit shown above in your screenshot - the sign-up box - you can delete the rest of the design) along with a screenshot of the Snapping Manager settings please?

 

@MEB, this is just a Modal Windows.afdesign file from the Grade UI Pack, like I said. For the sake of convenience though – there you go. There's also the screenshot of the Snapping Manager you asked for. And a few more showing moments when it goes “wrong”.

 

However, I don't really think the snapping settings are the key here. It’s the snapping that takes over pixel alignment that appears to be the problem.

 

Cheers,

Matt

 

Screenshot_AD_snap-4.png

Modal Windows.afdesign

output_lC9i4l.gif

Share this post


Link to post
Share on other sites

Hi matisso,

Thanks for the file and screenshots. Yes, snapping takes priority which makes it problematic with text objects, scaled images (where keeping the ratio forces one of the dimensions to be off grid), odd width, heights of other objects etc. I will talk with the dev team, raise those issues/propose a few changes to see if we can improve things here.

Thanks all for your reports and feedback.

Share this post


Link to post
Share on other sites

This issue has been around for so much time... Dozens of people including myself have asked for a real pixel alignement. Maybe one day! Oh and speaking of asked features, when is the warp tool coming for AD @MEB ?

 

Cheers


Webdesigner at Tribu And Co | French web agency - See our work at http://www.tribu-and-co.fr

Share this post


Link to post
Share on other sites

Any updates on this? Force pixel alignment is still an issue and shouldn't be on something touting itself as a UI design tool (amongst other things). It's rather frustrating having to double check every object you create when you've set the software to "force" a set of criteria. 

Share this post


Link to post
Share on other sites

I spent 2 hours trying to get 9 artboards and all their background layers all aligned so I could export to the right size rather than 1 pixel bigger than it should be with a transparent edge. This is not OK as a workflow. There are tools like Sketch that make pixel alignment very easy and there is a button where you can select a object and say snap to pixels and bam no sub-pixels. 

In Affinity even though the property panel looks like it's on the pixel boundary 780  it isn't because if you turn on 3 significant places on the pixels display (trick I found in forum on this issue) it's actual 780.029. I don't want to have to wrangle to 3 significant places to get my art aligned for export! Nor do I want to have to be worrying about 100ths of a pixel cluttering my property display.  If the force pixel alignment is ON then it should never allow a layer to be off the pixel grid when creating or moving it and ALL X/Y should be integral. 

I have to admit I was a big fan and advocate to other UX designers of this product until now, but it's such a ridiculous thing to implement as it is that I have lost a lot of faith in it.

Stop adding new features and fix the fundamentals you are being told about by professional designers. Or stop claiming this is a professional tool because it clearly isn't. Because for all it's excellent parts it let down by flawed thinking in the fundamentals. I'm not the only voice here there are many threads here on the same topic from professional designers. 

Share this post


Link to post
Share on other sites

Here is just a sample of threads caused or related to this behavior - there were 17 pages I stopped at page 4

https://forum.affinity.serif.com/index.php?/topic/67434-copied-artboard-slices-consistently-off-by-1-pixel/&tab=comments#comment-348837

https://forum.affinity.serif.com/index.php?/topic/53609-merging-layers-causing-blurring/&tab=comments#comment-359703

https://forum.affinity.serif.com/index.php?/topic/68654-wrong-size-of-file-after-export/&tab=comments#comment-355211

https://forum.affinity.serif.com/index.php?/topic/67434-copied-artboard-slices-consistently-off-by-1-pixel/&tab=comments#comment-348837

https://forum.affinity.serif.com/index.php?/topic/64600-wrong-document-dimension-when-exporting-with-export-persona/&tab=comments#comment-344034

https://forum.affinity.serif.com/index.php?/topic/63279-jpeg-exported-file-shows-unwanted-lines-across-the-picture/&tab=comments#comment-328046

https://forum.affinity.serif.com/index.php?/topic/62569-ad1-pixel-lines-not-displaying-as-1-pixel-wide-not-crisp/&tab=comments#comment-324370

https://forum.affinity.serif.com/index.php?/topic/54222-force-pixel-alignment-for-transform-panel-in-ad/&tab=comments#comment-274729

https://forum.affinity.serif.com/index.php?/topic/54024-force-pixel-alignment-move-by-whole-pixels-not-working-with-groups-photo/&tab=comments#comment-273680

https://forum.affinity.serif.com/index.php?/topic/61483-export-picture-size-change/&tab=comments#comment-320572

https://forum.affinity.serif.com/index.php?/topic/63801-export-dimensions-depend-on-artboard-alignment/&tab=comments#comment-330850

https://forum.affinity.serif.com/index.php?/topic/63900-export-size-bug-mac/&tab=comments#comment-331416

https://forum.affinity.serif.com/index.php?/topic/58210-one-pixel-is-added-to-my-exported-picture/&tab=comments#comment-308623

https://forum.affinity.serif.com/index.php?/topic/29400-size-adds-1px-when-creating-slice/&tab=comments#comment-296362

https://forum.affinity.serif.com/index.php?/topic/57619-unwanted-white-border-when-exporting-via-batch-process/&tab=comments#comment-296175

https://forum.affinity.serif.com/index.php?/topic/32639-force-pixel-alignment-not-work/&tab=comments#comment-158750

https://forum.affinity.serif.com/index.php?/topic/3237-white-borders-after-pdf-export-on-top-and-right-edge/&tab=comments#comment-258100

Share this post


Link to post
Share on other sites

Good luck getting any other response than "the developers know, this is not an easy fix, it is on the list, blah blah blah" as soon as my current contract ends, where I unfortunately have to use this software, I will be out. There are a handful of great features in AD, but too many core flaws for this to be the single software solution for anyone who relies on precision.

Share this post


Link to post
Share on other sites

Yep They need to realise this. Trouble is over precision in it's behaving like a cad tool not a screen  design tool. They definitely need a stabilizing release. It's not hard to implement you just need a round() on the X/Y in that mode.

I'm going to start a list like Arya Stark

1 Pixel forcing on artboards

2 Nested constraints

What else? ...These have to be major face palms that break workflow not niggles.

Share this post


Link to post
Share on other sites

Add my voice to the concern. I left Illustrator precisely because of it's inability to produce and maintain clean pixel lines during the creative process. For a while AD looked like it was solving it. But it doesn't. Product owner really needs to understand, like they did at Figma, that every UI / Web designer wants clean lines 99.99% of the time. Every design that doesn't make it a thoughtful process to create a blurred line is wrong by nature. Now clearly it's super difficult to handle correctly but apparently the folks at Figma pulled it out. If so there's a model to replicate. 

Share this post


Link to post
Share on other sites

Hi Grégory Makles,
Welcome to Affinity Forums :)
Sigma, Sketch and other similar tools were developed specifically for UI/prototyping. Affinity Designer covers a wider range of uses which require more broader snapping options.
When creating a new UI/Web Design project (after creating a new document), go to the Snapping Manager and select Pixel Work from the Presets dropdown. This sets up the basics for pixel work. If you want to be able to align objects also tick Snap to object bounding boxes. These settings also affect artboards (Force Pixel Alignment), so duplicating, moving and scaling them shouldn't be an issue. Where you may have issues is when drawing single vertical/horizontal lines since they will not fill a single column/row of pixels (they are placed between columns/rows so they aren't sharp) - you can't also change their alignment as for closed shapes. One tip that may help here a bit is setting the Nudge distance in Preferences to 0.5px. After drawing a line you can then use the cursor keys to nudge the object 0,5 pixels to quickly align it with the pixel grid. Maybe we can improve things here forcing single lines to snap immediately to the pixel grid (I will pass this to the dev team for consideration).

Another thing that may also help is using the View Mode - Pixel and Pixels (Retina) - as appropriate to force the rasterisation of objects for screen rendering so you can easily detect object (lines) that are not pixel aligned. 

Hope this helps a bit. Thank you for your feedback.

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

×