Simple gradient graphic fade to transparent?

[Randall Lee Reetz]

In Affinity Photo: How on earth do I accomplish this seemingly simple task of creating a graphic for export with a color gradient from opaque to transparent? 

Notice in attached image the gradient is in a layer above a solid blue rectangle… what is with the white where the node color chosen is black, where the nodes are transparent out where the node colors are white (on left) and grey (on right)?????

[Old Bruce]

This is with the Blue layer set to Pin Light blend mode, so there may be another blend mode which gives your result.

 

[loukash]

32 minutes ago, Randall Lee Reetz said:

a color gradient from opaque to transparent?

This is for Designer but that doesn't matter because the tool is identical:
affinity.serif.com/en-gb/tutorials/designer/desktop/video/301811805

[R C-R]

47 minutes ago, Randall Lee Reetz said:

Notice in attached image the gradient is in a layer above a solid blue rectangle…

It is hard to tell much from that image. For future reference, it would be better to include a sample afphoto file for things like this, or at least to include the Layers panel fully expanded.

[Randall Lee Reetz]

9 hours ago, Old Bruce said:

This is with the Blue layer set to Pin Light blend mode, so there may be another blend mode which gives your result.

 

So if the gradient is set to 100% opacity, why is the center of the gradient not black as the node there is colored? Same for the edges, why isn't the left edge of the gradient white and the right edge grey????

[Randall Lee Reetz]

What I am trying to do is export a gradient (as selection, without background, to PSD, Tiff, or PNG) where both edges graduate to transparent (with center black). When I do so, and when I import into other applications, the 

[Randall Lee Reetz]

The blue background is just there to show that the results aren't as I expect them to be, not even close.

[Randall Lee Reetz]

PS, I've a 35 year history doing professional digital design. Am some what an expert in PS and AI. I've done design work for Apple, IBM, Nike, General Motors, Xerox PaRC, Etc. I've designed and coded print and multimedia design and production software prototyping applications. Which is to say I am extremely familiar with digital production and production tools and am a fast learner and early adopter. If something is difficult for me to figure out, I can't help but wonder how others less experienced are coping.

[carl123]

Is this the sort of effect you are after...?

 

 

[Randall Lee Reetz]

7 minutes ago, carl123 said:

Is this the sort of effect you are after...?

Yes it is (almost). 

 

 

[Randall Lee Reetz]

so why is this happening at all?

[Randall Lee Reetz]

And when I export the gradient layer (selection) without background to PNG file, why am I getting this?

[carl123]

1 minute ago, Randall Lee Reetz said:

so why is this happening at all?

You were asked to provide a sample APhoto file many posts ago

Or else we are just guessing

[loukash]

2 hours ago, Randall Lee Reetz said:

I've a 35 year history doing professional digital design. Am some what an expert in PS and AI

Well, similar here. But that is often at the root of the problem.
Step one to successful mastering of the Affinity concept is to forget the Schmadobe Mindset™. Desperately trying to do things the "Adobe way" is only hindering you in understanding the Affinity workflows.
Trust me, been there done that. It took me 6 years (!) since I bought Affinity Designer in 2014 until I was mentally ready to "give in". The video tutorials and these forums were very helpful in the process.

On the other hand, if one prefers it the Adobe way, that's all right. Just keep on using the Adobe tools then. They are good. That comes – literally – with a steep price, of course. (Which I, for one, am not willing to pay. Hence Affinity now.)

That all said, there is a lot of room for improvement, of course.
That's why we're here, posting about our findings, bugs, UI inconsistencies etc. Serif staff is reading and taking note, sometimes commenting or helping.

Anyway.

Here's a screencast I made a few weeks ago where I demonstrated the use of transparencies in gradients in context of a non-destructive mask:

But the gradient fill UI could definitely need improvement, as I've pointed out in this post:

 

[Randall Lee Reetz]

10 hours ago, loukash said:

Here's a screencast I made a few weeks ago where I demonstrated the use of transparencies in gradients in context of a non-destructive mask:

I appreciate the long note! But unfortunately doesn't at all address what it is I am trying to do, or the snags Affinity is tossing my way. I want to export an image graphic with an alpha channel from a gradient that stretches from (completely) transparent, to something opaque, and back to (completely) transparent. My goal has nothing at all to do with any sort of workflow (destructive or nondestructive, good or bad, adobe or serif, old or new, I simply don't care). I don't care if I am starting in AffinityDesign or AffinityPhoto or AffinityPublisher because I am not interested in the document itself. I want to draw out a shape, apply a gradient to that shape. Set the edge nodes of that gradient to transparent at one edge, something not transparent in the middle somewhere, and transparent at the other end, There will be no other objects or layers in my work space or workflow, and I want to export the gradient as selection, without background, to any image formate (TIFF, PNG, PS, PDF, or what ever) that supports alpha channels.

I have shown that Affinity Photo is rendering a gradient that seems to have zero to do with the colors or transparencies I am picking for the gradient nodes. When I export the graphic selection as alpha channel enabled image file, the parts of the gradient that were supposed to be transparent are cloudy translucent white.

What gives?

[R C-R]

4 minutes ago, Randall Lee Reetz said:

I have shown that Affinity Photo is rendering a gradient that seems to have zero to do with the colors or transparencies I am picking for the gradient nodes.

We really can't tell how your image is constructed from the screenshot you have posted twice, so there is no way to know why you are seeing the results you do. It would really, really help if you would attach a simple Affinity format file to a reply showing what your screenshot shows. It doesn't matter if it is done in AP, AD, or APub.

[Randall Lee Reetz]

There is nothing to show. Nothing but standard SRC inks. Only one gradient layer. The blue layer underneath is just an opaque color layer with SRC ink. I have shown that the gradient layer is rendered with colors that have zero to do with the colors (clearly shown) in the gradient tool interface. When I export the selected gradient object without background to an image format that accepts alpha channels, I get another unexpected result where the edges of the gradient that are supposed to be transparent are instead milky white translucent. Not only that, there are messed up grainy bitmap solid black anomalies interspersed within the output image file especially out at the edges that are to be transparent. Is this a known problem with Affinity's rendering engine?

[lepr]

1 minute ago, Randall Lee Reetz said:

There is nothing to show. Nothing but standard SRC inks. Only one gradient layer. The blue layer underneath is just an opaque color layer with SRC ink. I have shown that the gradient layer is rendered with colors that have zero to do with the colors (clearly shown) in the gradient tool interface. When I export the selected gradient object without background to an image format that accepts alpha channels, I get another unexpected result where the edges of the gradient that are supposed to be transparent are instead milky white translucent. Not only that, there are messed up grainy bitmap solid black anomalies interspersed within the output image file especially out at the edges that are to be transparent. Is this a known problem with Affinity's rendering engine?

In my opinion, it's starting to look a little strange that you won't simply post an Affinity document as requested.

[loukash]

38 minutes ago, Randall Lee Reetz said:

What gives?

Nothing. Bye.

[R C-R]

19 minutes ago, Randall Lee Reetz said:

There is nothing to show.

Of course there is. Just browse through the topics a bit to see how often posting a simple example in the native Affinity file format helps to resolve an issue (or confirm a bug) quickly because nobody has to guess about how many layers there actually are, if the document is set to have a nontransparent background, what blend modes might be involved, or any of the other things that a screenshot of only a part of the workspace does not show.

[Randall Lee Reetz]

First image is gradient as created and exported. Second image is that same exported PNG imported into another application. What is with the black Gaussian noise out on the fringes?

[Randall Lee Reetz]

Is there something about the file color space that makes Affinity different from Adobe? How does one investigate and choose the alpha channel color Affinity uses?

[R C-R]

If you are unwilling or unable to post an Affinity format file that demonstrates the issues you are having I doubt anyone will be interested in trying to answer your questions.

There are just too many unknowns if all you post are screenshots.

[walt.farrell]

1 hour ago, Randall Lee Reetz said:

How does one investigate and choose the alpha channel color Affinity uses?

From a vague memory of earlier discussions here (about sprite design for video games) I don't think that Affinity gives you control over the alpha channel color.

[Randall Lee Reetz]

6 hours ago, walt.farrell said:

From a vague memory of earlier discussions here (about sprite design for video games) I don't think that Affinity gives you control over the alpha channel color.

So… how does one investigate the alpha channel color Affinity uses?