Jump to content
antonkudin

[Fixed] Layer pixel alignment issues

Recommended Posts

I'm not sure why snap to grid behaves this way either 

 

Snap to grid (Automatic grid) also picks half pixels because for some ui work (icons for example) aligning to half pixels is an useful feature (to control antialiasing) or to draw a 1px line aligned to the pixel grid.

Share this post


Link to post
Share on other sites

Snap to grid (Automatic grid) also picks half pixels because for some ui work (icons for example) aligning to half pixels is an useful feature (to control antialiasing).

I think this should be an option as it's not always what you want, and it would have enabled me to see that "snap to grid" was what was causing this and control whether I want half pixel grid snapping or not.

 

I'll get back to you about whether it's all working for me in a while. A lot to digest.

 

Thanks all for figuring this one out! Back to work.

Share this post


Link to post
Share on other sites

I'll have to agree with my fellows here pixel alignement/snapping/whole pixel thing is really tedious

 

Indeed, it needs simplifying. 

Share this post


Link to post
Share on other sites

The behaviour is the same for me with "Move by whole pixels" enabled or disabled.

 

I can happily move a shape/rect by half pixels.

 

When I draw the shape/rect on the screen the initial draw also falls on half pixel boundaries.

 

I'm using a MacBook Pro with Retina display if that makes any difference?

 

You are going to have to provide a video of this.  If creating a new shape, with force pixel on, it should create the shape on pixel boundaries (not accounting for any stroke alignment).

 

But, even with pixel snapping on, you can still perform other snapping which can be off-pixel - such as the mid point of other objects, or objects not on pixel.  If you don't want to snap to anything else, then turn those options off!  The snapping indicators will be showing you what you are snapping to, so there really should be no surprises.

 

The snapper will only snap to what you are allowing it to snap to.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

Another issue thats related: if layer is odd-width or height and rotated, it will be rotated around point thats at .5 pixels at some coordinate, resulting in half-pixel position, again ignoring the 'Force pixel alignment' option.

 

If that option is on, no matter what, i expect positions to be exactly on pixel grid.

 

If you rotate an object, then what do you expect to be "on pixel"?  Take a rectangle and rotate it - it's going to be an fractional size in X and Y.  Then try and align it - what would expect it to align to?


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

I am following up with this.

 

I opened the same bug long ago and was told that everything was working. Now I have to do a lot of design again and went back to Designer to try it again let me be clear: nothing works.

 

Pixel alignement do not work, force pixel move do not work and if you had snapping on top of it, it doesn't work either. 

In this current state, Affinity Designer is barelly usable for any UI purpose on the opposite of what you advertise.

 

I have object at 29.6 pt even if I activate "whole pixel" options. They thing with move by whole pixel: If I move this object, it will move +- 0.5pt and thus stay in NON-aligned pixel coordinates (30.4, 30.9, etc...).

 

The alignement tools do NOT check if the object is aligned in the first place and just do a dumb addition / soustruction of half a point.

 

The same applies with shapes which will not aligned correctly on the pixel level / grid. I have to constantly put round numbers manual on shapes and coordinate which makes me lose a TONS of time. And as soon as I have to reorganize the view to a new grid / layout, the nightmare begins.

 

I hope 1.6 address this issue and that it is a top priority in the list of things to fix.

 

THIS IS NOT GOOD.

 

You are going to have to provide some examples and videos to show these issues.  I think that has been requested before, and the issue you had was explained by you snapping to other objects that were not aligned to pixels.

 

Also, if you are dealing in Points, not pixels, then the conversion from Points to Pixels will depend on your document DPI.  So, align to Pixel will possibly be creating non-whole Point values.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

that is because you have "move by whole pixels" enabled which overrides the "force pixel alignment", see my video at the end 

 

I'm not sure why snap to grid behaves this way either 

 

Yes - a peculiarity we have, which came from the original grids implementation (before I wrote the custom grid stuff).

 

If you have "automatic grids" on, then we snap to the grid midpoints also.  You'll also notice that the grid lines change depending upon the zoom level.  I think the midpoint idea was chosen because people wanting snapping at the finer resolution than the visible grid lines.  Can't say I was a fan of that, but apparently it was requested.

 

With custom defined grid, we always snap to the grid line.  Never the mid points.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

You are going to have to provide a video of this. If creating a new shape, with force pixel on, it should create the shape on pixel boundaries (not accounting for any stroke alignment).

 

But, even with pixel snapping on, you can still perform other snapping which can be off-pixel - such as the mid point of other objects, or objects not on pixel. If you don't want to snap to anything else, then turn those options off! The snapping indicators will be showing you what you are snapping to, so there really should be no surprises.

 

The snapper will only snap to what you are allowing it to snap to.

If it's not covered by my existing videos and attachments I will be happy to. Let me know.

Share this post


Link to post
Share on other sites

If it's not covered by my existing videos and attachments I will be happy to. Let me know.

 

Reading through the whole thread (again), I'm going to assume it's because you also had Snap to grid turned on - resulting in snapping to mid-grid lines.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

Reading through the whole thread (again), I'm going to assume it's because you also had Snap to grid turned on - resulting in snapping to mid-grid lines.

Quite likely. It's all very confusing.

 

I mean as the developer you shouldn't have to assume or deduce anything about this. If should be obvious to you and us users.

Share this post


Link to post
Share on other sites

I'll have to agree with my fellows here pixel alignement/snapping/whole pixel thing is really tedious

 

It's quite simple, if you understand the purpose of the options.  Turn off all other options, and just try the pixel snapping options.

 

Force pixel alignment

Always moves the thing you are editing onto a pixel boundary.

If the thing is off-pixel, it will be put on-pixel.

If moving a whole object, its top-left edge will be put on-pixel.

 

Move by whole pixels

Take an existing object that is off-pixel, and move it along in whole pixel increments.

Or, take a node of a curve and move it in whole pixel increments.

This allows you to work sub-pixel, and then move components of your design around without affecting their sub-pixel positioning.

This is useful for positioning designs with sub-pixel or irregular shapes.

This option should only be used if you want to PRESERVE the off-pixel positions of elements of your drawing.

 

These two options work well with the Pixel Preview Mode.  You will then see that "Move by whole pixels" is intended to preserve the pixel contribution of vector elements that you have already carefully placed.  It is less intended for use while designing, and more for when you want to take existing elements and reposition them.

 

 

As for all the other snapping options - they do all work together.  There is no real mystery - snapping always snaps to the closest thing in line with the object you are moving.  If the closest thing is less than a document (not screen) pixel away (and within snapping tolerance) then it will snap to that over snapping to pixel boundaries.  It really is only doing what you ask it to do.

If you have pixel and grid snapping on, the two will work together - it's up to you to configure your grid so that it doesn't fight.

 

 

There is one additional thing to understand about "Force pixel snapping" - it will always happen if no other snapping occurs - it isn't restricted by the snapping Screen tolerance setting.  So, if you zoom right in, you'll see that you can align to other objects only if within snapping tolerance - and that includes Grid lines.  But, if you don't find a snap, your object will instead always snap to a pixel boundary.

 

Pixel snapping also works independently in X and Y axis - so it will allow you to align to an off-pixel object in X, then if there is no other snap in Y it will align the Y to pixel.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

Quite likely. It's all very confusing.

 

I mean as the developer you shouldn't have to assume or deduce anything about this. If should be obvious to you and us users.

 

I'm only assuming from your explanation what you thought was happening.  I know how it does work, and that is the only way it could be happening.

 

There are snapping indicators for every form of snapping other than pixel alignment - so you can instantly see if you are snapping to the grid, or aligning to another object.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

OK, so it's obvious to you. but it's not to us.

 

I really do suggest you try the snapping options on one at a time to understand how they work.  Zoom right in to see how pixel alignment behaviour works.

 

If you turn all the options on, then yes it will get complicated.  If all you want is pixel snapping, turn everything else off.

 

We have added lots of control over snapping because we are catering for user with very wide ranging requirements.  You clearly only want to snap to pixels, so will have no need for the other options.  There will be other users working in print who have no interest in pixels, but will want alignment to object centres, margins and guides.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

It's quite simple, if you understand the purpose of the options.  Turn off all other options, and just try the pixel snapping options.

 

Force pixel alignment

Always moves the thing you are editing onto a pixel boundary.

If the thing is off-pixel, it will be put on-pixel.

If moving a whole object, its top-left edge will be put on-pixel.

 

Move by whole pixels

Take an existing object that is off-pixel, and move it along in whole pixel increments.

Or, take a node of a curve and move it in whole pixel increments.

This allows you to work sub-pixel, and then move components of your design around without affecting their sub-pixel positioning.

This is useful for positioning designs with sub-pixel or irregular shapes.

This option should only be used if you want to PRESERVE the off-pixel positions of elements of your drawing.

 

These two options work well with the Pixel Preview Mode.  You will then see that "Move by whole pixels" is intended to preserve the pixel contribution of vector elements that you have already carefully placed.  It is less intended for use while designing, and more for when you want to take existing elements and reposition them.

 

 

As for all the other snapping options - they do all work together.  There is no real mystery - snapping always snaps to the closest thing in line with the object you are moving.  If the closest thing is less than a document (not screen) pixel away (and within snapping tolerance) then it will snap to that over snapping to pixel boundaries.  It really is only doing what you ask it to do.

If you have pixel and grid snapping on, the two will work together - it's up to you to configure your grid so that it doesn't fight.

 

 

There is one additional thing to understand about "Force pixel snapping" - it will always happen if no other snapping occurs - it isn't restricted by the snapping Screen tolerance setting.  So, if you zoom right in, you'll see that you can align to other objects only if within snapping tolerance - and that includes Grid lines.  But, if you don't find a snap, your object will instead always snap to a pixel boundary.

 

Pixel snapping also works independently in X and Y axis - so it will allow you to align to an off-pixel object in X, then if there is no other snap in Y it will align the Y to pixel.

 

I've been trying every options quite a bunch of time. 

It's true to say that moving object to one perfect pixel is possible.

 

But on a document already created witch has other objects not aligned correctly, it's seems impossible de go back to pixel perfect movement.

 

And it's only one issue, cause the other pain issue is that if you resize let's say a square object from the corner, it will (with any configuration) get digits...

 

So as we are saying here, that is not pixel perfect.

 

Did you knew there is a "UI design" preset in the list of presets and that almost everything is checked on !

 

So please, try to understand people saying that it makes AD quite complicated to work with in a pixel perfect way. 

 

OR i'm still missing something, and that is so tedious to me that i might be totally dumb or maybe it really isn't clear. 

 

( i tried again every configuration before posting )

 

And don't get me wrong, i love AD and AP. And i think you guys did a great work here.

 

But as my everyday software to work with, not being able to get workaround for these things drive me crazy.

 

Thx


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

@Bento

 

I think the only thing to do here is for you to provide examples of where you are finding difficulties, and we can work through the best snapping options with you.

 

There are a lot of snapping options, because there are a lot of different types of user.  I've spent considerable time using the snapping engine and trying to tune it as best as I can.

 

There are competing or conflicting requirements that are always going to have to be addressed with options.  One such issue is that of how we deal with resizing constrained shapes (such as placed images) when you also apply pixel snapping. If you are strict about keeping the aspect ratio of your object, then you will always find that it ends up with either a partial pixel height or width when resizing.  So, what then?  Do we "correct" the object onto whole pixels and lose the original aspect ratio?  Pixel users would say yes, vector users would say no.  So, do we then add another option to address that?  People will then say even more, "there are too many options".

 

It's important to understand how Affinity differs from the likes of Photoshop, and perhaps Sketch.  Our document model is not limited to just raster layers, and whole pixel positions. We allow for raster and vector to live together, but that also means that raster objects can be positioned and sized like vector objects. In Photoshop, when you transform a pixel layer, the result is baked and you end up with a new pixel layer that lives in pixel space - and this is destructive to the original pixel layer.  In Affinity, our transforms are non-destructive - we don't bake to a pixel layer, unless you chose to re-rasterise you layer.  That does mean that transforms are free to be arbitrary.  If you rotate or shear an object, then its page size is likely to become partial pixel.  BUT, in Affinity you are then still able to correct your object back onto pixels with no loss of the original object data.

It all comes together when we rasterise for export, and you can see that using the Pixel preview modes.

 

The UI design preset is intended for people who are doing layout of pre-made objects or symbols. If you start with a fresh document, and use symbols that are already created with pixel sizes in mind (such as our iOS 10 assets), then all your placement will be on-pixel.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

@Bento

 

I think the only thing to do here is for you to provide examples of where you are finding difficulties, and we can work through the best snapping options with you.

 

There are a lot of snapping options, because there are a lot of different types of user.  I've spent considerable time using the snapping engine and trying to tune it as best as I can.

 

There are competing or conflicting requirements that are always going to have to be addressed with options.  One such issue is that of how we deal with resizing constrained shapes (such as placed images) when you also apply pixel snapping. If you are strict about keeping the aspect ratio of your object, then you will always find that it ends up with either a partial pixel height or width when resizing.  So, what then?  Do we "correct" the object onto whole pixels and lose the original aspect ratio?  Pixel users would say yes, vector users would say no.  So, do we then add another option to address that?  People will then say even more, "there are too many options".

 

The UI design preset is intended for people who are doing layout of pre-made objects or symbols. If you start with a fresh document, and use symbols that are already created with pixel sizes in mind (such as our iOS 10 assets), then all your placement will be on-pixel.

 

@Ben, 

 

I do understand what you mean and the complains that are coming form every community.

 

But i choosed to work with AD because it was advertised as a UI/UX pro software.

 

As an Art director and Web-designer, i do use pre-made assets from time to time. But most of the time i create them from scratch.

 

And YES you should have the option to break ("correct") aspect ratio (for digits) to stay "pixel perfect" , not because it's a good thing but because these are the standards we are constrain to work with.

 

In fact as Serif advertise AD as a UI/UX pro software, you should put a big red button that gets rid of all that pixel alignement feature, and makes us (web-designers) just a pixel perfect for whatever we do (moving/scaling/cropping/duplicating/equally spacing...). ;)

 

Well at list that is my point of view.

 

I think most of us comes from Fireworks and Photoshop (only speaking of web-designers) and we do work in pixel-based documents.

 

Again please don't take it bad i'm only giving my point of view (and maybe of some others here).

 

Best regards


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

While there are pros and cons for Serif's approach, I consider that the problem with this approach is that it represents a significant usage change compared to other software; and in this way it slows you down. Picture it like giving you a checklist you have to go through or keep in mind.

 

Mostly because all of the other apps keep vector "vector" and raster "raster"; while both Affinity's are built on the same vector-raster hybrid so effectively each app will have the others peculiarities ( raster-half pixel, vector-whole pixel ) unless tuned.

 

The bigger issue for me with this approach its that, at least for now, I found it very hard to trust that what its displayed in the app is similar to the final export which I think we all agree is something crucial in graphic software and that I am usually forced to double and triple check everything first ( worries which I never encountered in other software ).

 

My two cents. :rolleyes:


System specs: Win 8.1 Pro 64bit | AMD PhenomII X6 1055T @ 3.0Ghz | 16GB DDR3 @ 1600Mhz | WD10EZEX | GTX 960 4GB | Wacom CTL-672

Share this post


Link to post
Share on other sites

I understand the reticence to admit things are too complicated here, especially if the developers like Ben have put significant effort into the current way it works.

 

The issue for me is a user interface one.

 

It has been shown in this thread after much head banging, that with the right settings—and advanced knowledge of all settings—that you can get it to work "just right". But the settings are too many, too opaque, too obtuse. In short, it's not user friendly.

 

My desire is for the interface and thinking behind this/these features to be rebooted to be simplified. 

 

Sorry if that is not what the devs want to hear.  :ph34r:

 

Otherwise, I still love AD.  :wub:

Share this post


Link to post
Share on other sites

I know things are complicated, but that is a result of trying to satisfy the range of user requirements put to us.

 

The solution isn't to remove configurability.  That WILL annoy different users.  The focus on this thread seems to be only about pixel alignment, but there have been many other threads that have concerned snapping for layout and design.  We readdressed a number of snapping strategies in response to actual user requirements - such as alternatives to our Candidate system.  The consequence of this is more options.  We also moved some snapping logic into specific tools, such as the Pen/Node tool, in order to isolate some snapping behaviour and reduce the need for more general/generic options.

 

To mitigate for the range of options, there are the presets, which have been carefully selected based on the requirements of said users.  I'll add another preset which only has "Force pixel snapping" turned on, and everything else turned off.  You also have the ability to create your own snapping presets - so if you find a configuration you can work with, make a preset of it.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

The amount of snapping options got me confused at first as well, but it pays to get to know them properly.

 

@Ben: An equivalent to Illustrator's 'Align selected art to pixel grid' could be a huge timesaver as I wouldn't have to individually align x/y coordinates for nodes that have decimal values.

 

 

Keep up the good work!

Share this post


Link to post
Share on other sites

I do have plans for more snapping improvements.  One thing being a "correct to pixel" tool.  I se that as separate to general snapping because it would have the potential to resize objects at the same time as aligning them (should you need to align both edges to pixel).


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

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.