2 Replies Latest reply: Aug 26, 2012 1:13 PM by groove25 RSS

    Gradient Along a Path

    Sephiroth73003 Community Member

      I've seen some tutorials about how to convert a gradient perpendicular to a path, but I'm interested in making some pictures like the one below for manipulating some UI elements I'm creating. See how at one point on the path it starts white then builds to black (or vice versa depending on how you look at it). Need a clean linearly interpolated gradient like that. can't figure it out. Any help would be much appreciated.

        • 1. Re: Gradient Along a Path
          Linda Nicholls Community Member

          This is pretty close, I think. I'm not sure this will upload as an editable PNG file. If it doesn't I'll make it available from my website. If it is editable, you'll be able to open it in Fireworks to see how it was done.




          I've added a quick tutorial on my website


          • 2. Re: Gradient Along a Path
            groove25 Community Member

            Linda, I thought that was an ingenious solution!


            I was also reminded of this tutorial by Veerle on how to create gradient rings in Illustrator. She uses Illustrator's object blend capabilities to create the gradient, then defines it as an art brush so that it can be applied to the circular path.




            Now that Illustrator CS6 supports gradient strokes, one can create this effect directly by drawing a circle and then setting the stroke option in the Gradient panel to "Apply gradient along stroke". It's almost too easy.


            A gradient stroke along a path can almost be created in Fireworks by choosing Edit Stroke, selecting Sensitivity, and adjusting the Lightness (or Hue/Saturation, depending on the stroke color), but the result looks too fingerpainted to be usable.


            fingerpainted fake gradient.png