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

Working pixel perfect with Designer 2 still does not work which is super frustrating for GUI work


Recommended Posts

17 minutes ago, tudor said:

Enable snapping and pick the "Pixel work" preset from the snapping menu. Then try drawing shapes.

well that makes no difference whatsoever - it is just 'force pixel alignment' which does not work visually (lines are smudged over 2 pixels or otherwise not pixel snapped).

I actually thought this worked in a v1 demo when I tried, so don't know if v2 issue...

Link to comment
Share on other sites

9 minutes ago, tudor said:

What exactly are you trying to draw?

So if you draw diagonal lines they look good at 1 pixel wide - like solid black with some anti-aliasing. But all horizontal or vertical lines are blurred across 2 pixels in a poor way.
So it is mainly that it seems.

1 pixel line examples:
 

lines.png

Edited by andypoly
Link to comment
Share on other sites

1 minute ago, andypoly said:

So if you draw diagonal lines they look good at 1 pixel wide - like solid black with some anti-aliasing. But all horizontal or vertical lines are blurred across 2 pixels in a poor way.

You need to learn the basics of drawing vector shapes (these rules apply to all drawing apps):

A stroke applied on open paths (lines) will always be aligned to the center of the path. Therefore, if you want to perfectly align a 1px horizontal or vertical line to the pixel grid, you have to move the line to .5 x,y coordinates. 

 

image.gif.948220db8440f8f45a30d48a6c08255f.gif

 

By default, the stroke of a closed path (a rectangle or any other shape) is also aligned to the center of the path. If you want to align it to the pixel grid, you have to set it to be aligned to the inside or the outside of the path.

image.gif.f5a367422874d91a01f67fad2a7a9b68.gif

Then you have to learn how to use the snapping options available in Designer:

  • Start with the "Pixel work" preset which will make sure the shapes you draw are aligned to the pixel grid.
  • If you frequently have to move 1px lines aligned to .5 pixels, enable the "Move by whole pixels" option. Otherwise leave it off.
  • Use the grid together with the "snap to grid" option – you can set a 1 px grid. Or even a 1px grid with 2 divisions, if you have to move lines aligned to .5 pixels.
Link to comment
Share on other sites

1 hour ago, andypoly said:

So if you draw diagonal lines they look good at 1 pixel wide - like solid black with some anti-aliasing. But all horizontal or vertical lines are blurred across 2 pixels in a poor way.
So it is mainly that it seems.

1 pixel line examples:
 

lines.png

So the problem is not necessarily the rectangles, it's the strokes... it is working as intended.

1px CENTERED on whole numbers will not render as 1px. Your issue is your coordinates. The best way to think about it, is the line/stroke itself is on whole coordinates, but it has one foot out the door, one foot in.. it will have half a pixel on one side, half on the on the other... so it has to be centered .5px up/down however you need it... but my solution:

What I do for UI for odd numbered straight lines:

For example, 1px thick line, I make a RECTANGLE of 1px and then pixel snap it. It is basically a stroke already converted to curves. It will look correct and not require you to make it manually.

If you were to do 2px stroke, it would snap fine obviously because it will be 1px/even number off-center both directions.

For a square with a stroke, I align it to pixel grid/snap as normal with whole pixel dimensions, and then I do a 1px stroke. The kicker, you MUST set stroke to outside... otherwise both edges will fall into half pixel territory.

v2_stroke-outside.gif.87c4cf373e60241365c152b5536c743a.gif

Video.mkv

Microsoft Windows 10 Home (Build 19045)
AMD Ryzen 7 5800X @ 3.8Ghz (-30 all core +200mhz PBO); Mobo: Asus X470 Prime Pro
32GB DDR4 (3600Mhz); EVGA NVIDIA GeForce GTX 3080 X3C Ultra 12GB
Monitor 1 4K @ 125% due to a bug
Monitor 2 4K @ 150%
Monitor 3 (as needed) 1080p @ 100%

WACOM Intuos4 Large; X-rite i1Display Pro; NIKON D5600 DSLR

Link to comment
Share on other sites

yeah... thanks guys.
At least the rectangles work with non-center align.

Why don't they just have a snap to pixel-center at least?

Ultimate solution is snap to whole or half pixels depending on odd/even pixel-width of paths I guess?


An alternative might be to do all the work at 2x pixel size and scale down on completion!! At least then there is no half pixel snap, you have 2/4/6 etc. line sizes and can use center alignment!! Unfortunately, anti-aliasing not good...

Edited by andypoly
Link to comment
Share on other sites

28 minutes ago, andypoly said:

yeah... thanks guys.
At least the rectangles work with non-center align.

Why don't they just have a snap to pixel-centre at least?

Ultimate solution is snap to whole or half pixels depending on odd/even pixel-width of paths I guess.


An alternative might be to do all the work at 2x pixel size and scale down on completion!! At least then there is no half pixel snap, you have 2/4/6 etc. line sizes and can use centre alignment!!

Honestly, once you learn how these details work out in reality, it's faster to just to preplan and know when certain techniques are applied. Work with your tools, not around them. It becomes second nature really quickly and it just becomes part of the process. I use a grid system, so columns, gutters, margins, padding (especially for web...), that eliminates guesswork and much of the rescaling work. Especially since it makes the math for you ahead of time and because you set the columns/gutters, you can set it for always being an even number. Same with icons. My hardest decision is determining the height of something, but my widths are bound by the column span however many I need... and that's all precalculated in the wireframe phase.

The @bold sounds painful, potentially introduces errors/flaws in the final and I think it's better to work with the tools, then give the program final input as the designer (as it's intended). Just remember at the end of the day, snapping and things like that, while certainly helpful for reducing carpal tunnel, they're the program managing the design, not you. If you feel confined by the tools, it's much more likely you're allowing it to place those limitations on your workflow. If what you're doing now is too much a headache, then maybe the way you are working is flawed. I would not automatically assume the tools are the answer. Put it this way, there may be another program that has these helpers added, but surely you'll run into other issues with how it handles things and have to work around. (Edit) But if it feels better to work in that program overall, then I do think it's better to switch in those case.. So my point: there is no tool, no program on planet Earth that can completely replace the role of the person who can tell ultimately what looks good... so don't chase tools, chase solutions...

That said, I think that snapping to pixel while rescaling can be an option for pixel artists who work with illustration-type stuff... but for UI, it's flawed as @tudor's graphic shows when scaling up/down... it still requires manual hinting work.

Microsoft Windows 10 Home (Build 19045)
AMD Ryzen 7 5800X @ 3.8Ghz (-30 all core +200mhz PBO); Mobo: Asus X470 Prime Pro
32GB DDR4 (3600Mhz); EVGA NVIDIA GeForce GTX 3080 X3C Ultra 12GB
Monitor 1 4K @ 125% due to a bug
Monitor 2 4K @ 150%
Monitor 3 (as needed) 1080p @ 100%

WACOM Intuos4 Large; X-rite i1Display Pro; NIKON D5600 DSLR

Link to comment
Share on other sites

My basic "pixel perfect" setup:

aph_pixel_perfect_setup.png.299a957711de52cb4e423f414f84dfc1.png

That's in APh 1 – I'd have to reboot the Mac to Catalina to run v2 – but the principle is the same for all Affinity apps in all versions.
Optionally I might also enable "Snap to Grid" because with this setting, the pixel grid is primarily a visual help.

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

1 hour ago, andypoly said:

At least the rectangles work with non-center align.

I agree that lines should also have a non-centered option.

But…

1 hour ago, tudor said:

if you want to perfectly align a 1px horizontal or vertical line to the pixel grid, you have to move the line to .5 x,y coordinates. 

… you don't have to do that manually at all.
Simply create the appropriate grid and snap objects to the half pixel divisions, here blue in my screenshot:

aph_pixel_perfect_setup_half_px.png.bded6324b1584a86772737977969804d.png

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

24 minutes ago, loukash said:

I agree that lines should also have a non-centered option.

But…

… you don't have to do that manually at all.
Simply create the appropriate grid and snap objects to the half pixel divisions, here blue in my screenshot:

aph_pixel_perfect_setup_half_px.png.bded6324b1584a86772737977969804d.png

Wonderful! I've done the same in AI. It's rare I need a half pixel grid though as I'm usually working with curves a lot.

There's also this preference as well if people just need to nudge occasionally using keyboard arrow keys, etc. Shift+ arrow keys can be adjusted to something other than 10px. (It's also useful for hinting delicate curves in some cases at tiny resolutions)

221123_nudge-occasionally.jpg.2f8324e6a66c7850ca7628b73027fc07.jpg

Microsoft Windows 10 Home (Build 19045)
AMD Ryzen 7 5800X @ 3.8Ghz (-30 all core +200mhz PBO); Mobo: Asus X470 Prime Pro
32GB DDR4 (3600Mhz); EVGA NVIDIA GeForce GTX 3080 X3C Ultra 12GB
Monitor 1 4K @ 125% due to a bug
Monitor 2 4K @ 150%
Monitor 3 (as needed) 1080p @ 100%

WACOM Intuos4 Large; X-rite i1Display Pro; NIKON D5600 DSLR

Link to comment
Share on other sites

3 hours ago, debraspicher said:

There's also this preference as well if people just need to nudge occasionally using keyboard arrow keys, etc. Shift+ arrow keys can be adjusted to something other than 10px. (It's also useful for hinting delicate curves in some cases at tiny resolutions)

Yep. For print I'm nudging 0.1 mm and 1 mm

Also, when you click into a Transform panel field, arrow-up/down will round up/down to integer, option-arrow-up/down in 0.1 steps, shift-arrow-up/down in 10 steps.
Click-drag-left/right the "X:/Y:/W:/H:/R:/S:" labels will increase/decrease the value in ±1 steps, retaining existing decimal values. (I think "R:/S:" is currently broken in v2, I've seen it reported though.)

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

  • 3 weeks later...

Look at the UI within both version 1 and 2 of the Affinity Suite.

 

Do you really think Affinity understands the needs and desires of UI designers for pixel level consideration?

 

If you want to do pixel level considerate UI design; it's Sketch or Photoshop, or PhotoPaint if you're adventurous. 

Or an old copy of Fireworks.

Link to comment
Share on other sites

6 hours ago, fde101 said:

Seems like the most straightforward option would be a checkbox (possibly a stroke property, possibly a document property) to cause the stroke alignment setting to apply to open strokes in addition to closed ones?

An open path does not have an inside or an outside, therefore the stroke can only be aligned to the center of the path.

Link to comment
Share on other sites

28 minutes ago, tudor said:

the stroke can only be aligned to the center of the path.

Not quite true.  An open path still has a direction - one of the nodes is the first node.  As an example, if the stroke is oriented from the left side of the canvas toward the right, I could define the side of the path toward the "bottom" to be the "inside" and the top to be the "outside", then simply rotate or otherwise match that to whatever orientation the stroke actually has.

The reverse definition could also work - as long as there is consistency.

Link to comment
Share on other sites

Just now, fde101 said:

Not quite true.  An open path still has a direction - one of the nodes is the first node.  As an example, if the stroke is oriented from the left side of the canvas toward the right, I could define the side of the path toward the "bottom" to be the "inside" and the top to be the "outside", then simply rotate or otherwise match that to whatever orientation the stroke actually has.

But Affinity is not adhering to this convention.

So to be even more precise:

An open path does not have an inside or an outside within Affinity Apps as of V2.0.0

 

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

1 hour ago, fde101 said:

An open path still has a direction - one of the nodes is the first node.  As an example, if the stroke is oriented from the left side of the canvas toward the right, I could define the side of the path toward the "bottom" to be the "inside" and the top to be the "outside", then simply rotate or otherwise match that to whatever orientation the stroke actually has.

Yeah, it sounds easy, but it's not. Ask yourself why none of the other vector drawing apps (big and small players like Illustrator, CorelDraw, Sketch, XD, Figma, Vectornator...) offer support for changing the stroke alignment on open paths.

VectorStyler is the only exception that I know of. 

 

Link to comment
Share on other sites

Why should it be difficult to implement that? FontLab has that feature too. — I suppose the main difficulty lies rather in the export formats than in the implementation in the app itself. I could be mistaken, but I believe SVG does not have a general stroke-alignment property yet that would also be applicable to open paths.

FontLab.gif.23a5b5a6495b23a592937c75e2d51102.gif

 

Link to comment
Share on other sites

25 minutes ago, A_B_C said:

I suppose the main difficulty lies rather in the export formats than in the implementation in the app itself

this.

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

20 hours ago, deeds said:

Look at the UI within both version 1 and 2 of the Affinity Suite.

 

Do you really think Affinity understands the needs and desires of UI designers for pixel level consideration?

 

If you want to do pixel level considerate UI design; it's Sketch or Photoshop, or PhotoPaint if you're adventurous. 

Or an old copy of Fireworks.

Here's hoping they're just still overwhelmed and we see changes in coming updates, but I get what you're saying here, deeds.

Microsoft Windows 10 Home (Build 19045)
AMD Ryzen 7 5800X @ 3.8Ghz (-30 all core +200mhz PBO); Mobo: Asus X470 Prime Pro
32GB DDR4 (3600Mhz); EVGA NVIDIA GeForce GTX 3080 X3C Ultra 12GB
Monitor 1 4K @ 125% due to a bug
Monitor 2 4K @ 150%
Monitor 3 (as needed) 1080p @ 100%

WACOM Intuos4 Large; X-rite i1Display Pro; NIKON D5600 DSLR

Link to comment
Share on other sites

4 hours ago, A_B_C said:

I believe SVG does not have a general stroke-alignment property yet that would also be applicable to open paths.

Last I checked CSS did not have one, while SVG did have one for closed paths then deprecated it with the intention of dropping support for it.

All said, limiting features based on what is possible in an export format is not very useful when there is such a broad range of export formats to work with, all of them with their own quirks and capabilities.  If a feature is not supported in an export format, the results can be rasterized, or adjustments can be made in order to achieve the same effect (such as shifting the position by a half pixel or whatever is needed upon export).

Link to comment
Share on other sites

7 hours ago, A_B_C said:

I suppose the main difficulty lies rather in the export formats than in the implementation in the app itself.

That’s easy to solve: VectorStyler automatically converts those strokes to outlines when exporting.

I guess the main reason is that it makes it difficult for the software to calculate and draw the stroke alignment in many situations involving complex paths. In other words: it’s complicated to get it right, so it’s not worth it.

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.