Representing linear gradients

Post questions on how to use or achieve an effect in Inkscape.
Edwardhardy
Posts: 5
Joined: Tue Mar 13, 2012 5:17 am

Representing linear gradients

Postby Edwardhardy » Wed Mar 14, 2012 10:13 pm

Like many people, I suspect, I'll create a linear gradient for an object by manipulating the 'handles' displayed when using the gradient tool.

Here's an example.

Create a rectangle. Apply a linear gradient from Stop ffffffff to ffffff00, in other words solid white to transparent. However. the gradient starts at the top edge of the rectangle, but the lowest point is some distance beneath the bottom edge.

The question is: how do I represent the gradient filling the boundaries of the rectangle? Yes, its full opacity ffffff at the top, but an (as yet) undetermined opacity at the bottom edge. Is this something the XML editor can help with?

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Representing linear gradients

Postby brynn » Fri Mar 16, 2012 11:27 am

Hhmm, I'm not sure I understand the question. The gradient stops and starts at the end stops. So you just drag them to wherever you want them.

If you create the gradient originally by using Fill and Stroke dialog > Linear gradient button, the gradient will automatically perfectly fill the rectangle. But if you create the gradient originally by enabling the Gradient tool, and dragging the mouse, it's a little trickier to be precise. But you could used snapping for this. Enable snapping, Snap nodes and handles, Snap to paths (3 buttons engaged, all others not). Then drag one end stop to the top and the other to the bottom, and they will snap to the path (if the rectangle is a path and not a shape). (If it's a shape, then you could just create the gradient using Fill and Stroke dialog.)

If that info doesn't help, would you please clarify?

Edwardhardy
Posts: 5
Joined: Tue Mar 13, 2012 5:17 am

Re: Representing linear gradients

Postby Edwardhardy » Sat Mar 17, 2012 2:50 am

Hi. Thanks for the reponse. I think I wasn't clear when framing the original question. I'll have another go.

When I present the parameters of a linear gradient for a developer, I might do something like this:
stop-color:#254c7f;stop-opacity:0.25
stop-color:#7996b8;stop-opacity:0.75

Then I supply the dimsensions of the object, and the image can be drawn.

This is works fine for a scenario where the start and stop points of the gradient are precisely on the edges of the object itself.

However, if, in modifying the gradient, you 'pull' one of the handles to a new position away from the edge, then the details of the gradient within the boundries of the object will change. This is because the gradient details are descibing a transformation from one colour to another, from one end stop to another. Not from one edge of an object to the other edge.

So the problem I am facing is trying to represent the parameters of this new scenario.

Now, I could just always keep the end stops on the boundaries of the object, but it doesn't give the creative leeway that I'm after. I like moving the handles around to experiment with different shading.

Hope this describes the issue more clearly.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Representing linear gradients

Postby brynn » Sat Mar 17, 2012 11:10 am

I guess someone else will have to answer this, because I'm still not clear what you're trying to do.
Do you want to write some kind of code? do something with gradients from command line? create a gradient by writing XML?? Why do you present paramenters of a gradient to developers? Do you mean developers of Inkscape or developers of some other program that you're using Inkscape with?

The gradient itself is not an object. To my knowledge, it can have no dimensions. You can't have a gradient by itself. It has to have an object to fill.

If you have a rectangle with a gradient, and you drag one stop away and outside the rectangle, the gradient still does not extend outside the rectangle.

Hhhmmm....are you looking to determine the exact color and opacity of any given point along the gradient? Is that what you're asking?

Anyone else? Feel free to jump right in :D!

llogg
Posts: 443
Joined: Tue Mar 11, 2008 7:30 am

Re: Representing linear gradients

Postby llogg » Sat Mar 17, 2012 3:36 pm

I doubt there is a quick way to get what you want. Your best bet is to make the gradient, play with the handles until you like what you have. Select the object and make a bitmap copy (alt-B). Now select the original object and open the gradient editor. Move the handles to the edges of your object using snapping as described by brynn. Select one stop handle, then use the dropper tool to select the color from the appropriate edge of your bitmap copy. Repeat for the other edge.

This method will work best for gradients with only two stops.

Edwardhardy
Posts: 5
Joined: Tue Mar 13, 2012 5:17 am

Re: Representing linear gradients

Postby Edwardhardy » Tue Mar 20, 2012 2:08 am

Yes, I think this is probably the only way.

"are you looking to determine the exact color and opacity of any given point along the gradient"

Yes. This is what I'm after, as an XML definition. But it seems that having designed the object, I should probably take the bitmap route suggested by llogg.

Thanks for your help.

Ed

User avatar
Maestral
Posts: 982
Joined: Sat Aug 27, 2011 7:10 am

Re: Representing linear gradients

Postby Maestral » Tue Mar 20, 2012 10:02 am

Dropper tool has two options on its tool bar - Pick and Assign. When both active, dropper tool will grab exact color and transparency and assign it in further use.
- Make desired gradient
- "D" or "F7" to chose Dropper tool / activate Pick and Assign on tool bar / pick desired color
- create any new shape and it will be filled with previously grabbed/picked one from Dropper tool.

p.s.
Check Inkscape guide from Bryns signature (middle one) and look for Dropper tool for some more info.
:tool_zoom: <<< click! - but, those with a cheaper tickets should go this way >>> :!:

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Representing linear gradients

Postby brynn » Wed Mar 21, 2012 10:44 am

I don't understand the need to convert to raster (bitmap). The dropper tool works the same way on vector or raster.

llogg
Posts: 443
Joined: Tue Mar 11, 2008 7:30 am

Re: Representing linear gradients

Postby llogg » Wed Mar 21, 2012 11:48 am

But the bitmap is static and not effected by changing the gradient handles.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Representing linear gradients

Postby brynn » Thu Mar 22, 2012 4:04 am

I guess I still don't understand the problem :roll:

llogg
Posts: 443
Joined: Tue Mar 11, 2008 7:30 am

Re: Representing linear gradients

Postby llogg » Thu Mar 22, 2012 8:30 am

You can only select one color at a time with the dropper. You can only move one handle of the gradient at a time. He wants a gradient that is defined by the edges of the object but often doesn't get the look he needs until he extends or otherwise plays with the gradient handles. If he then uses the dropper to select the color at the edge of the object and then applies that color to one gradient stop, the gradient will change. Moving the handle to the edge of the object changes the gradient some more. Unless the other handle of the gradient was already at the edge of the object the color of the gradient at the edge of the object is now different than when he had it just as he wanted it. The only way around that is to make the "just so" gradient static, i.e. unchanging when he moves the gradient handles one at a time.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Representing linear gradients

Postby brynn » Thu Mar 22, 2012 12:48 pm

Oh, I didn't realize that both gradient handles were being moved. I thought it was just one end of the gradient that needed changing.
Thanks for explaining :D

User avatar
Xav
Posts: 1209
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Representing linear gradients

Postby Xav » Thu Mar 22, 2012 10:22 pm

If I understand the problem correctly, here's another approach that might be quicker or easier than using the dropper tool:

1) Draw your object, with gradient, and position the gradient handles where you want them. I'm going to assume they're both outside the edges of the object.
2) Select the :tool_gradient: tool. Zoom in and double click on the gradient line where it crosses your object boundary to create a new stop in the gradient. Repeat for the other crossing point.
3) Still using :tool_gradient: select one of the end stops by clicking on it. Press the Delete key to remove it. Repeat for the other end stop.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

llogg
Posts: 443
Joined: Tue Mar 11, 2008 7:30 am

Re: Representing linear gradients

Postby llogg » Fri Mar 23, 2012 9:11 am

Much more elegant approach, Xav.

User avatar
Maestral
Posts: 982
Joined: Sat Aug 27, 2011 7:10 am

Re: Representing linear gradients

Postby Maestral » Fri Mar 23, 2012 11:24 am

^ +1

I was under impression that underlying color plays some part in the whole thing.
:tool_zoom: <<< click! - but, those with a cheaper tickets should go this way >>> :!:


Return to “Help with using Inkscape”