How do I see white on a transparent background?

[Aftershaft]

Hi,

I am using Designer to create an image with a transparent background.  I set the background to transparent when creating a new document.

But I want to use some white brushes.  I can't see what I am drawing! 🙂

How can I see white?

Thanks,

-paulw

[v_kyr]

Just place a temporary black/darkgray/whatever help rectangle over your background, lock it in the layers panel and draw with your white brushes as usually. - When done hide or remove the temporary rectangle layer.

[Aftershaft]

Thank you so much!  It worked.  

[twojtyniak]

Any chance there will ever be a setting for choosing the "transparent" background color? Or perhaps the alternating gray and white boxes of other products, which seems to be the "norm" and works well. Having to add a layer every time I work with white objects just annoys me every time. It requires remembering to hide it or ensure I turn it off before exporting. A workaround is not a resolution to the user experience challenge. This one seems so unnecessary.

[loukash]

On 2/2/2021 at 4:55 AM, twojtyniak said:

alternating gray and white boxes of other products, which seems to be the "norm" and works well.

Something like this perhaps?

 

On 2/2/2021 at 4:55 AM, twojtyniak said:

A workaround is not a resolution to the user experience challenge

Definitely not.

But here's the workaround for Mac nonetheless.
The best way to do this is via Terminal because for the Mac App Store versions you'd need sudo anyway.
If you don't know how to use the Terminal and commands like mv and cp, then it's probably better to leave things alone.
Here we go:

1. quit Designer
2. rename
   /Applications/Affinity Designer.app/Contents/Resources/checkerboard_big.png
   e.g. to checkerboard_big-ORIGINAL.png as a backup
3. rename
   /Applications/Affinity Designer.app/Contents/Resources/checkerboard.png
   e.g. to checkerboard-ORIGINAL.png as a backup
4. download:
   
   
   
   
5. save both files somewhere in your user Documents directory for later use
6. make sure they are named checkerboard_big.png and checkerboard.png respectively
7. copy both files into the /Applications/Affinity Designer.app/Contents/Resources folder
8. launch Designer

Same for the other two apps, the checkerboard PNGs are the same.

You will need to repeat this procedure after every app update since these files will get replaced. So this works now for v1.8.6. When we update to 1.9 (hopefully soon!), you will need to repeat it, provided both files are still at the very same location. That's also why I wouldn't recommend automating it by an AppleScript or shell script, at least not without some security fallbacks to ensure that you'd still be replacing the correct files, and that's likely over my modest programming skills.

No idea if it's possible on Windows. It depends on the app resources structure. If a Windows app is "monolithic", then you're probably out of luck.

Edited May 16, 2021 by loukash
the forum software changed the png files names, d'oh!

[MEB]

Hi @twojtyniak,
Welcome to Affinity Forums
What application are you using? To set the background to transparent (in Photo) go to menu Document > Transparent Background; In Designer go to menu File > Document Setup..., Color tab and tick/check Transparent background. If you can't see white objects placed in the document after you set it to transparent (checkerboard pattern) there may by issues with the colour profile being used for your screen or some OS contrast setting wrong. What OS are you running - Windows?

[Alfred]

40 minutes ago, MEB said:

If you can't see white objects placed in the document after you set it to transparent (checkerboard pattern) there may by issues with the colour profile being used for your screen or some OS contrast setting wrong.

Rather than having to fiddle around with contrast settings, it would be good to have an option — as there was in at least one of the legacy applications — to choose an alternative colour for the checkerboard pattern.

[MEB]

That's just covering the issue. I think it's fine as an improvement request but if the user aren't able to see the white objects over a checkerboard background something should be wrong with his config and that's the first thing we should try to fix.

[EDIT] Re-phrased as the original reply could be misinterpreted.

[loukash]

@MEB: why was my post deleted?

[MEB]

3 minutes ago, loukash said:

@MEB: why was my post deleted?

It wasn't deleted, just hidden for a moment (before the user starts replacing app files etc) since seems the issue is indeed related with a problematic ICC profile or same OS setting. It should work out of the box without the user having to replace any files.

[Alfred]

27 minutes ago, MEB said:

if the user aren't able to see the white objects over a checkerboard background something should be wrong with his config

If the user isn’t able to see white objects over a checkerboard background, something could be wrong with his or her eyes! We don’t all have perfect vision, especially as we get older, and any options that make the apps more adaptable to individual users’ physical needs should be regarded as highly desirable.

[loukash]

2 minutes ago, MEB said:

seems the issue is indeed related with a problematic ICC profile or same OS setting. It should work out of the box without the user having to replace any files.

Fair enough, even though to me it seemed @twojtyniak was talking about checkerboard pattern variants.

35 minutes ago, Alfred said:

it would be good to have an option — as there was in at least one of the legacy applications — to choose an alternative colour for the checkerboard pattern.

Exactly.
The first thing I've always done when working with transparency in the "other" apps was setting the checkerboard to 60/40% black which from distance gives a nice neutral 50% average gray background. White/lightgray checkerboards are a highly unpleasant eyestrain to me.
Contrast matters™.

Nevertheless, just for illustration, here my personal workaround screenshot once again, this time without the instructions how to hack your Affinity.

[Move Along People]

-
 

[MEB]

Hi Alfred,
I'm obviously referring to a user in a regular context, not to a specific accessibility issue/context. That's another matter entirely.

[MEB]

Hi @loukash,
I've unhidden your post. Just for clarity, the user mentioned:  It requires remembering to hide it or ensure I turn it off before exporting. A workaround is not a resolution to the user experience challenge. This one seems so unnecessary.

The user seems to be following a reply from a previous post who may also be experiencing the same issue. There should be no need for a workaround if everything is properly configured (excluding accessibility contexts). I'm not sure from the user's comments he's realised there's indeed a checkerboard pattern when he sets the document to transparent - maybe he's not able to see it due to a misconfiguration or ICC. That's what i'm trying to confirm before moving to something else...

[loukash]

7 minutes ago, MEB said:

I've unhidden your post.

Thanks

1 minute ago, MEB said:

the user mentioned: 

 It requires remembering to hide it or ensure I turn it off before exporting. A workaround is not a resolution to the user experience challenge. This one seems so unnecessary.

By that, @twojtyniak was referring to this workaround:

On 12/29/2020 at 9:54 PM, v_kyr said:

place a temporary black/darkgray/whatever help rectangle over your background, lock it in the layers panel and draw with your white brushes as usually. - When done hide or remove the temporary rectangle layer.

Whereas my "hack" fixes the issue at app level.

4 minutes ago, MEB said:

I'm not sure from the user's comments he's realised there's indeed a checkerboard pattern when he sets the document to transparent

Well, the original post says:

On 12/29/2020 at 9:42 PM, PaulWilliamson said:

I set the background to transparent when creating a new document.

If you set the background to transparent in Designer, you will see the white/lightgray checkerboard when creating a new document, right?

In other words, upon re-reading all posts once again, to me the context seems clear:
Users would like to have checkerboard color options because the default checkerboard is not ideal in many situations.

[MEB]

Hi @loukash
I was replying to @twojtyniak's post explicitly, not the original one from last year. Your post was already un-hidden, my apologies if it did upset you. As i said above it was temporary until the user gave us some feedback. No need for workarounds or hacks if the issue could be fixed by checking the ICC or OS settings.

[loukash]

1 minute ago, MEB said:

I'm sorry if it did upset you.

All good

[Alfred]

34 minutes ago, haakoo said:

By this you mean that a page color should be adjustable?
Different checkerboards and/or full opaque

I mean the colour of the checkerboard squares should be adjustable (e.g. pink or pale green instead of white or pale grey).

[Alfred]

34 minutes ago, MEB said:

Hi Alfred,
I'm obviously referring to a user in a regular context, not to a specific accessibility issue/context. That's another matter entirely.

I see this as a “regular” context, Miguel, and I’m clearly not alone here!

40 minutes ago, loukash said:

The first thing I've always done when working with transparency in the "other" apps was setting the checkerboard to 60/40% black which from distance gives a nice neutral 50% average gray background. White/lightgray checkerboards are a highly unpleasant eyestrain to me.
Contrast matters™

 

[v_kyr]

10 minutes ago, loukash said:

Whereas my "hack" fixes the issue at app level.

Jip, though a little exchange script which would automate the whole process (for inexperienced users/people) would be maybe more useful to have. - Also for your hack people always have to quit Designer, apply the file changes and restart, which also may annoy the OP, especially when he next time uses one of the checkerboard gray color levels instead of white, aka ...

• A rect and text used in the same gray tone

So all these are just temporary workarounds but honestly no general app driven solutions!

 

[loukash]

On 2/2/2021 at 2:10 PM, v_kyr said:

people always have to quit Designer

Not always: Just once when you're installing the PNG. After that the PNG sits there just like the original PNG did. Until you download an app update, because these app updates are not incremental.
And the step to quit the app is only a safety measure because it's unwise to modify app's innards while it's still running.

By the way, at first I tried to replace the checkerboard.png file with a symlink to my external modified PNGs, but that would crash the Mac App store versions, likely because sandboxed. It may have worked with Serif Store version (my Publisher) but in the end I didn't test it because it's a stability risk nonetheless.

On 2/2/2021 at 2:10 PM, v_kyr said:

A rect and text used in the same gray tone

Well, you can't always have the cake and eat it, too.

On 2/2/2021 at 2:10 PM, v_kyr said:

So all these are just temporary workarounds but honestly no general app driven solutions!

Of course!
My personal preference is the "middle-gray" checkerboard for transparency. If I'd need to work with ± 50% gray otherwise, I'd simply disable transparency temporarily.

~~~

That all said, meanwhile, while this discussion was ongoing, I had a new idea and am already working on it. I'll be ready to "alpha-test" it in a few minutes. If it works as I'd like to have it, I'll post it here soon. Hold on!

[v_kyr]

4 minutes ago, loukash said:

Not always: Just once when you're installing the PNG. After that the PNG sits there just like the original PNG did. Until you download an app update, because these app updates are not incremental.

I meant more when the changed checkerboard coloring then annoys for the use of one color tones it uses itself, then you would have to change again contrasts of the bitmaps in order to see something drawn on these ... and so on.

10 minutes ago, loukash said:

By the way, at first I tried to replace the checkerboard.png file with a symlink to my external modified PNGs, but that would crash the Mac App store versions, likely because sandboxed. It may have worked with Serif Store version (my Publisher) but in the end I didn't text it because it's a stability risk nonetheless.

This is the downside of the App Store versions, they are more limited in their flexibility for overall security reasons.

[loukash]

Just now, v_kyr said:

meant more when the changed checkerboard coloring then annoys for the use of one color tones it uses itself, then you would have to change again contrasts of the bitmaps in order to see something drawn on these ... and so on.

I see. Yes, that's exactly the subject of my "update" I'm currently working on. Hold on a bit more. (I ran into an odd issue with Designer apparently having some "rounding problems" while power duplicating my 8×8 px rectangles to distribute them evenly, ending up with the checkerboard pattern being 255.9 px high! What the… #%&*?¨)

[loukash]

5 minutes ago, v_kyr said:

the downside of the App Store versions

Yep. I'll be definitely buying v2.0 of APh and AD from the Serif store. My APu 1 is already the Store version – because it was discounted for us early adopter beta testers – and that's how I like it to be.