tudor Posted November 23, 2022 Share Posted November 23, 2022 1 hour ago, pixelworker said: By the way, for other units like mm or pt there is no real force snapping at all. Even setting a 1mm grid does not work really well. Have you tried the "snap to grid" option? Quote Link to comment Share on other sites More sharing options...
andypoly Posted November 23, 2022 Share Posted November 23, 2022 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... Quote Link to comment Share on other sites More sharing options...
tudor Posted November 23, 2022 Share Posted November 23, 2022 2 minutes ago, andypoly said: 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). What exactly are you trying to draw? Quote Link to comment Share on other sites More sharing options...
andypoly Posted November 23, 2022 Share Posted November 23, 2022 (edited) 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: Edited November 23, 2022 by andypoly Quote Link to comment Share on other sites More sharing options...
tudor Posted November 23, 2022 Share Posted November 23, 2022 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. 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. 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. debraspicher, andypoly, garrettm30 and 4 others 4 3 Quote Link to comment Share on other sites More sharing options...
debraspicher Posted November 23, 2022 Share Posted November 23, 2022 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: 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. Video.mkv andypoly and Tia Lapis 1 1 Quote Link to comment Share on other sites More sharing options...
andypoly Posted November 23, 2022 Share Posted November 23, 2022 (edited) 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 November 23, 2022 by andypoly debraspicher 1 Quote Link to comment Share on other sites More sharing options...
debraspicher Posted November 23, 2022 Share Posted November 23, 2022 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. Quote Link to comment Share on other sites More sharing options...
loukash Posted November 23, 2022 Share Posted November 23, 2022 My basic "pixel perfect" setup: 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. debraspicher and Old Bruce 2 Quote 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 More sharing options...
loukash Posted November 23, 2022 Share Posted November 23, 2022 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: debraspicher, ashf, affinian and 1 other 4 Quote 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 More sharing options...
debraspicher Posted November 23, 2022 Share Posted November 23, 2022 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: 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) loukash 1 Quote Link to comment Share on other sites More sharing options...
loukash Posted November 23, 2022 Share Posted November 23, 2022 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.) Quote 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 More sharing options...
Msmeraglia Posted December 13, 2022 Share Posted December 13, 2022 all i can say to all of this is i agree and pixel perfect work is still infuriating and something should be done about it even if its an entirely new workflow. C'mon MS Paint had this down in Win95. I get that its a vector art program, but to have a pixel mode that cant do pixel work defeats the point of pixel mode. pixelworker 1 Quote Link to comment Share on other sites More sharing options...
deeds Posted December 13, 2022 Share Posted December 13, 2022 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. debraspicher 1 Quote Link to comment Share on other sites More sharing options...
fde101 Posted December 13, 2022 Share Posted December 13, 2022 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? Quote Link to comment Share on other sites More sharing options...
tudor Posted December 13, 2022 Share Posted December 13, 2022 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. Quote Link to comment Share on other sites More sharing options...
fde101 Posted December 13, 2022 Share Posted December 13, 2022 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. A_B_C 1 Quote Link to comment Share on other sites More sharing options...
NotMyFault Posted December 13, 2022 Share Posted December 13, 2022 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 Quote 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 More sharing options...
fde101 Posted December 13, 2022 Share Posted December 13, 2022 9 minutes ago, NotMyFault said: An open path does not have an inside or an outside within Affinity Apps as of V2.0.0 Correct, which is why I suggested this as a feature addition - an option to cause it to behave that way. A_B_C 1 Quote Link to comment Share on other sites More sharing options...
tudor Posted December 13, 2022 Share Posted December 13, 2022 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. Quote Link to comment Share on other sites More sharing options...
A_B_C Posted December 13, 2022 Share Posted December 13, 2022 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. Quote Link to comment Share on other sites More sharing options...
NotMyFault Posted December 13, 2022 Share Posted December 13, 2022 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. A_B_C 1 Quote 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 More sharing options...
debraspicher Posted December 14, 2022 Share Posted December 14, 2022 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. deeds 1 Quote Link to comment Share on other sites More sharing options...
fde101 Posted December 14, 2022 Share Posted December 14, 2022 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). A_B_C, loukash and deeds 3 Quote Link to comment Share on other sites More sharing options...
tudor Posted December 14, 2022 Share Posted December 14, 2022 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. A_B_C 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.