Eliptical raduated fill in Designer with unequal fades

[Furry]

In Designer I am trying to add a highlight to a cartoon nose and its seemed the best way to do that would be to place an elipse on top of the nose with a grad fill from white in the middle to the background colour at the edges (does that make sense?)

I have attached a tiny .jpg to show the sort of thing I am aiming for.The white patch fades to the background colour more quickly on the bottom edge than on the top edge and accordingly on the sides. Is there some way to achieve this in Designer? Perhaps with a gausian blur? I am grasping at straws here.

[GarryP]

Unless I’m missing something you should be able to achieve what you want with an Elliptical-gradient-filled Ellipse with some Gaussian Blur added – see attached image.
If this doesn’t do what you want then you will probably have to describe what you want in much more detail – e.g. for example, exactly what you mean by “fades” and “more quickly” as they can be interpreted in different ways.

[Alfred]

Instead of using a white-to-background-colour gradient fill, consider using a solid white fill with a gradient transparency applied. Then you won’t have to match the outer edge of the fill to the background, so it will still work if the background isn’t a solid colour (or if you change it later on).

[Old Bruce]

Alfred's advice could also apply to a gradient fill with the one colour, white, on both stops. With 0 % opacity for the outermost stop.

The advantage to having just White for the colour of both stops is that if you change the colour of the nose the highlight gradient won't need to be changed as well.

[Furry]

Thank you, GarryP, Alfred and Old Bruce. What you say sounds good but I have been unable to put it into practice, probably because I have not fully understood your directions.

GarryP, I should have been more careful with my analogy. What I was getting at is this. I have attached the tiny graphic again but with red and green lines added to it. Each line runs from the white area to the fully coloured area (what I have referred to as “fading”). The green line goes from white to coloured over a shorter distance than does the red line, which is what I meant by using the word “more quickly.” I will choose my words more carefully next time.

I have tried making a white elipse and changing its opacity at the edges, but cannot work out how to do it. I tried adding a grad fill with an elipse setting but when I tried to alter the opacity of a given stop, the opacity of the ahole elipse was changed. I have worked out that I can change the length of the arms by holding down the Control key (on a Mac) and that I can change the direction of both arms by holding down the Shift key, but they remain at 90° to each other whereas I want them to be at 180° and, in any case, I can’t reduce the opacity of the stops without reducing the opacity of the whole object.

What have I misunderstood?

[GarryP]

With the Elliptical Fill the ‘arms’ have to be at 90 degree angles.
The ‘arms’ determine the dimensions of the fill within an ellipse which has a ‘width’ and ‘height’.
I don’t think you can set the ‘arms’ at 180 degrees as you would then not have either a ‘width’ or ‘height’, you would only have ‘length’ (a single dimension, and therefore only a line of fill not an area).

I believe that the Opacity setting for the colours at the ends of the ‘arms’ of an Elliptical Fill applies to both ‘arms’ at the same time because the colour at the end of both ‘arms’ is the same colour, you change one and both change. I don’t think you can alter this.

Does this help?

I think you might have to use multiple fills to get what you want but I’m not an expert in this area.
One of the more-experienced artists in the forums will have better idea than me.

[Furry]

Thank you, GarryP. What you say sounds good but, the only place I can see where to set the opacity of the end of the arms is in the layers panel and, when I change the opacity at the end of the arms, the opacity of the whole object changes. Swetting a zero opacity for the end of the arms means the object might as well not be there as the whole thing has zero opacity. Clearly I am missing something. I wish there was an owner’s manual witrh Designer but, of course, no software comes with that luxury these days.

[Ron P.]

17 minutes ago, Furry said:

set the opacity of the end of the arms

In GarryP's screenshot above, look at what he's circled in the upper-left. It's the Gradient option. Click on the gradient color you see in that, to open a dialog. In the Gradient dialog, you can change the color, add/delete the stops, move them (other then the extreme left/right ones), and alter the feathering of each.

Now that said, when one of the stops are selected, you should see below, where you can change the Opacity.

 

Designer Help>Gradient Editing

[Ron P.]

I think the Transparency Tool would work better for you. Here's a real quick comparison of using the Transparency vs Gradient tools.

 

[MEB]

Hi @Furry,
Affinity Designer doesn't support the feature you want/are looking for (offset the center of a circular/elliptical gradient). You can kinda fake it with masking/transparency as suggested but it's not the same nor as much practical as having the feature available. I suggest you create a thread in the Feature Requests section with a screenshot showing a sample object filled with a regular circular gradient and one with an offset created in other app that supports it to make clear what you are requesting. Thanks for your support.

[Furry]

Thank you, RonP. I thought about your suggestion overnight and this morning experimented a little. I used black and white because it is easier to see things with contrasting colours.

I began by using the elipse tool and making a white elipse on the black background. Then I used the elipse gradient and, following the suggestions in this thread, activated the gradient tool with all stops being white. I made the opacity of the stops at the end of the arms zero and the opacity at the centre 100%. I then slid the midpoint of the gradient closer to the zero stops so that there was a greater area of white in the core of the elipse. I tried converting the elipse shape to curves and narrowing one end to make the shape more ovoid than eliptical. Sadly, the elipse gradient doesn't recognise such changes to the object shape and all I was doing was clipping the gradient.

Then I used the pen tool to draw a white ovoid (ie., egg-shaped with one end smaller than the other) and applied a gassian blur. Simple really. Attached is the file with the two experiments. I have to say that, on balance, I am much happier with the gassian blur technique that the gradient technique.

MEB, thank you for your suggestion. At this stage this particular tangent to my regular work has gone on far too long so I will probably not spend the time putting in a feature request. It is not something I would never use very often and, if others feel a need for it, perhaps they will be drawn to this thread and take up your suggestion.

Grad vs gaussian.afdesign

[Ron P.]

Your very welcome

I'm glad to see you've came up with a solution.