Add checkerboard to preview/color-picker

[reFX-Mike]

So we can see alpha blended colors and components more accurately. The pattern brightness should be adjustable (dark, medium, light)

[sudara]

I like this idea. What’s the use case for different brightnesses (vs. black and white checker)?

[reFX-Mike]

Preference, and also with brighter components, you need more contrast from the background (checkerboard) so the preview doesn’t blend together with it. Same for showing a color. When working with brighter colors, a dark checkerboard creates a larger contrast.

[reFX-Mike]

Inspired by photoshop, of course. So the checker should never be black/white, but black/dark-grey, dark-grey/ mid-grey, light-grey/white

[sudara]

Ok, thanks for the details. Sounds like a good starting place would be to try the same default light grid that photoshop has and see which use cases need help. Would be interesting to see if the grid color can be auto adjusted depending on content contrast (would like to keep settings in UI to a minimum when possible)

[reFX-Mike]

Could be hidden with a context menu. Light/medium/dark. Or “adaptive”

[sudara]

Funny, I ended up needing this today, for helping with icon positioning.

The dark grid from PS definitely looks the best as a default, the white is jarring.

One problem is the scaling. I have the checkers at 4x4, but it seems obvious that they should scale with the content (so on close inspection, it's clear what's a pixel and what's not). However, the auto-zooming of the preview panel means that even if I draw the checkers crispily, they'll get blurred when scaled.

[sudara]

Another good example. So much zoom that it appears gray, which is undesirable...

[reFX-Mike]

I would draw the checkerboard always the same size. If you want to see individual pixels, I suggest adding a pixel grid on top once the resolution is low enough.

[sudara]

It might drive me too nuts to have preview and checkers at unrelated scales... I will take a look at variable size boxes + locking preview scaling to their multiples.

[reFX-Mike]

It might drive me nuts that the checkerboard is constantly resizing. It would make it seem part of the component instead of just the background. Look at Photoshop. The grid has a fixed size, no matter how much you zoom in or out. It also makes it easier to tell what's the background and what is a component.

[sudara]

Photoshop scales the checkerboard appropriately according to how zoomed-in the content is. This lets you rely on the checkerboard for spacing / alignment, which is often important when working with transparency.

It does this smartly, by only having a few discrete grid sizes. This maximizes the aesthetic compatibility you want (it all looking fairly same-ish).

In this case, the preview displays at different zooms depending on what size content you've picked. An analogy might be be tabbing between a zoomed in photoshop file at 100x100px to one at 1000x1000px. They look aesthetically similar while still staying appropriately scaled to the content.

[sudara]

Ignore my last post, I think you are right and transparency grid doesn't need to scale. I was over-indexing on the confusing secondary grid lines thing photoshop has (+ thinking about pixel grid logic)