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
-
2:44Drawing Tools Overview
-
1:29Drawing a Line
-
1:38Fill and Stroke
-
2:29Gradients
-
1:36Eyedropper Tool
-
2:33Shape Geometry
-
1:17Editing Shape Paths
-
1:00Bezier 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 7.7
Transcript
(open in window)[00:00] As we saw from the previous lesson, every shape we create using the drawing tools has a fill paint or a background color. So here I have a rectangle, and I can go to the "Fill Paint" property under "Appearance". I click on the pencil to modify that background color. And there are quite a few options we have up here at the top. The first is to have no paint at all which will make it transparent. The second is to just have a single solid color, which we did in the previous one where I can make it red, green, or whatever color we want to choose. The third option is to actually do a gradient. And with a gradient I can have multiple colors that I can choose for the gradient. As you can see here I have two stops: I have white and I have black, so I'm going from white to black on my gradient. So really in the white, I can set that to whatever color I want. On the black, I can go and set that to another color and I can specify my gradient. It's possible here to right-click to add multiple stops, so I can go and add a stop, I can then choose whatever color I want in that stop. We can also make reflecting or repeating stops for our gradient. Not only can we make a linear gradient, we can also do a radial gradient where essentially it's going to go from the center, kind of go out. So there's a couple different options you have for gradients. When you choose a gradient, like a linear gradient, on the right-hand side under the toolbar, there is a gradient tool that we can work with to actually modify how that gradient's going to be represented on the component. As you can see right now, it's going from left to right. I can easily take the square and move it around, and I can take the circle and move that around to change the orientation of that gradient. So if you wanted to go from the top left to the bottom right, we can certainly do that. And you can make it larger or smaller depending on how big you want that to be. It also is the same if you make a radial gradient. So if I do a radial gradient, now I have a couple of different options. I can change the circle and how I want that radial gradient to actually look on the component. The last option we have for the fill paint is an actual pattern, so the very last one here we can specify a pattern. So I can choose any pattern that I want. Let's say for example I want to do maybe like a brick pattern here. So I come down, I'll choose this brick pattern, then you can specify a foreground color. and a background color. So background color right now is white. Let's say I want to make that green and then I want the foreground color to be like a dark red or something. As you can see now, it's actually changed. So we can make the fill paint be really anything we want, from no paint at all to a solid color to a linear gradient, a radial gradient, or we can do a pattern here.