You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
5:04Drawing Tools Overview
-
1:57Drawing a Line
-
1:42Fill and Stroke
-
2:16Gradients
-
4:05Eyedropper Tool
-
4:54Shape Geometry
-
3:09Editing Shape Paths
-
2:54Bezier Curves
Take Topic Challenge
LESSON
Gradients
Description
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
Transcript
(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 popup 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 popup 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. 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.
[01:05] 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. 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. The repeat pattern will repeat the pattern forever. Let's move on to the fourth tab on the popup menu and 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 popup 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.
[02:05] To recap this lesson, we have learned how to configure a shapes fill with a linear and radial gradient or a specific pattern.