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

I seem to remember in AI, we needed plugins to make hinting easier with auto-moving points post-rescale, just as an example. AI needed way too many damn plugins, imo, to do what should've been basic things. So no program is perfect I have found. If it doesn't work the way you need it to work, then I would suggest to move to a program that won't drive you crazy than wait forever for this one to tailor to your workflow. No program can make everyone happy, unfortunately.

Link to comment
Share on other sites

4 minutes ago, debraspicher said:

AI needed way too many damn plugins

Yes, I've been using quite a few freebies as well. But my main tool was InDesign, and so until I upgraded to CS5.5, I just couldn't work without the Page Control plugin to get variable pages sizes inside one document. And don't let me even start about the old AI fanatics' "one-page-per-document-rules-them-all-so-shut-up-you-freehand-loving-pussies" dogma! :D 

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

37 minutes ago, debraspicher said:

That's still vague. I'm not sure how you work, so that can't make clear what your actual needs are.

"Correct manually" doesn't make it clearer either because that is part of the final process. That's your words. Expecting a tool to do all the hinting work will produce flawed work. For example, scaling a logotype that was produced at higher pixel res (hinted) down to a really reduced resolution for say other usages, it would not look good without manual hinting each character individually.

My needs are simple. When creating assets or guis I need a to work pixel perfect. That means I need a way that Affinity always respects and forces integer pixel values. Force pixel alignment does not work in all cases.

Affinity is working with a higher precission means I need to be super carefull not to be between pixels, which results in aliasing for pixel rendering.

I can't remeber any other software which makes this so complicated and time consuming.

Link to comment
Share on other sites

40 minutes ago, loukash said:

Fair enough. I don't think that anybody here denies that dealing with pixels in Affinity apps can be quite a p.i.t.a. sometimes. So I'm offering facts about the current state, how to work with it and around it. ;) 
If that's a serious issue, then you may want to use a different tool until Serif gets all this improved.

😉 Thanks for all the input. That's true.

It's a serious issue and I'm at a point thinking that Affinity might not the right product for me. Which is strange because I consider pixel perfect workflow a totally basic thing. 

I like Serif a lot and would like keep using their products. That's why I try to bring it up again. I tried it long time ago without any success.

 

Link to comment
Share on other sites

1 hour ago, loukash said:

For Artistic Text, only the baseline position remains fixed. Not the bounding box.
The bad news is that unlike e.g. in Illustrator, there is no visible baseline with nodes in artistic text frames that we could grab with the Move tool and align to pixels. Sad but true. That definitely needs improvement. A workaround would be switching to Publisher and use its Baseline Grid in pixel steps to align text by baselines. It should work, but you don't have the Pixel Preview in APu, so you'd need to switch back and forth in APu's personae.

Something I do sometimes to align Artistic Text in Designer — since Designer lacks the Baseline Grid feature — is to create a Grid in Advance Mode, set the First Axis (vertical) to the width of the canvas (so there is no visible vertical grid) and the Second Axis (horizontal) to my baseline grid. Although there is no visual indicator of the text baseline, the baseline does snap to the grid.

I don't know if this is a useful approach in a production environment, but it is an option.

Link to comment
Share on other sites

One point I do not understand.

The suggested manual hinting at subpixel level is super dangerous and I want to avoid it at all cost, because same characters will look differently. And "a" should always look like another "a". The differences by subpixel movement on the raster rendering for small and normal font can be quite big.

 

 

 

Link to comment
Share on other sites

1 hour ago, pixelworker said:

And "a" should always look like another "a".

Adjust every occurence of an "a" to the approximately same subpixel position.
Affinity doesn't have any automatic tools to do that for you (yet). The typographical tools are there though.

However…

In general, it's easier to work with text converted to curves rather than with live text. Then you can align every character individually and precisely.

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

Thanks for the explanation. That's a drawback. But good to know that I'm not just to stupid to find the right option. :)

Maybe it's a different use-case. I can imagine doing that for a headline in single image. But for gui design this is not a workflow that is possible. Aligning front at multiple document and at many places all the time is not a possible workflow. It'd take ages.

I need to edit text often so live edit is a requirement.

That said, for this use-case text frames are a solution which work ok. They do not not start on subpixel level and font looks the same all the time.

By the way. When the artistic text tool started always on the pixel grid with "force pixel alignment" active it would not be a problem.

In general, I'm a bit disillusioned currently. I would like to see a bit communication by Affinity about the problem.

Link to comment
Share on other sites

2 hours ago, pixelworker said:

I need to edit text often so live edit is a requirement.

You may want to use fonts that are optimized for display.
As much as I find Arial a disgustingly ugly font in print, at certain small sizes it looks very good on screen, unlike e.g. Helvetica at the same sizes.
On MacOs, system fonts like Lucida Grande or Menlo are also perfectly optimized for screen at small sizes with antialiasing.

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

4 hours ago, pixelworker said:

The suggested manual hinting at subpixel level is super dangerous and I want to avoid it at all cost, because same characters will look differently. And "a" should always look like another "a". The differences by subpixel movement on the raster rendering for small and normal font can be quite big.

You need Pixel Fonts for this. You need to have height of the font in Pixels not points.

455099145_ScreenShot2022-11-22at11_56_51AM.png.a9fd4abad5e701ce2b4468896659cb10.png

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.0 | Affinity Photo 2.4.0 | Affinity Publisher 2.4.0 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

I appreciate your help. But I think you got it wrong with the issue of font rendering without locking to the grid

It's not about the font. It's about that a font gets a different raster representation when moved by by non integer pixel values. This creates (different) aliasing.

To give you an example.

- Use Artistic text "abcdefg" and place it at X (100px) Y (100px) with font size 10px. Use any font you like.

- Copy it below that you see both.

- Go to transform panel and make sure that the first one starts at integer pixel values (100; 100).

- Change the X of the second to non integer value (x.7).

- Make sure to use view mode pixel or export it as an image.

The result is that both texts have a different outcome on the pixel grid and thus look differently. This is obviously mostly an issue for exports to screen resolutions (90 - 200ppi) obviously.

This will be especially obvious when you use font with perfect pixel hinting like the examples above. There is no solution other than respecting the pixel grid when "force pixel alignment" is active.

 

 

Link to comment
Share on other sites

24 minutes ago, pixelworker said:

moved by by non integer pixel values. This creates (different) aliasing

7 minutes ago, pixelworker said:

The result is that both texts have a different outcome on the pixel grid and thus look differently.

Of course. That's the logic of subpixels.
To avoid it, you must align both texts to the same pixel grid.

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

Exactly 😉 And I expect that Affinity will help me with that. Like any other program does that I'm aware of.

That's why I expect that placing e.g. an artistic text will always be places at integer values with "force pixel alignment" that the outcome is reproducible.

That's why scaling items with locked ratio should 'optionally' only make whole pixel positions possible that I don't have to correct it all the time manually.

I'm have not given up completely. I still hope someone from Affinity will join the discussion in some way.

Link to comment
Share on other sites

Affinity Design is a hybrid design application. Advertised for screen design too. Photo is a pixel manipulation software. It's not rocket science to force the pixel to the grid, I don't request any next level AI feature. Just that "force pixel alignment" actually works reliable.

I really do appreciate the help and the suggested workarounds, but at the same time I'm slowly starting to wonder why the need for pixel perfection in Affinity has to be discussed.😉 It's a absolute key requirement for many professional tasks like screen design. It's not about the need to craft pixel art. At least for me. 😉

 

Link to comment
Share on other sites

1 hour ago, pixelworker said:

It's a absolute key requirement for many professional tasks like screen design.

If Affinity doesn't fulfil your requirement now, then use the tool that does.
It's really that simple.™

All we can do here is to report issues, post workflows, workarounds and feedback, and hope Serif will eventually fix bugs and implement the requested features. That's it.

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

9 hours ago, pixelworker said:

That's why I expect that placing e.g. an artistic text will always be places at integer values with "force pixel alignment" that the outcome is reproducible.

Requirement: in Designer, enable snapping and pick the "Pixel work" snapping preset.

Step 1: Click anywhere with the artistic text tool and type something. Chances are that the text object will be placed at some fractional x,y values.

Step 2: Reposition the text with the mouse, just drag it a few pixels anywhere. You'll see that the text object aligns automatically to the pixel grid and stays aligned. If later you resize the text and it becomes misaligned, just nudge it with the mouse again.

Link to comment
Share on other sites

In general, in a modern vector design app, the perfect pixel alignment means finding the balance between a few features that most often will fight with each other:

  • Snapping to the pixel grid
  • Snapping to the user-defined guides and grids
  • Snapping between the objects
  • Snapping to the canvas
  • Any alignment operations, between objects, or to the artboards
  • Resizing operations, especially the resizing of multiple objects simultaneously, resizing perfect/regular shapes, or proportional resizing.
  • Any other operations that alter the properties of objects

You simply cannot have all of the above always working together perfectly, with pixel-precision. So you have to make some compromises, by disabling some of those features, or accepting certain margins of error. 

The question is, who decides which compromises should be made? The user, or the software? Affinity Designer mostly lets the decisions in the hands of the user, because it is a general vector design tool. It does offer the "Pixel work" snapping preset which I found it works well for pixel-perfect design, once you understand how everything works.

On the other hand, apps like Adobe XD or Figma, they decide everything regarding the pixel alignment. I posted this example in another thread: in the screen capture below, I resized three concentric circles in Adobe XD. The app tried to decide between:

  • Keeping all circles aligned to the pixel grid
  • Keeping all circles perfectly aligned concentrical
  • Resizing all circles proportional (because I Shift-resized).

In the end the app considered that the alignment to the pixel grid trumped everything else and made a mess out of my three circles.

circles.gif.01b9f6badd6a4285e976106523ff6037.gif

 

 

Link to comment
Share on other sites

5 hours ago, tudor said:

You simply cannot have all of the above always working together perfectly, with pixel-precision. So you have to make some compromises, by disabling some of those features, or accepting certain margins of error. 

The question is, who decides which compromises should be made? The user, or the software?

Firstly, it's not only in Designer. Photo has very similar issues. I agree with a lot of what you wrote but I don't understand your conclusion. 😉

The user should decide. That's why there are options like "Force pixel alignment" etc.. The only issue is that it's only working for some workflows, while others ignore it. Currently it's rather a "Force pixel alignment for some actions"

It should be no problem to add something like  "quantise clicks to pixel" and "keep whole pixel at transform" to the menu to solve these problems and stay as flexible as now.

Correcting it manually all the time is adding hours and hours of overhead monthly for me, it's prone to error and simply frustrating because of many manual corrections I have to make.

I think the way Figma and Adobe doing it is the better compromise for daily work. When you need precision you simple use a higher canvas size. It's not that I don't like the freedom in Affinity and Affinity could be better by combining both things via options, but established workflows like pixel perfect work have to work time efficient too.

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. You can still place between the grid in some cases and need to correct it manually. When you doing these things as professional work on a daily base it adds up. I have no time to correct these things all the time manually when the computer could support me.

 

Link to comment
Share on other sites

2 minutes ago, pixelworker said:

It should be no problem to add something "quantise clicks to pixel" and "keep whole pixel at transform" to the menu to solve these problems and stay as flexible as now.

We can't know if it's a "problem" to add it, but I definitely support such an option.

5 minutes 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. You can still place between the grid in some cases and need to correct it manually. When you doing these things as professional work on a daily base it adds up. I have no time to correct these things all the time manually when the computer could support me.

See, everyone has different needs. :) 

For lots of the design work that I create – e.g. record covers, posters, flyers – I, for one, would love to have a Randomizer tool that would distribute each object slightly off grid and rotate it by a few random 0.x degrees. Slightly unprecise just like in the "good ole days" of graphic design where we would use Letraset and photocopies of images and Ulano film etc. and paste them all onto cardboard. But as it stands, in the overly precise digital domain I have to do all that manually, object by object. It takes a lot of time, but that's ultimately the time I need because I want it to have that look. Suffice it to say that I usually don't get paid for that extra time, haha. (Here's a recent example of a flyer/poster for one of my bands done in Publisher/StudioLink, manually "randomized".) Correspondingly, my most sorely missed Illustrator feature is the nondestructive vector Roughen filter.

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

Totally agree with need for pixel perfect for GUI etc. One advantage should be you can scale an icon etc. to all required sizes and snap to pixels again for perfect sharp render.

I am new to affinity designer, but I once used Illustrator and thought pixel snapping worked perfectly there, though was not recently... So, is Affinity sub-par here?

I created a web doc and just wanted things to snap to pixels straight off, but first I had to disable pt so line sizes were in pixels.

But I draw rectangles, horizontal/vertical lines and none of them are 1 pixel-wide pure-black lines, they are anti-aliased badly. How come?

What is the point of 'Force Pixel Alignment' (and 'Move By Whole Pixels') if they do not produce pixel-sharp lines?

It seems you have to snap to half pixels to actually get it drawing as expected. If I do a drawing and then shift the whole lot by half a pixel it is ok - well why?!

Of course, some things may make coordinates sub-pixel, but there are ways around that if you just have the pixel mode as a last-step over-ride that ensures all sizes and positions are pixel-snapped when it comes to rendering for instance.

 

 

Link to comment
Share on other sites

34 minutes ago, andypoly said:

scale an icon etc. to all required sizes and snap to pixels again for perfect sharp render.

You can do all that in Affinity. It's just that many workflows are different to how other applications are functioning. Affinity is not an Adobe clone.

45 minutes ago, andypoly said:

I am new to affinity designer, but I once used Illustrator and thought pixel snapping worked perfectly there, though was not recently... So, is Affinity sub-par here?

Various Affinity settings or terminology may appear slightly illogical or confusing at first, as they won't do what a longtime Illustrator user (or Freehand, for that matter) would intuitively expect them to do based on previous experience. Trust me, been there done that… :D It takes time and a learning curve to adjust to the Affinity mindset. But apart from a bunch of slightly flawed "sub-concepts", overall there's logic in the Affinity way of things. Personally, it took me a few years to understand the big picture. Including pixel perfect workflows.

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, pixelworker said:

I think the way Figma and Adobe doing it is the better compromise for daily work.

If by "daily work" you mean arranging some basic rectangles to the pixel grid, then yes. But that can also be done in Affinity Designer without any issues.

In Figma, draw four 100x100 squares, align and distribute them equally. Then scale them using the Scale tool. You'll see how quick the perfect pixel alignment goes awry.

Link to comment
Share on other sites

52 minutes ago, andypoly said:

But I draw rectangles, horizontal/vertical lines and none of them are 1 pixel-wide pure-black lines, they are anti-aliased badly. How come?

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

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.