[00:00] In the previous lesson, we learned how to create different elements and use their properties. There's a few remaining tools available in our toolbox that let us further modify elements. In this lesson, we'll take a look at how to use each of these tools with these elements I've already created in my editor. We'll start with the selection tool located towards the top of the toolbox. The tool will be active by default when you open the editor and we are able to select our elements in a few different ways. We can select a single element by left clicking on it. For multiple selection we can hold our control key as we select the elements. Finally, we can also drag select the elements by holding down our left click. Dragging from right to left will select the elements when we come in contact with them. We can also drag select from left to right, but you do need to encapsulate the elements within the selection box. After an element or elements have been selected, we can then manipulate them further. For example, if I select the star, we get a number of available handles that let us stretch in different directions.

[01:06] We also have a handle located in its center that we can use to click and drag the element around. If we left click on the selected element, then our available handles change allowing us to rotate the star. It will rotate around the anchor point that we see within its center. This anchor point can also be repositioned if we wanted to rotate our element elsewhere. These actions can also be applied to multiple elements at the same time, so we could multi-select both the star and the circle element and then be able to rotate them around the anchor point. Below our selection tool, within the toolbox, we have the path tool, which exposes the available nodes and segments on path elements. If we select a path element and click on the tool, we'll see the paths nodes appear, which mark the different points separating our segments. Selecting any one of these nodes does a few different things. We are able to click and drag the node around to a new position. We get a handle for the previous segment letting us change its curvature. Towards the top of the screen we get access to a number of commands specific to nodes. With a single node selected, we can remove it using the remove selected nodes button.

[02:12] This removes the node from the path further extending the length of the segment it was sitting on. We can use the break nodes apart button, which splits the node in two, giving us a new node at the same position. Nodes can be turned into sharp corners with the make selected nodes corners button. You'll notice that after converting a node to a corner, we no longer have the ability to change the curvature of the previous segment. Converting the node with the make selected nodes smooth button provides the available handles to change the segment's curvature from each node connecting the segment. Now, if we select multiple connecting nodes, we'll get access to additional commands. You can multi-select nodes by holding the control key as you select them. I'll go ahead and select these two nodes that are connected to one another. We can choose to add a node on the path between connecting nodes, which places the new node at the midpoint of the segment.

[03:04] Segments between two connecting nodes can be altered by using these buttons to make selected segments straight or curved lines. Finally, the join selected nodes button makes it so that actions applied to one of our nodes also applies to joined nodes. For example, if we drag one of the nodes around, we'll see the joined node will also be repositioned. There is one command I will make note of here, which is this convert object to path button. We can use this command with any non path element selected. For example, we could select the circle element and then click on the button. Since our path tool was already active, we can see the circle now has its own nodes that we can modify. Looking at the circle element, we can see that it also has a gradient applied to its fill. This leads us into the last tool we'll cover, which is the gradient tool. Since the circle element is already selected, we can click on the gradient tool and it will provide us with some additional handles to alter the gradient. We get two handles that let us reposition the color stops on our range.

[04:02] These handles out on the edge let us change the flow and direction of the gradient. If we change our fill from a linear gradient to a radial gradient, we'll get additional handles letting us further control the gradient along each axis. The handles for the color stops will mirror each other no matter which axis you are moving them on. The handles on the edge work independently from one another allowing us to change the length of our color range on each axis. They will, however, follow each other if you rotate either one of them. The gradient tool also works on stroke gradients as well. You can apply a gradient to an elements stroke by first clicking on the element stroke color property and choosing a gradient. Let's go ahead and set a linear gradient on the stroke and provide some new colors to each of our stops. The gradient tool provides us a new set of handles specific to the strokes gradient. We can similarly change the color stops and direction of the gradient. Of course, we can also apply a radial gradient to the stroke as well, which again gives us handles to control the stroke gradient along each axis.