Update Your Project With New Elements
Duration: 10:41
In this tutorial you will learn how to create animated icons from scratch by using the elements that you can find in the My Library section. This is the second part of our Getting Started tutorial.
You will find a written version of this tutorial below.
Let's open the Folder project. Let's see that animation one more time. If you notice the animation isn't that smooth when you drag the playhead around, but you can hold down Shift while dragging the playhead and you can preview your animation back and forth much more smoothly:
Let's make a second icon, starting from scratch. For that, I'm going to select the background of this pencil icon, and hit cmd+D or ctrl+D on Windows, or right-click and Duplicate. Now we have a copy of the rectangle. Let's name it Rectangle 2. I need this out of the Pencil group so I’ll drag it over here:
We will create a new icon using some symbols and shapes from the Library. First, I'm going to add a square. I would like to create a business graphics, like a chart that will be animated after we're done with it. Now to place it, we have some smart guides which will indicate the center of the square, and the element nearby which we want to align to:
Or we can hold down the cmd or ctrl keys, select both of them and make sure it is perfectly aligned by using these alignment options up here to align it vertically and horizontally. We can see it just in place. I will go ahead and select the Transform Tool and center the origin as well. Or you can use this button over here:
I'm going to change the color of this square and make it a lighter blue. Or reduce the Fill opacity a little, we can easily adjust it later, so it isn't a huge concern right now.
Let's add more. I want to create the Axis of this graphic and we can scroll down in the Library or simply use this search input to find the line. I'm gonna use this 3 points straight line. Let me add that. I will work with this Node tool, which will allow me to select the points or the nodes of the element:
Let me zoom in a little. Make sure you have the Snap-to-points option On. Now I'm going to reposition and change the shape to snap to the points of the square.
Now I'm gonna change the color of the line as well. I want to make it even a lighter blue, and reduce the width down to 3. You can also choose some stroke options here to make the joints to be square or round for example:
For this case, I'm going to make the line ends and the line joints all to be round. So, basically, we have the first part of our graphic, but we need to add something else. I'm going to choose another polygon. This hexagon looks good, so I'm going to select the Node tool as I did earlier, and I'm going to drag its points around.
You will see shortly what I'm trying to do here. Something that looks like a graphic:
I need the Axis to be on top, so I'm going to select this and quickly rename it Axis, and drag it over the hexagon element, which is not a hexagon anymore. Let's rename it something like Graphic fill or just Fill.
We can play with the colors as well. I'm going to make another shade of blue. You can choose whatever color you like. Now I'm going to add another line. Let's see the 6 points straight line. Let me change the color of it. I want to make it something a little more like this, this kind of green color. I'm gonna snap its points over the points of the fill shape:
We have an extra point here but don't worry, we're gonna place it on top of another one. Actually, we have 2 extra points, but that's not a problem. Let me drag it below the Axis element, and reduce the width of the stroke down to 3.
So this is a simple graphic icon that we just made using only the Library. Now let's select by holding down either cmd or ctrl keys. If you select the elements from the top to the bottom like this and make a group, it will maintain the position of the layers inside the group. Let me select undo to demonstrate that. If you select them from the bottom to the top, when you group them, the ordering of the group will be reversed. Keep in mind that it matters the way you select the elements before grouping them. So, I'm going to hold down the cmd key, select from the top to the bottom and group:
And is the correct order of the elements. Exactly the way I want them. Let's call this Graphic group. I'm going to center the origin because I want to make it a little smaller. I will hold down Shift and with the Transform Tool, I'm going to scale it down a little. We also have this background of the icon, which is still here in the Folder group right where we want it, between the 2 elements of the group. So, we actually need this graphic group above the rectangle:
I see that the icons scale down a little bit because the Folder group already has its scale properties changed. It's normal for the Graphic group to also scale because it is inside that group. Let's center it, select Rectangle 2 and the Graphics group, and choose these align tools to make sure that is centered and let's also center the origin.
We can now make a group from these two elements, the Graphics group, and Rectangle. Right-click and group, and let's call it Graphic group. Let me center the origin and center of the composition here. Select the Folder group and bring it to a more convenient position, or let's use these tools to center it. Let's check what we've got going on here:
Right about here, when the pencil icon almost finishes its animation, we want to start with graphic animation over here. Let's select the graphic group, bring it down here to hide it behind this section of the folder, and Shift+P to add Position:
Drag the playhead about half of a second and move the icon up here. It doesn't necessarily have to be aligned with the other icon.
We can also Shift+S to add the Scale animator and scale it up a little, maybe a little more than the other icon. And let's hit play:
This is basically how you can create a symbol or an icon using only basic shapes.
You can do more using others. You can adjust any sample from the Library, change its shape, color, or any style property. In the next tutorial, I'm gonna show you how to animate an element by changing its shape with the Morph animator.
Thanks for watching!
Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.