Jump to content
antonkudin

[Fixed] Layer pixel alignment issues

Recommended Posts

@Ben I totally agree this should be separate as it will deform your objects. It is a function that should be used with care.

 

It's been asked by few web designers, 'cause we need to work with pixel perfect X and Y and H and W since the web doesn't understand decimals. For vector illustration needs it's not really usefull or wanted.

 

'Align selected art to pixel grid' would be to activate, "Force Pixel Alignement" and "Snap to grid". These option already exists, dont forget to chek Artboard X and Y if you use artboard when you duplicate them. 

 

And when duplicating (objects, or artboards) use "cmd" or "ctrl" instead of "alt", 'cause it breaks snapping and whole pixel.

 

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

Hi guys,

 

I noticed that when your artboard's x or y coordinates has decimals in them, you can run into some weird issues when creating pixel perfect objects.

Here's an example of what I mean.

 

Here are the snapping options I use

post-43817-0-16236600-1494401422_thumb.png

 

This is the second artboard where the y offset is using decimals

post-43817-0-29650400-1494401406_thumb.png

 

This is the first object which looks good in pixel view mode and was snapped into place using the mouse

post-43817-0-69218900-1494401414_thumb.png

 

This is the second object where coordinates were used to create a perfect shape, but it is shown off pixel.

post-43817-0-80464600-1494401419_thumb.png

 

When you export your pixel perfect artwork and you haven't noticed that your artboard is using decimals for its x or y coordinates, you are going to run into subpixel issues where you would not expect them. Exporting to svg, pdf or eps for Illustrator will quickly show you if anything is wrong.

 

Here's the actual file where you can test the issue yourself.

artboard offset.afdesign

 

Just thought I'd share this as this can save you some headaches with your pixelwork.

 

Regards,

Karel

 

Share this post


Link to post
Share on other sites

Hi guys,

 

I noticed that when your artboard's x or y coordinates has decimals in them, you can run into some weird issues when creating pixel perfect objects.

Here's an example of what I mean.

 

Here are the snapping options I use

attachicon.gifsnapping options.png

 

This is the second artboard where the y offset is using decimals

attachicon.gifartboard2 decimal offset.png

 

This is the first object which looks good in pixel view mode and was snapped into place using the mouse

attachicon.gifartboard2 object 1 snapped with mouse.png

 

This is the second object where coordinates were used to create a perfect shape, but it is shown off pixel.

attachicon.gifartboard2 object 2 perfect x y coordinates.png

 

When you export your pixel perfect artwork and you haven't noticed that your artboard is using decimals for its x or y coordinates, you are going to run into subpixel issues where you would not expect them. Exporting to svg, pdf or eps for Illustrator will quickly show you if anything is wrong.

 

Here's the actual file where you can test the issue yourself.

attachicon.gifartboard offset.afdesign

 

Just thought I'd share this as this can save you some headaches with your pixelwork.

 

Regards,

Karel

 

@Karel,

You should read my message again, the weird pixel thing is well known issue (well actually it's a feature).

If you don't place your artboard pixel perfect it will add decimals and those decimals will add an extra pixel when exporting (mainly because subpixel don't exist in pixel world.

 

And i will quote myself ,

 

 

And when duplicating (objects, or artboards) use "cmd" or "ctrl" instead of "alt", 'cause it breaks snapping and whole pixel.

 

 

Regards, Ben


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
On 4/7/2017 at 11:31 AM, MEB said:

Hi matt,

You forget to display the Snapping Manager panel which is important here...

[EDIT] Seems you are using the UI Design preset... Disable Snap to grid to get the behaviour you want.

 

Guys, the App is overly complex. Like him, I just create a new file, set it to UI design and Snap to grid is set by Affinity by defaults. So Affinity provides wrong presets and nobody seems to think it's something to fix?

 

We are your customers. Not some geeks using open source software done by volunteers. I want to do UI Design, I should create a new file and pick UI Design preset and be done. If presets set the App to an incorrect setup, then Affinity is to blame and should reconsider their way to address their customer needs. This App is not new anymore and should be mature. Yet, every designer I meet has crazy issue on a simple thing: aligning pixel which is the basics of UI design.

 

Quote

If so select the UI Design preset then uncheck Snap to grid. Additionally you can also disable Move by Whole Pixels although this is not really necessary assuming you create everything with integer values.

 

UI Design is done with grid system. So how disabling snap to grid is even a correct fix for anything? How can anybody at Affinity think that move by whole pixel is not assuming that everything should be integer values when ALL your customers do. There is a serious gap between the ivory tower at Affinity and the real world of professional. It just feels like the grid and the pixel alignment features were done independently and it was discover at the shipping time that they don't work together correctly.

 

What Affinity should say is "We are going to fix this and in the meantime, those are the short term fixes you can do to mitigate the problem". Instead we get a Steve Jobs like reply "You are using it wrong".

 

Sorry for the tone of the reply but I am an affinity customer since day one, I used all the beta and purchased it directly when it was released and this should be a solved problem by now. Instead, everybody is still arguing on the forum while no product manager is doing anything to fix the issue. As a result, I am now considering to purchase Sketch despite I didn't want to.

Share this post


Link to post
Share on other sites

@Dams

now that you know how it works 

why would you buy scetch 

 

 

Just like 

On 10.5.2017 at 9:50 AM, kareldries said:

@Bento

 

Thanks, I missed that, seems to work great.

 

Regards,

Karel

 

Cheers 


 

 

Share this post


Link to post
Share on other sites
5 minutes ago, MBd said:

@Dams

now that you know how it works 

why would you buy scetch 

 

 

Cheers 

 

Because I don't want to explain endlessly to our new team member the work arounds?

To get something that works by default with the presets provided by the App?

To get a tool optimised on UI design so I don't waste my time skimming forums to get basic things working like aligning pixels?

So I can use a grid system based with pixel perfect UI?

 

Affinity made the choice to create a jack of all trade tool. Like said earlier, all requirements given to devs are conflicting with each others. But UI designers do not care about other jobs or internal issue created by product managers, they just want their job done. They are plenty of way to solve this problem like creating specific modes or persona for each job, but nope. You get a confusing UI with mixed vocabulary from all jobs which nobody interpret the same way.

 

For now, Affinity is still a pain to work with in UI and the pixel alignment is just one of them. I could say add more on symbols, the lack of plugins that all the industry is using, the fact that Apple is also providing their UI elements for PS and Sketch only, etc... This is just sad because on a lot of ways, Affinity is really good, but the issue is that the really good stuff is high level while the basics are not covered.

 

Also the way of Affinity handles customer feedbacks is starting to get on my nerves. A product is also a relationship with the company and trust. I left Adobe for this exact reason. Seeing Affinity states everything is simple while their customers says it's not is just showing no introspection at any level. A very bad signs.

 

Tschüss ;)

Share this post


Link to post
Share on other sites

Hi Dams,

Depending on the requirements snap to grid may also be useful for UI Design that's why it's enabled by default. If you are not happy with the default UI preset you can create your own clicking the small menu icon in front of the Presets dropdown in the Snapping Manager after setting the options as you want.

 

The problem here and what i believe is confusing users is that when Snap to Grid is enabled and you are using the Automatic Grid option in the Grid and Axis Manager Affinity will snap to/align to half pixels. Most users assume that Snap to Grid (in the Snapping Manager) by itself makes Affinity snap to integer pixel (or points) values only -

which is not the case. This depends on the type of grid you have set up in the Grid and Axis Manager. The Automatic Grid  - which is selected by default - snaps to half pixels (or points) besides the integer values by design. So if you want to align to integer values values only you must disable the Automatic Grid and set you own manual grid with the appropriate number of divisions/subdivisions.

 

I will try to write an article explaining those options since this seems to be causing a lot of confusion. If you are wondering why the Automatic Grid also snaps to half pixels, the reason is that for certain UI work - like designing icons, or when optimising/working with small text for web output for example - having sub pixel accuracy helps to better control the antialiasing and thus improving the results you get.

Share this post


Link to post
Share on other sites

Yes please, an article would be useful. However, I still think that presets should be correctly set and corrected in future updates to avoid confusion.

 

Cheers.

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

×