Gradients smoothly blend any number of colors and can be positioned along a straight line or form an ellipse across the shape.

Video recorded using: Ignition 8.1


(open in window)

[00:00] As we saw in the previous lesson, shapes created with the drawing tools have a fill paint property we can configure. In today's lesson, we will learn how to apply a gradient to our shapes fill. To demonstrate this, I have created a rectangle component on my window. Again, we will access the fill paint property by clicking on the pencil icon in the property editor panel. We are familiar with this pop-up that allows us to apply a color of our choice or no fill at all. In addition to those options, the third tab on the pop-up menu allows us to configure a linear gradient. A gradient is defined as a range of position dependent colors. We can see our rectangle now has a gradient ranging from a white to a darker gray. This gradient is being configured by the gradient bar within the Pop-up menu. We have two available color stops or positions on our range. We can change the color of each by clicking on the stop and choosing a color.

[01:07] Additionally, we can add more stops to our range by right clicking on the gradient bar and choosing the add stop option. You can see this stop applied a white color to the middle of our range. However, we still have the option to change This stops color as well. In addition to changing the gradient from the fill paint property, we also have access to the gradient tool located on the right hand side of the designer. If I click on the gradient tool, you will see the rectangle now has two handles along a line. By clicking and dragging one of the handles, we can manipulate the position of the gradient. Let's go back to the fill paint property to view some additional configurations we can make. If we right click on the gradient bar, we can change the pattern of the gradient. The reflect pattern will show colors reflected and drawn in reverse, and then reflected again, creating a smooth repetition. The repeat pattern will repeat the pattern forever.

[02:06] Let's move to the fourth tab on the pop-up to apply a radial gradient. The rectangle now has a gradient that has colors emanating from a point, creating an ellipse of each hue. Radial gradients still have access to the gradient tool as well, and we can manipulate the gradients position. Finally, let's review the final tab on the pop-up to apply a pattern paint to the rectangle. On this tab, we can choose from many patterns to fill our rectangle and change both the foreground and background colors. To recap this lesson, we have learned how to configure a shape's fill with linear and radial gradients or a specific pattern.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.