Linear Gradient
From Filter Forge Wiki
←Older revision | Newer revision→
A Gradient of Fundamental Proportions
The linear gradient is the most basic of all gradients, a simple linear transition between two colors. As we shall see in the course of this article, this gradient type is the fundamental building block for all complex gradient construction efforts, and it is precisely for this reason that our study of gradients must begin here!
Linear Gradients in Filter Forge
Inside the Filter Editor, the linear gradient is represented by the Profile Gradient component, which can be found in the Gradients category of the Components Bar. Since it will be this very component that we'll be using again and again throughout this article, we better take a very close look at it!
"But what about the other gradient components?" you may ask. "Don't we have a need for them?"
Well, we will look almost exclusively at the Profile Gradient, simply because four of the remaining five Gradient components are just special use types that are of minor usefulness in the construction of generic complex gradients. Let's take a brief look at the six existing Gradient components again...
| Gradient Component | Type | No. of Blend Colors | Could be de-constructed to |
|---|---|---|---|
| Profile Gradient | Linear Gradient | 2 | Impossible to de-construct! |
| 3-Color-Gradient | Linear Gradient | 3 | Multiple Blends, Profile Gradients |
| 5-Color-Gradient | Linear Gradient | 5 | Multiple Blends, Profile Gradients |
| Noise Gradient | Linear Gradient | Many (Noise variations of base color) | Noise Curve, Profile Gradient, Hue/Saturation |
| Spectrum | Linear Gradient | Many (Full color spectrum) | Multiple Blends, Profile Gradients |
| Elevation Gradient | Special | As Source Gradient | Impossible to de-construct! |
From the table above it should be obvious that there exist only two Gradient components that are really irreducably basic:
- The Profile Gradient, which could also be called a 2-Color Gradient.
- The Elevation Gradient, which is a kind of meta-gradient that we'll discuss along with the more complex gradients.
The remaining four Gradient components are de-facto special cases of the Profile Gradient. Consequently, they shall play a very marginal role in our gradient investigations, if any at all!
The Profile Gradient
Wow! Now that we have - after all the theoretical drivel - finally managed to drag & drop a Profile Gradient component into the workspace, we are greatly relieved that we don't have to construct this particular gradient type from scratch. Luckily, the developers have already done it for us. Phew! That was close!
As we take a quick glance at the properties of the Profile Gradient, we may begin to get a notion of the versatility of this component. So then, let us familiarize ourselves with the Profile Gradient's parameters, so we can get a better understanding of what we might use this component for... after all, there must be some method and sense behind the madness of constructing everything from basic building blocks, eh? ;)
Profile Gradient Parameters
Color 1 and 2: Map Inputs
Black & white gradients can be so terribly boring, so let's change these two color swatches to something more colorful! In the example below we can see how a colored linear gradient was used to create the mood and atmosphere for the effect filter "Shark Tank!". Simple, but emotionally effective.
Offset: Map Input
The Offset parameter may seem rather inconspicuous at first, but rest assured: We'll need it later on when we're constructing the more complex gradient types. For now, take note how it shifts the entire gradient horizontally (or vertically, depending on the value of the Rotate parameter), as seen in the example image below.
 | Diagonal Linear Gradient Check out the section on this gradient type for a simple example of what can be achieved using the Offset parameter! |
Rotate: Control Input
Rotate is a very useful parameter whose effect can be seen in the example image below: It determines the direction of the gradient. Note that it is only possible to rotate the gradient in discrete 90° increments due to Seamless Tiling.
 | Snippet Hint Check out Any Angle Gradient v2.5 for a linear gradient that can be freely rotated! |
The Rotate parameter can also act as a quick & dirty grayscale Invert by rotating the gradient 180 degrees. This is often more practical than manually switching color swatches and more efficient than connecting the Profile Gradient to an Invert component.
Repeat: Control Input
 | Sawtooth Gradient The Repeat parameter of the Profile Gradient will be explained later in the section on the Sawtooth Gradient. |
Mirror: Control Input
 | Bi-linear Gradient The Mirror parameter of the Profile Gradient will be explained in the next section on the Bi-linear Gradient. |
Profile: Curve Input
Now this is where it really gets interesting! So far, our Profile Gradient sported a rather basic transition between its Color 1 and Color 2 values: the default Linear curve. The Profile drop-down menu (see the image below) provides us with four 'hard-wired' curve profiles, which the component uses when there is no Curve Component connected to the Profile input.
We'll ignore these and cut right to the cheese: Let's use our own Curve Components and see what transpires! We'll go to the Component Bar and see for ourselves some of the interesting Curves that can be had...
Now we're talking interesting transitions between two color values! We have effectively created a whole bunch of gradient sub-classes of the good old linear gradient: some linear stairs, a bi-linear gaussian curve, a linear noise as well as a linear arc gradient. Quite marvellous indeed, and so simple!
So what happens when we use a Profile curve? The tonal range of the linear gradient is remapped as if we had applied a Tone Curve to it. If you compare the Tone Curve result shown below with our linear noise gradient above you'll see that they are in fact identical. Of course, plugging the Noise Curve directly into the gradient's Profile input (as shown above) is more efficient than using a Tone Curve component.
 | For more info, see the Tone Curves Explained article in the Filter Forge help section. |
As should be readily apparent from these examples, using Profile curve inputs is a very powerful way of controlling gradient components. We shall keep this fact in mind as we continue with our gradient explorations!
Gradients, Seamless Tiling and Non-square Images
In the two images above we can see diagonal linear gradients rendered with non-square image aspects. Notice how the gradients do not stretch to fill the entire image (as one might expect them to), and partially repeat. They remain completely square no matter the image aspect, filling the greatest possible square area inside the image.
This behaviour is due to the fact that the Profile Gradient is a discrete component. It is a limitation (or a feature, depending how one looks at it) that we need to be aware of, since the Profile Gradient is the basic building block for all complex gradients!
| | Snippet Warning There exist several snippets that seek to overcome the limitation of 'discreteness' (the Proportional Gradient, for example). However, since they all fail to work correctly with Size (resulting in a broken filter), their use is strongly discouraged! |
Gradients also exhibit some interesting characteristics when it comes to tiling over large image areas. Although every component in Filter Forge supports Seamless Tiling, a gradient that is inherently non-seamless will always display seams, no matter what. The image above shows an example of an inherently non-seamless gradient: the diagonal linear gradient. Notice the highly visible vertical and horizontal seams.
Some gradients tile seamlessly in one direction only, such as the linear gradients in the example images above. Others, like the square gradient (which we'll discuss later) show no visible seams at all.
Conclusion
We shall continue our gradient studies in the next section. Stay tuned for the...
| | Bi-linear Gradient >>> |
