Jump to content
nicolleen

Curved gradients? - Affinity Designer

Recommended Posts

Hi,

can I draw a gradient along a curve, path or another shape than circle, ellipse or straight line in Affinity Designer? How can I do this?

 

I would like to make a curved border appear rounded and bevelled. The attached picture is just simply for illustrating my purpose.

 

thank you

niki

Probebild.jpg

Share this post


Link to post
Share on other sites
Guest

Hello nicollen,

I don't know if this is exactly what you're looking for, but you can duplicate the shape, break the line of the copy where the gradient should start and finish and then apply a brush to this line using the desired gradient.

Côté dégradé.png

Share this post


Link to post
Share on other sites

Wow, thank you very much for your reply and work, that´s exactly what I wanted to achieve!

 

I´m new to Designer and not an expert in vector graphics. I tried what I understood, but the gradient goes from the beginning to the line to the end, and not from one side to the other.

Can you explain to me what you mean by "breaking the line" and how I´m to apply the brush in this example? I did find some mode, where the brush shows a gradient along the line, but I couldn´t figure out, how the hell to tame this feature..!

lg

niki

Share this post


Link to post
Share on other sites

Hi nicolleen,
Welcome to Affinity Forums :)
Another way to create this is using a 3D FX (or alternatively a Bevel / Emboss FX) to build the bevel/gradient (the bevel will be created around the whole shape) then use another shape to clip the parts you don't want to show. You can change the FX settings to suit your needs. Check the attached file for an example.

3d_example.jpeg.ea5c97d9bdd49933ffd430cc2f32abbc.jpeg

sample.afdesign

Share this post


Link to post
Share on other sites
Guest

To apply the brush, simply select the line concerned by the gradient and click on the chosen brush. Set the line color to none in the "Colors" tab of the studio so that once the brush is applied it is in colors and not in grayscale. Adjust the line thickness.

Share this post


Link to post
Share on other sites

Thank you very much! 

The fx function is very neat and easy to use.

I´m still struggling with the brush method. I haven´t managed yet to choose the brush settings while keeping the line selected. I guess I´m still lacking some basics with the software.

 

 

Share this post


Link to post
Share on other sites

Sorry to bother you again. How did you get those colourful brushes? I don´t see where I can change the colour of a brush, let alone the horizontal gradient on the brush itself..?

 

Share this post


Link to post
Share on other sites
Guest

Hello Nicolleen,

There is no problem of bother!

I tried to make you a video but today my computer didn't follow, AD was freezing, so I made a simple gif to explain the creation of brushes (at least in my own way), I hope it will be explicit enough.

Pinceau.gif

Share this post


Link to post
Share on other sites

That´s phantastic, thanks a lot for your work!!

 

I did manage everything according to your great tutorial! The only thing that I can´t get to work right: I set the color on stroke and fill to None. I do get the two colour gradient when I use my new brush, but the colour is somehow different, a bit like desaturated. Sometimes it jumps to grey and white, then I have to reset stroke to no color. But I don´t get the colour of my new brush. In my example it happened to be pink, but when I use the brush, it is some old greyish pink, even though the brush seems all right and the color is everywhere set to none. What can that be?

 

Thanks again!

lg from Vienna

niki

test_screenshot.jpg

Share this post


Link to post
Share on other sites
Guest

From your screenshot, it seems that the brush is not the same color at the beginning and at the end, as if it had a slight gradient applied.

Try to redo the brush from scratch by checking that the colors of the red stops of the gradient are of the same value and that the white stops are also exactly the same color.

Couleur dégradé.png

Share this post


Link to post
Share on other sites

Hi again!

 

You are right, it was set on conical, that´s why I never had do move the gradient handle from horizontal to vertical. This time I did it right and it worked!!

Thanks a lot, I´ve learned a lot today!

 

Have a nice evening,

niki

Share this post


Link to post
Share on other sites
Guest

Hello nicolleen,

Glad to see that the problem is solved, thank you for your feedback.

Share this post


Link to post
Share on other sites

I'm sorry, but the proposal to use the 3D FX as a suitable "workaround" is not only unsuitable, it is 100% unable to remotely achieve what is being asked here. It seems a "mod" would know better than that. That (cheap if you ask me) 3D tool can absolutely NOT achieve intricate realistic 3D lighting effects. It almost always looks amateur when used. Having the ability to curve gradients seems pretty much like a no-brainer feature that surely many others have also seen the obvious need for before me ???

B30C951C-644E-4463-B98D-EAE3115BE270.jpg

Share this post


Link to post
Share on other sites
15 hours ago, affinity4Christ15 said:

I'm sorry, but the proposal to use the 3D FX as a suitable "workaround" is not only unsuitable, it is 100% unable to remotely achieve what is being asked here. It seems a "mod" would know better than that. That (cheap if you ask me) 3D tool can absolutely NOT achieve intricate realistic 3D lighting effects. It almost always looks amateur when used. Having the ability to curve gradients seems pretty much like a no-brainer feature that surely many others have also seen the obvious need for before me ???

Reading the specs for .svg coded images, the gradients AD offers are those the standard supports, and which work w. vectors. Any gradient edge that offered a 3D look, whether from a shading routine like the fx, or a rendering from a 3D engine would need to be reproduced as pixels. The image then becomes larger (less suitable for web use) and will degraded w. scale changes. 

Note, Photo does have the mesh warp which would sometimes aid in deforming a standard gradient.


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.