Skip navigation
Sephiroth73003
Currently Being Moderated

Gradient Along a Path

Jun 27, 2012 9:46 PM

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.

 
Replies
  • Currently Being Moderated
    Jul 1, 2012 8:36 PM   in reply to Sephiroth73003

    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.

     

    ringthing.png

     

    I've added a quick tutorial on my website

    http://www.playingwithfire.com/blog/

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2012 1:13 PM   in reply to Linda Nicholls

    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.

     

    http://veerle.duoh.com/design/article/gradient_rings_in_illustrator

     

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points