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

Blurry lines in Affinity Designer


Recommended Posts

Hi there,

 

I bought Affinity Designer a few days ago. I have long been an advocate of Sketch, but really love what the Affinity line brings to the table.

 

There is one major drawback that I have been noticing though. As a UI designer I expect borders and lines to be as smooth and sharp as possible, but for whatever reason this is not the case in Affinity Designer. I'm wondering if this is normal, and if so could some one explain why. As an illustration program I would expect smoother lines.

 

Thanks,

 

-Mike

Link to comment
Share on other sites

  • Staff

Hi Mike,

 

Welcome to the forums!

 

This definitely isn't typical of Affinity Designer please could you attach an example file for me to look at?

 

C

Please tag me using @ in your reply so I can be sure to respond ASAP.

Link to comment
Share on other sites

  • Staff

You're seeing the effect of drawing on partial pixels vs. drawing on whole pixels. Look at your Transform panel with that rectangle selected and it will read out that it does not start on a whole pixel. Turn on 'Force Pixel Alignment' and you won't create items which are on partial pixels :)

 

Thanks,

Matt

Link to comment
Share on other sites

I am investigating this too and I am wondering what is happening. Mike Bonds sketch png is crystal clear and the stroke is black. When I try to do this in ADI get grey stroke and "blurry" as he said. I also did the force pixel alignment with starting at a whole pixel as you have told us to do.

Link to comment
Share on other sites

  • Staff

Hi MikeBonds, evtonic3,

You have to enable Snapping and check Snap to Grid in the Snapping Manager options (View ▹ Snapping Manager...).

You may also need to change the alignment of the shape's stroke to Inside or Outside in the Stroke width dropdown.

 

Take a look at this short clip. It's possible to control object's position in half or full pixels on the grid for full control.

Enabling Snap to Grid let's you control object's position in half pixels, clicking on Force Pixel Alignment in the Persona toolbar allows full pixel positioning both for Move and Node tools.

Link to comment
Share on other sites

  • 2 years later...

Nah, guys, it wont help!

I've tried all variants of drawing and snapping, but in every view mode (even in vector mode with 100% document zoom) - I have blurry edges...

I feel so much pain!!! 9_9
 

Here's the example of how does the button with 1px stroke hurts my eyes in vector view mode at 100% scale. Ouch!

597f2d4e777c5_vectorview100.jpg.4b944bfddd7a58d7a686dc256d462594.jpg

 

The same button in PS CC 2015.

ps.jpg.5d219977d5af89dbaa0f4ed4acb92b00.jpg

 


Here's the same object, but in pixel view mode, with all possible and proper snapping, as you may see...

Just compare the horizontal line - it is sharp and clean, while the vertical one stays blurred wherever I drag this little b:ph34r:ch (by whole pixel, or half, with or without snapping).

 597f2dc695077_pixelviewwithsnapping.jpg.4ecddf505fdd0a4d0202132a3dc279b4.jpg

 

As a summary - I can't see sharp edges anywhere, except vector view mode with the document scaled up to more than 300%.

 

Link to comment
Share on other sites

  • Staff

Hi impixeldude,
Welcome to Affinity Forums :)

Are you using artboards? If so, check the X,Y coordinates of the artboard in the Transform panel and set them to integer values. You need to change the number of Decimal Places for Units Types in Affinity Preferences, User Interface section to 6 to be able to see/check the decimal places in the Transform panel. To prevent this from happening make sure you have Force Pixel Alignment enabled from the start in the Snapping Manager.

Link to comment
Share on other sites

Hi, MEB! Thank you for response! 
I was checking the coordinates both of an object and artboards. All settings are set by defaults (except showing lines and text in points - they are all in pixels)
Snapping turned on aswell. 

settings.jpg.1635c2cc7fa42ebf383a4891060041e7.jpg).snapping.jpg.602d09ea7f0e5bcbcf0265687b1aca4a.jpg

I've been experimenting with drawing objects with the strokes aligned to different sides (like you said here earlier) and came to conclusion, that "inside" and "outside" alignment gives the most desirable result. "Center" makes edges blurry anyways. 

 

But as for the snapping - I'm still having some questions :)

With Force pixel alignment and Move by whole pixels options turned on, I'm still getting decimal values in XY coordinates, but this happens randomly.

Some rectangles have values like xx,5. While the other can have even xx,8 or alike.

So, does snapping work fine for me or am I misunderstanding the way it is working?

objects.jpg.bb5af4a7b5874cfa1aeb0709f1f38e70.jpg

Link to comment
Share on other sites

  • Staff

Hi impixeldude,
There's a few situations where other snapping options may interfere with full pixel alignment. For example if you have a rectangle with 21 px width and have Snap to object bounding boxes and Include bounding box mid points in particular enabled, other objects may snap to the middle of that box which will give you a 0.5 pixel coordinate as a result (since the width of the box is not an even value). So disabling it in the Snapping options will prevent those situations as these options have priority over pixel alignment.

Move by whole pixels does exactly what it says and moves (transforms actually) an object an integer value. This means that you have it enabled and are trying to scale a text box which does NOT have an integer width or height, it will always end up with non-integer values as coordinates, because Move by whole pixels forces it to move or scale an integer value in addition to the decimal value that it already possess. This option should only be enabled if you have objects that use sub-pixel coordinates (like icons for example where you may want to keep the sub pixel values - the decimal values- intact) when moving or scale them.

Link to comment
Share on other sites

  • 2 years later...

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.