Jump to content
You must now use your email address to sign in [click for more info] ×

STILL BROKEN - Forced pixel alignment


Recommended Posts

  • Staff

Hi davidlower8,
Regarding the problems/issues shown in this last video, the cause is the misalignment of the artboard labelled homepage - actually this applies to all other artboards except the first one labelled logo - all of them are misaligned (non-integer coordinates and some also have non-integer widths and/or heights). Select each artboard layer in the Layers panel (except the first - labelled logo - which is already correct/aligned) and fix the X,Y coordinates for all of them in the Transform panel so they all have integer values. Also fix the widths and heights of the artboards with non-integer widths/heights. The slices (Export Persona) should then export with the correct dimensions/no gaps/misalignments etc.

When starting a project like this, where you begin with a single artboard, make sure you have Force Pixel Alignment enabled from the beginning and make sure to also disable Move by whole pixels as it's not necessary for almost all work, except pixel based artwork: designing small icons, optimising logos for small sizes and all other artwork where you need more control over the antialiasing). When duplicating the artboards (for the other pages) on canvas always make sure you do it pressing and holding cmd and dragging the artboard from his label on top left since it honours the snapping settings (force pixel alignment included). If you duplicate them using alt  instead Affinity Designer overrides the snapping settings and you easily end up with an artboard in non-integer coordinate values which then messes up all the exports. 

Regarding PDF's (edge line problems), this is the "original" issue I'm still checking and need to talk with the dev team.

Link to comment
Share on other sites

Hey @MEB thanks for the input and to be honest I am already aware of these corrections and work flows. The fact I have to go into all the artboards and double check they are whole pixel values AND all the other layers, just highlights (for me) this is broken. Second this is not a solid or good working solution. As the video clearly highlighted at the beginning of this thread. It does not matter the positioning of the artboard, meaning the artboard could be perfect. As soon as I add text - broken pixels are introduced. Export persona will then export gaps. That is a fact.  So in that previous example those images I exported were fractured pixels and so I had to re-arrange them to solid - this had nothing to do with the artboard.

When I am in the flow of designing I am copying, duplicating, resizing, repositioning - repeatidly. Having to constantly watch layers for fractured pixels is completely non-sensical. When I am done I want to be able to export slices. Since I am nearly always working with text to some level, ALL my slices will come out with extra white space. Even the snapping tool will align to fractured pixels introducing further fractured pixels to an otherwise solid pixel layer.

Your answer, for me, just clearly shows this work flow is broken. It is like yeast. As soon as a fractured pixel is introduced it gets into everything. I don't want to have to monitor for fractured pixels, it is a ridiculous workflow.

Forgive me if I am being tardy. I am just so frustrated and disappointed. I do NOT want to leave this product but I cannot keep checking layers and artboards for x-axis, y-axis, width and height values - making sure they are all solid pixels. Completely ridiculous.

Link to comment
Share on other sites

  • Staff

Hi davidlower8,
My reply above was to address the issues posted in the video on your previous post - the slice issues (in Export Persona) are caused by the misalignment of the artboards. The point of the suggestions I made there was to help avoiding checking the X,Y coordinates or width/heights all the time getting the artboards correctly positioned and duplicated from the start. This would prevent the issues shown in that video.

Affinity Designer wasn't developed just for UI/Web Design - the options we have cover a wider range of uses/areas and are more precise than tools designed specifically for UI/web design which only have to care about pixels. The video on your first post in particular deals with a different issue (related but a non-artboard issue) and is a reflect of this positioning: where most UI tools round the constrained scaling of the rectangle to whole pixels immediately (at the cost of minor distortion) we don't - we keep the proportions mathematically correct - and so the remaining decimal part introduced by the scaling generates the "antialiased lines/gaps" you are seeing - the text has nothing to do with the issue in the video: you will get the same result with or without text - although text also have its own antialiasing/optimisation issues (or lack of).

What I'm saying is, we would need to allow some error (the minor distortion I mentioned above) for the pixel alignment to take precedence over the mathematically correct scaled result which is what matters for UI/web design (this also applies to images, text, groups of objects). Currently we don't have any way to force this "mode" (other than the Force Pixel Alignment option to help when adjusting dimensions independently) so it's up to the user to ensure he gets these things right. I understand this is not ideal compared to a dedicated tool but it's what's possible at the moment. Hopefully things will get better as the development moves forward.

Link to comment
Share on other sites

Hi @MEB I appreciate everything you are saying and it is why I love affinity so much. My ONLY issue is export persona adding a gap. If we think about it I don't understand why this has to be so complicated. Can't export persona export slices at the native size instead of adding the gap? Does export persona have to export in solid pixels? This is the real problem. The debate of solid pixels, fractured pixels, and alignment is not the problem.

But if this issue can't be fixed or is not in the pipeline then that is a great shame.

Link to comment
Share on other sites

  • 2 years later...

Hey @MEB
I honestly am pretty annoyed by this problem myself. I've NEVER used a software (and I've used lots of different ones from CorelDraw :D,  Adobe-Stuff, Sketch etc.) that was so annoying on exporting! I design different elements for Newsletters, Blog, Social etc and have many ArtBoards for that. I ALWAYS have at least one of those off by .3 pixels or something. 

I honestly have no idea why this has to be that way and you can't just disable that globally! It's probably not really an issue for you if I switch over to another Software because this takes me 5min per project to go back and re-align all artboards to get it without a .X pixel value—because I bought it and there's no money loss for you. But despite everything I love about your work, this kills my patience more and more. 

Link to comment
Share on other sites

  • 2 months later...
On 8/5/2019 at 6:38 AM, MEB said:

Hi davidlower8,
Regarding the problems/issues shown in this last video, the cause is the misalignment of the artboard labelled homepage - actually this applies to all other artboards except the first one labelled logo - all of them are misaligned (non-integer coordinates and some also have non-integer widths and/or heights). Select each artboard layer in the Layers panel (except the first - labelled logo - which is already correct/aligned) and fix the X,Y coordinates for all of them in the Transform panel so they all have integer values. Also fix the widths and heights of the artboards with non-integer widths/heights. The slices (Export Persona) should then export with the correct dimensions/no gaps/misalignments etc.

When starting a project like this, where you begin with a single artboard, make sure you have Force Pixel Alignment enabled from the beginning and make sure to also disable Move by whole pixels as it's not necessary for almost all work, except pixel based artwork: designing small icons, optimising logos for small sizes and all other artwork where you need more control over the antialiasing). When duplicating the artboards (for the other pages) on canvas always make sure you do it pressing and holding cmd and dragging the artboard from his label on top left since it honours the snapping settings (force pixel alignment included). If you duplicate them using alt  instead Affinity Designer overrides the snapping settings and you easily end up with an artboard in non-integer coordinate values which then messes up all the exports. 

Regarding PDF's (edge line problems), this is the "original" issue I'm still checking and need to talk with the dev team.

Hi @MEB

Why can’t this be a default setting for new projects?

I have to redo a project, with over 30 art-boards, because of the 1 pixel gap problem. I’m creating vector brushes and the small pixel gap creates a line around the brushes. 

Thanks for your help,

Sam

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | 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.