Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

Question on how to change the angle of the gradient that fills a stroke.

 

Say I have a rectangle.  I want to have a stroke that appears from the top left corner and then fades away diagonally toward the bottom right corner (an opacity gradient). 

 

When selecting stroke, you can choose a gradient fill but you can't affect the direction that fill occurs at.  It just defaults to horizontal.

 

When using the fill option (like when you are filling an entire shape) you can choose to have gradients occur at any angle over any distance by adjusting the slider, but this doesn't seem to be the case when you are using a gradient for a stroke.

 

I can come up with other workarounds obviously by building two rectangles where the front only reveals the edges of the back rectangle and then using an opacity gradient on the back rectangle, but it seems like I'm just missing one button somewhere.

Link to comment
Share on other sites

After defining the stroke weight, you can set the gradient in the stroke dialogue if you like. But to change its position and direction, you need to us the fill tool. Select the object, select the fill tool and change the context from "fill" to "stroke." Then adjust as desired/

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

Link to comment
Share on other sites

  • 6 months later...
16 hours ago, chris.bannu said:

wow, thanks for the tips, didn't know about these :) awesome

 

Glad to help!

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

Link to comment
Share on other sites

  • 3 years later...

DEAR AFFINITY,

And I mean this suggestion with love, but here's an idea to save the headache of new users, make this simple action more INTUITIVE, plus SAVE SOME CLICKS:

Thinking like a designer, you're MODIFYING the stroke, right? Simplify the function by adding the ability to modify the ANGLE OF THE GRADIENT TO THE STROKE PANEL.

Thanks!

 

Link to comment
Share on other sites

2 hours ago, Marubi said:

DEAR AFFINITY,

And I mean this suggestion with love, but here's an idea to save the headache of new users, make this simple action more INTUITIVE, plus SAVE SOME CLICKS:

Thinking like a designer, you're MODIFYING the stroke, right? Simplify the function by adding the ability to modify the ANGLE OF THE GRADIENT TO THE STROKE PANEL.

Thanks!

 

To suggest improvements, please use the Feature Requests & Suggestions section of the forums. That's where the Serif planning team looks for them. 

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

6 hours ago, Marubi said:

Thinking like a designer, you're MODIFYING the stroke, right? Simplify the function by adding the ability to modify the ANGLE OF THE GRADIENT TO THE STROKE PANEL.

In AD, the Fill Tool allows users not only to set a gradient either for the Stroke or Fill of vector objects, for both you can choose a linear, elliptical, radial, conical, or bitmap fill type. So for conical gradients there could be lots of color stops, each at a different angle. All the midpoints could also be at different angles, like in this lots of angles.afdesignexample.

I think it would make the Stroke panel unnecessarily large & complicated if that was part of it.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

16 hours ago, R C-R said:

So for conical gradients there could be lots of color stops, each at a different angle.

you just need angles, and calculate as a percentage of the 360 degrees of the circle, like with the Pie tool. But a added angle can perhaps help design cones in perspective... modifying the center position (this one would need an extra value for distance from the center), it would be useful.

Not being able to set an angle for other gradient is a problem, since you can set the exactly the same in the different panel for gradient. It's the same problem as not having in all the color panels a percentage for opacity.

That's this sort of problems that make Affinity's apps nice toys, when you don't need precision, or lack the time to use tricks to get the result you want.

Some would find added parameters like angle for gradients, opacity for colors, modification percentage for objects cluttering, but other would just find this helpful and necessary to achieve their designs. Meaning you should be master of all the parts of your work. Or it'll end up in bugs or being stuck and needing to switching app.

That's why I only do simple stuff in the apps. When working, time teach me to be in charge and in control of each aspects — usually that's the one you forgot that bit you in the calf.

Link to comment
Share on other sites

On 10/5/2021 at 3:15 PM, Wosven said:

you just need angles, and calculate as a percentage of the 360 degrees of the circle, like with the Pie tool.

Yes, but imagine a conical gradient with ten or twenty stops, each with a midpoint, so close to 20 or 40 different angles to set. That is not like the Pie tool at all.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

9 hours ago, R C-R said:

Yes, but imagine a conical gradient with ten or twenty stops

This sort of gradient?

2021-09-11_132951.png.96f2bb0a3fdda68ae38b891a6b292a91.png

For this one, I used the raster version as base to put the stops, but if I needed more precise values, I would have use pie(s) or the cog in the background to put the stops and midpoints.

 

What do you imagine would be an angle in a conical gradient?

Searching for visual examples for my idea, I found what I had in mind would be called in CSS: "Conical Gradient with Position",  and "Conical Gradient with Angle" exists.
Adding those and the needed parameters would just be adding more of the CSS abilities the apps need to import/export for SVG with CSS (for now they can't read the styles in a SVG with CSS).

https://medium.com/nerd-for-tech/how-to-use-conic-gradients-in-css-9136a6bf5b35

 

Examples from this page:

2021-10-07_071322.png.27d6c9634fa65966d96abdba6004daa7.png

With Angle:

2021-10-07_071326.png.89a7d8fa278a3749b0080f4a2b6231df.png

(What I thought "with angle" was:)

2021-10-07_071332.png.dca1bc358a2b6541b74ae3a6be4af32e.png

A smooth option that can be of use:

2021-10-07_072001.png.cf0c37112d3a069da3296310cb4cdf0e.png

 

Another interesting option (and for other gradients), would be to automatically modify the midpoints to have consecutive colors without gradients:
(for now, we should do it manually)

2021-10-07_072012.png.ec1bd2a19b2880c10118592c17267b9d.png

And more:

2021-10-07_072018.png.fb3594fbc41f67e8af47d852062ed1ba.png

2021-10-07_072038.png.8faefeb4ff94892b529e117f790dee74.png:D

 

Link to comment
Share on other sites

This  missing functionality is another prime example where Affinity is effectively working against users and their expectations by neglecting  simplicity (wrt UI). Yes, you could achieve the desired results with more than one super creative workaround. But it will cost you hours to find out, more hours to implement, increasing complexity to your design and files.

I do not underestimate that this seemingly easy functionality could cause heavy complexity under the hood in Affinity apps, often resulting in bugs caused by edge cases, and evil users (including  myself) trying as hard as possible to find every issue often caused by those edge cases.

Never the less, the users are the paying customers.

 

BTW: I spend a day to get a gradient following the curve of an non-closed curve shape. Finally made a grayscale gradient vector brush in Designer, and apply gradient map adjustment to changes colors.

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

10 hours ago, Wosven said:

What do you imagine would be an angle in a conical gradient?

As I said, the angle along the conic shape of each color stop & of each midpoint between each pair of stops. Note that as in this conic gradient.afphoto example, the conic gradient may elliptical rather than circular if the item it is applied to has been skewed, so it isn't necessarily as simple as just the angle around a circle:

488894749_skewedgradient.jpg.b88fb701e20256c2d61171b52e8a316d.jpg(note: I did this in AP but it is the same in AD.)

As it is, we only can set the stop & midpoint positions as a percent, measured counterclockwise from the point where the first & last stops are located. I'm sure that could be changed to allow entries in angular units, but since there could be bunches of stops & midpoints, both for stroke & fill gradients, I don't think the Stroke panel is the right place for this.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

2 minutes ago, R C-R said:

the item it is applied to has been skewed

But it's not really relevant, since the skew angle is a calculation done on an already existing object. It won't affect how the gradient is primarily designed in the Gradient panel, so the Gradient panel only need options for position and angle.

It's like drawing a cube in perspective (with pen and paper): you first draw a square in  frontal view, and determine later the other points in perspective. The frontal view is juste a plain square with a define side width. When you define your square, you don't calculate the perspective sides' lenght. It's different intersections of lines that'll give you the correct result.

Link to comment
Share on other sites

2 minutes ago, Wosven said:

But it's not really relevant, since the skew angle is a calculation done on an already existing object. It won't affect how the gradient is primarily designed in the Gradient panel, so the Gradient panel only need options for position and angle.

What I mean is currently we have options to set each position (of both the color stops & the midpoints between them) to a specific percent of the conic shape, not to an angle around it. Regardless, if each of these could be set to a specific angle around the conic shape (skewed or not) there is no need for a position option. The angle would be sufficient.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

2 minutes ago, R C-R said:

to a specific percent of the conic shape, not to an angle around it

But angle isn't needed to add stops (an option to swich to this measurement would perhaps help in special cases), we want angle to define the direction of the gradient. Because if you need to reproduce the same angle on different objects, you need this, and not pasting style or effects that can also paste unwanted properties.

2021-10-07_195517.png.8550d23f322f4017e74455c259f34424.png2021-10-07_195711.png.5e3624a091270a939ff6189c51f1e732.png2021-10-07_195549.png.2e51ec0718337ca09ff4766af68673f7.png

It's for the same need that we asked to be able to use global swatches in gradients, or opacity percent field in each color panel.

 

And some panel permit to select gradients but only apply the last color:

2021-10-07_200802.png.c3345bd946ffcdc5adc93b10f759d8e2.png

2021-10-07_201020.png.5305fd7f052551691ee17c22f9ef94df.png

 

Now, Imagine I need this stroke around the text in vectors, but from top to bottom, not left to right, so I won't use the effects... If there was an angle field, it would be doable.

2021-10-07_200901.png.1854c47e3b6e71a3b74e2ad628010672.png

Link to comment
Share on other sites

1 hour ago, Wosven said:

But angle isn't needed to add stops (an option to swich to this measurement would perhaps help in special cases), we want angle to define the direction of the gradient.

Please note that I am talking specifically about conical gradients, not linear, elliptical, or any of the others; & also for them about setting both the stop & midpoint placements.

None of your examples use conical gradients.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

1 minute ago, Wosven said:

About this, I already gave an answer:

I am still not sure how that applies to the need for a position option in Affinity vs. just an angle or percent option choice.

Maybe I do not understand what you mean by position?

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

2 minutes ago, R C-R said:

that applies to the need for a position option in Affinity vs. just an angle or percent option choice.

Read the page in the link that give explanations, and the CSS properties.

That's important that the Affinity apps are able to read and export to CSS, and the same for the SVG properties. No need to try the re-create the wheel, of only after offering what will be useful and exportable to regular vector format without needing rasterisation.

 

You want to apply angles to the stops, but it's not needed, since you example is only a regular conical gradient skewed. But it's skewed later, not when creating it, so you don't need angles even when wanting to modify it later.

 

No need for a position option? Explain how you do this one precisely without this parameter. They already exists in the Effect panel, they are just missing/invisible in the other Gradients panel, but the parameters are stored.

2021-10-07_071332.png.c99bd759e44d3114d617c8a10651961e.png

2021-10-07_222347.png.a2b85b806460db1b1ca578f505b911cc.png

Link to comment
Share on other sites

3 minutes ago, Wosven said:

No need for a position option?

What I mean is no need for a position option for the color stops & their midpoints, not for the center of the conical gradient.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

1 minute ago, R C-R said:

I mean is no need for a position option for the color stops & their midpoints

That's what I'm saying from the start, since we're talking about the Direction of the gradient (cf. title) :D

You'll notice that Affinity need to work on gradient to achieve at least this one in SVG without rasterizing (regulat and effect give the same result):

2021-10-07_223049.png.c9481952d842d793405ad06c7f9ab553.png

Link to comment
Share on other sites

2 hours ago, Wosven said:

That's what I'm saying from the start, since we're talking about the Direction of the gradient (cf. title) :D

What is the 'direction' of a gradient color stop or of the midpoint between two of them?

Consider that every gradient except the 'solid' not-really-a-gradient & the bitmap types has at least 2 color stops & one midpoint between them, but of course each type can have lots of stops & midpoints. For elliptical & conical types, they can be located anywhere around the gradient; for all of them their origin can be anywhere, including hundreds or even thousands of document units off the canvas & can span any arbitrary distance.

So while I agree that it would be great if we had a lot more options to set any or all of a gradient's parameters to precise values, I  think need to consider carefully how best to implement this so it works as intuitively as possible for all the parameters of all the gradient types, & for both stroke & fill gradients.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

 

6 hours ago, R C-R said:

What is the 'direction' of a gradient color stop or of the midpoint between two of them?

There's none you need to define, the gradient is just a vector, going from point A to point B, and this topic is about adding a direction for this gradient with an angle value to determine easily where is point B relatively to point A.

Angle is just this value, and isn't needed for the stops.

2021-10-08_081925.png.d93023e5962c5a46d1ed521e26091e11.png

2021-10-08_082607.png.991ea5813eeb557efe17d2d54f9005e7.png

 

Angle for stops isn't needed when we create them:

2021-10-08_083009.png.64ba7ed1870aa3487e55fc141cce5f07.png

 

But... if one day they add gradients able to follow a path, the apps will have to calculate to position the stops along the path, but it won't be our problem, it'll be done automatically.

2021-10-08_085059.png.1cbe619e0317d0bf7e1e13803024a2ed.png

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | 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.