Jump to content
Stokestack

There's no apparent way to control gradient fill direction.

Recommended Posts

Hi all.

 

I've spent way more time than I should have trying to get a gradient fill to go vertically in Designer.  I don't think I've ever before seen a graphics application that offered a gradient fill but lacked any way to control its angle.

 

Even if there is a method buried somewhere in this application, it may as well not exist.  It needs to be in the gradient-fill controls.  Baffling.

 

post-7624-0-83189900-1439419026_thumb.png

Share this post


Link to post
Share on other sites

Hi Stokestack, welcome to the forums.

 

+1 for this feature, have you seen the roadmap yet? It's a list that shows upcoming features.

https://forum.affinity.serif.com/index.php?/topic/842-affinity-designer-feature-roadmap/

https://forum.affinity.serif.com/index.php?/topic/10075-affinity-photo-feature-roadmap/

 

You should also put in any requests/new features.

https://forum.affinity.serif.com/index.php?/forum/6-feature-requests/


MacBook pro, 2.26 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M 256 MB, OS X 10.11.6

 

http://www.pinterest.com/peter2111

Share this post


Link to post
Share on other sites

Thanks, Peter.

 

I don't see fill angle in those roadmaps...

 

I filed this as a bug because I consider gradients essentially unusable without it.  Have you ever seen a graphics application that forces gradients to go in one direction only?  I haven't.

 

I couldn't be happier to see Affinity deliver what many of us have sorely wanted for years: an alternative to Illustrator on the Mac.  But I'm worried at seeing such a basic feature unusable, even in version 1.  Now this software that I bought will sit unused while I go back to Corel Draw in a VM to get a very simple project done.

 

Gavin

Share this post


Link to post
Share on other sites

Hi Smokestack,

I really don't understand what your problem is.

Selected the fill tool and drag the handles to whatever directions you need.

You can hold the shift key to constrain its directions to 45 degrees intervals.

It couldn't be any simpler. It's the most versatile tool I've seen.

Am I missing something?

Regards

Share this post


Link to post
Share on other sites

Hi Seneca. Those handles can't be moved vertically; only back and forth along the horizontal line.  And you can add an unlimited number of them, which is interesting but doesn't solve this problem!

 

noVertical.png

Share this post


Link to post
Share on other sites

Each line has 2 circles at each end of the line. 

Just select these handles and drag them in any direction you want.

I can make a short video of it if you want.

Regards

Share this post


Link to post
Share on other sites

Hi Gavin,

Welcome to Affinity Forums :)

To set an angle for the gradient select the Gradient tool and drag it over the object on the canvas. The gradient controls will appear above the canvas and you can drag the end points directly to set the gradient direction. Here's a video about Gradients in Affinity Designer that may help.

Share this post


Link to post
Share on other sites

Each line has 2 circles at each end of the line. 

Just select these handles and drag them in any direction you want.

I can make a short video of it if you want.

Regards

Hi Seneca.  The handles in the Fill panel don't move vertically, and no on-screen control appears when you select an object's fill.

 

 

Hi Gavin,

Welcome to Affinity Forums :)

To set an angle for the gradient select the Gradient tool and drag it over the object on the canvas. The gradient controls will appear above the canvas and you can drag the end points directly to set the gradient direction. Here's a video about Gradients in Affinity Designer that may help.

 

 

Thanks, M.  When I set the fill for an object, I use the Fill control provided in the toolbar and its dedicated tab for gradients (as depicted in the screen shot above).  I would not expect to go hunting around for a separate tool for this and drag an additional effect onto an object, when fill is an intrinsic property of an object and controls are already provided for it.  If the controls for a property are deemed too complicated or difficult to implement in the control panel, I would expect on-screen controls to appear when I select that property (in this case, the Fill color well) from the object's property panel or toolbar.

 

The current design, aside from looking like it suffers from a major omission, leaves the user wondering if he's applying a separate effect to the object.  I suspect this will be even more problematic if Designer offers multiple fills on the same object (which I saw in the feature roadmap).

 

In a situation like this, I would urge Affinity to move this control from the Tools palette into the properties toolbar that appears for an object.  Not only is this much more intuitive for the user, but it allows you to enable or disable the control as appropriate for the type of object selected, and to cause it to disappear when no object is selected.  As it stands, it makes no sense for the Gradient and Transparency tools to be enabled when nothing is selected.

 

Should I copy this idea into a post in the feature-request forum?

 

Again, thanks for the reply!

 

Gavin

Share this post


Link to post
Share on other sites

Time for Plan B: Paste inside.

 

 

Create a circle or square, using the quick shapes. 

Create the tint/fill/gradient of your choice.

Copy this to the clipboard.

Create the shape/text that you want to fill.

Now select that shape/text.

Press Paste Inside.

Drag, then drop that new object over the shape/text.

Now adjust, rotate, position to fit...using the grab handles/anchor points.

 

 

It's not ideal but, it's all I can suggest for now. See attached file. Press Command + a, when you open the file...

 

HTH

 

peter

paste inside:rotate.afdesign

post-705-0-00760300-1442947879_thumb.jpg

paste inside.afdesign


MacBook pro, 2.26 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M 256 MB, OS X 10.11.6

 

http://www.pinterest.com/peter2111

Share this post


Link to post
Share on other sites

We are quite happy with our gradient fill tool, and I don't imagine we'll change the way it works (other than correcting any obvious bugs).  I think you are coming from the Adobe mindset - which is arguably a broken way of applying and thinking about gradients.  The notion of the gradient angle is totally abstract.  If I rotate or scale an object what should happen with the gradient?  We apply the transform of the parent object, so the gradient stays with its object - having a set angle doesn't work well with this.  We allow you to place the gradient precisely in the context of the actual object, between two or three exact points.  This is a lot better than having an arbitrary angle and a scale factor (which is dependant on the object bounds, as how it is done in Photoshop).

 

Incidentally, if you look into gradient angles in Photoshop, you'll find out that they are totally broken.  The angle you specify is not actually the angle of the gradient it produces.  It's a total bodge, and due to some very badly thought out maths that they've had to stick with ever since.

 

So, we like our approach of precision and putting the gradient exactly where you want it.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

No way do I come from the Adobe mindset; their UI is dismal.  And yes, I've noticed their pathetically broken angle control.  In terms of vector art, I'm coming from Corel Draw (and a very little bit of Aldus Freehand before that).

 

I have no problem with how your gradients work, and I like the precision of them too.  My problem is that the UI is missing.  When I go to adjust an object's fill and make it a gradient, there is no UI to control its angle.  That's the entire complaint.  You present a panel full of controls, but it's incomplete; and the on-screen fill-control handles do not appear when the user invokes the Gradient tab.  I don't think it's reasonable to expect users to guess that there's yet another gradient control lurking somewhere in the software.

 

This is a UI-organization complaint, not a complaint about how gradients behave when applied.  But it's serious, in that the software looks crippled by the absence of this control.

 

Examining this further, I think several problems stem from the use of a tabbed control for Fill.  These are different types of fills, so why aren't they presented in a drop-down list instead of tabs?  If the user selects "Gradient," you'd present the various controls for the gradient, including the on-screen control to adjust its angle and placement.  If the user selects "None"... then the fill goes away.  If the user selects "Color", you present a panel that offers various color pickers (including "swatches", which is currently and perplexingly in a separate tab; see below).  In the future, you might have procedural fills, bitmap fills with tiling options... are you going to keep adding tabs?

 

As it stands today, the Fill control panel has a tab that's labeled "None", but perplexingly has a bunch of grey swatches on it.

 

NoneTab.png

 

And if you select an object that has a gradient fill (for example) and go from the Gradient tab to the None tab, the fill disappears.  But if you go back to the Gradient tab, the fill doesn't reappear.  So now you've changed your drawing by simply selecting a tab, and have to use Undo to restore it?  A drop-down list would eliminate this problem, provide a clear time at which to invoke on-screen controls, and provide flexibility for new types of fills in the future.

 

To illustrate the color-picker inconsistency I mentioned above: Why does the color picker in the Gradient controls offer "swatches" as a picker type, but the Colour tab doesn't?

 

swatches.png

Share this post


Link to post
Share on other sites

Hi all. I'm new to AD and come from a Fireworks background (looking for a good alternative). Playing around with it a little, I see OP's point. The gradient functionality is really good, but there is an inconsistency with the 'Fill' functionality. Say I have a rectangle with a color fill. When I select the rectangle, I get a 'Fill' option in the properties area. Clicking that reveals a palette with 'None', 'Swatches', 'Color', and 'Gradient' tabs. If I select 'None', it removes the fill color, thus changing the fill type. If I select 'Gradient', it does not change the fill type. If I select the 'Gradient' tab, then change the gradient type, then it changes the fill type and applies the gradient. 

 

Ideally, when I have an object selected, it would be nice to automatically change the fill type when I select the tab (just like it changes the gradient type when I select a different one from the pulldown). Additionally, it would be nice to have more control over the gradient when I'm setting it from the Fill palette. In an ideal world, I would prefer to always have the gradient control (on the object) available whenever I have an object selected with the move tool, as opposed to having to select the fill tool from the toolbar (it's the way Fireworks does it, so I'm biased...).

 

By the by, good job guys! 

Share this post


Link to post
Share on other sites

I have to say working with fills and gradients is one of the most frustrating things in Affinity.

I spent hours trying to figure this all out. Finally came here.   like Stokestack had no idea what some folks were saying because when I was IN the gradient fill tool there were no control handles to pull as they suggested. It was not until someone said you have to ALSO go click fill in the regular tool bar that I understood the controls were not connected in one panel. Thats not intuitive. No  other program I use has the user to click "fill" in two different tool bars to control the gradient.

Im hoping this is already in the roadmap as a todo?

If not Ill be happy to go make a request for this feature. Just tell me where to do it!

 

Share this post


Link to post
Share on other sites

@dizeyner You do not need to click 'Fill' in any toolbars or panels to control a (linear) gradient in Affinity. It is done on canvas.

1721457560_AffinityGradientTool.gif.9a5689c60ba58f0ea606afdaa9258cac.gif

Simply select the Fill Tool (in Designer) or Gradient Tool (in Photo) and drag on the object you wish to affect. You can no control the gradient size / angle with the handles that appear, add new stops, etc.

To change to radial / elliptical / conical type gradients you do need to use the context toolbar.

This was familiar to me as an ex-Xara Designer user, but is somewhat different than Photoshop's approach.

I just checked the Affinity help (which I usually find to be very good). Regarding the gradient tool it is pretty useless!

https://affinity.help/photo/en-US.lproj/pages/Tools/tools_gradient.html

https://affinity.help/photo/en-US.lproj/index.html?page=/Clr/gradientEditor.html?title=Gradient editing

Both gives plenty of detail about the various settings within the tool, but neither give instructions on how to actually useit! (i.e. Drag on the canvas)

I think the documentation team do need to do some work here.

There are however a couple of official tutorials which are pretty good…

 


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites
9 hours ago, Stokestack said:

Then why is there a Fill control in these toolbars and panels?

Er… I don't know - I didn't put it there!

I guess it is to allow control of the stroke/fill without having the colour/swatch and stroke panels open.

Perhaps it also mimics the way Photoshop does things?

Personally I never use the context controls, preferring to work directly on the canvas with the gradient tool, and the panels mentioned above,  but imagine that others must work differently.


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites

The problem is that users have no idea that there's another gradient tool hidden elsewhere. If there's a Fill tool presented right there on the toolbar, why would we go hunting for another one?

Also, I don't recall seeing any other art program doing fills like this.

By the way, thanks for taking the time to post those tutorials in your earlier response.

Share this post


Link to post
Share on other sites

Xara Designer uses the same on canvas method, and even allows changing gradient type to radial without needing to use the toolbar. 

I find it very intuitive, once you know it is there! 


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites

I have an issue with the gradient tool in Photo for Windows when I try to move a single handle on a bitmap fill.  The contextual help at the bottom of the screen says Ctrl +rightmouse to move single handle but when I try this I get the right click menu and am unable to move the handle.  It would be much more intuitive on Windows to use the shift key modifier for this.

Share this post


Link to post
Share on other sites

Just started using AD, trying to move away from Adobe.

3 Different places where you have to find gradient information? It isn't very intuitive for new users. It's taken me 3 hours of hunting to find everything just to place a 10 degree gradient on some text. The help guides are anything but.

I like the look of AD so far and seems to be a very good replacment for Illustrator, just seems a little bit of logic is missing in some area.

 

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.