Jump to content
MatthijsR

Creating a 1 px line in designer

Recommended Posts

Whenever I want to draw a 1px line, I use the pen tool (with shift). The registration of the 1px stroke is always centered on a pixel, resulting in a 2px 50% opaque (aliased) line. Changing the stroke alignment does not help so each time I draw a 1px line I need to move it a half pixel afterwards :(. What am I doing wrong?

 

Share this post


Link to post
Share on other sites

Hi MatthijsR,

Welcome to Affinity Forums :)

Make sure you have Snap to Grid and Force Pixel Alignment ticked in the Snapping Manager (menu View ▸ Snapping Manager...). You may want to enable the grid (menu View ▸ Show Grid) to help visualise the next step: now zoom in enough to see  the grid at a pixel level - if you move the Pen Tool around you will note that it will pick the center of pixels besides their intersections. Click when the point/snapping is on the center to place the nodes. This ensures the 1px lines will be pixel aligned with the grid.

Share this post


Link to post
Share on other sites

By default at regular zoom levels the snapping picks the intersections of the grid. Depending on the type of work you are doing you may be already working around a pixel grid zoom level (small icons for example). For those cases the above config will help. If you are working with webdesign/UI projects at a regular zoom levels you may want to change the Nudge Distance (in Affinity Preferences, Tools section) to 0.5px and use the arrow keys on your keyboard to quickly adjust the line position so it matches the pixel grid. For boxes set the the alignment to inside.

Share this post


Link to post
Share on other sites

Nudge distance to .5, that's a help! Thanks!

Wouldn't it make sense to apply the state of the alignment buttons to single line strokes as well? There wouldn't be an 'inside' or 'outside' but those could translate as 'above' or 'below' the grid line.

Share this post


Link to post
Share on other sites

A few users already suggested that but it maybe tricky to implement it a code level that way - what's above or below in a vertical line? I will pass/talk with the dev team as this is particularly useful for UI/web design and we really not offer an easy way to get there without some type of "workaround".

Share this post


Link to post
Share on other sites

Otherwise make a single line an object similar to boxes, etc. Property could be horizontal/vertical.

Or even as a repeat option so you have a line-fill-tool with 1 to n lines and gap space as properties.

Share this post


Link to post
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

Please note the Annual Company Closure section in the Terms of Use. 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.