the last couple of videos covered how to use vectors for cartoon animations on capcut and if you haven't checked them out yet I suggest you do first before you watch this video. I did show how it's done in illustrator, but a lot of you guys pointed out that I was either too fast on that part, or, simply, that not everyone has an Adobe subscription. so I decided to make this short guide dedicated to the free tools PhotoPea, and Inkscape now EPS SVG and AI vectors mostly come in these three extensions: EPS, SVG, and AI. and while the AI extension works fine in both tools, EPS works only on Photo Pea, and SVG, only on inkscape. so i'm just going to focus on these 2. and show you for each one how to operate backgrounds and characters. and by the end of the video, it's gonna be "just like" if you had Adobe Illustrator and you'll get to know which one of Inkscape or Photo Pea I absolutely prefer. let's get into it. so as usual, I start by searching for vectors for this tutorial. since we just wanna focus on photo pea and inkscape, we don't need a good or specific scenario. let's start with photo pea. so I just search for a cartoon scenery, filter to vector and EPS extension. so I'll just look for a nice background that we can split into layers. and i just take this one, and download it. we then go to Photo Pea and open it up and let's start with the basic controls on Photo Pea. first thing to always do, is to make sure these things are activated: starting with "auto select" this allows to select multiple objects with the mouse which is very important. you also need to go to "view" then "show", then "select paths". this will allow you to see what you select, with a highlighted blue colour. very very important. and finally, select this "transform controls". this way you can resize the objects by coming to this corner. and by hovering the mouse around the corner, you get this sort of curved arrow, that allows you to rotate the object. another tip if you ever want to tweak the vector, select it and go to this button, called "Direct Select". that will allow you to select the anchor points, and adjust everything about the shape of the vector. and another thing, you'll often need to scale up to get a better pixel resolution. but you might find yourself with this mask limiting the image. to remove it, go to the right panel, and right click on this little rectangle. then select "disable mask". and really, that's the basics. so let's say we want to split this into 3 layers: the background with the clouds, this sort of hill in the background, and this foreground with the tree. always start by discovering layers. click on things see what's in groups and what's not, and see if you need to do it with the layers, or simply with the mouse. so by playing around, it looks that I can take this background, simply by selecting the objects, holding "SHIFT" to select multiple objects. but no. look: it doesn't select this outlines of the clouds. so let's try with the layers, and try to click on the eye, to see which group is which object. and this will really depend on the artist, and how he organizes them. but this file seems well organized, each group seems to be a separate object already, so that's good. and this one is the sky, the sky and clouds are already grouped. so what we can do is double click and rename it, for better view. now here are two ways to save this layer: option No. 1 : I deselect all the other layers, and only keep the sky. then I go to file, then save to PNG. and it will save this sky separately. option No. 2 you wouldn't need to deselect the other layers simply right click on the layer you want, and create a "smart object". you can double click on it and it will open it in a new window. you can then save it to PNG. after this I use the same process, with the other layers that I want to split. with just a couple of clicks, you can find the object you are interested in. rename it and use one of the two options I gave you. in most cases creating a smart object is a faster way. and I get these 4 separate PNG files, really in a couple of minutes. and of course you could directly use them in CapCut. let's stay on Photo Pea, and try with an animation character. with an EPS extension. I go back to freepik, and search for a character. as you can see, some are pre animated, and some others break it down into body parts. let's go for this simple animation character for now. i download it in EPS format, and open it up in photo Pea. as usual: "layer discover".. and actually for these type of vectors, you can directly go with "mouse selection", as objects are distanced with each other. so i can select these little "walking guys", and duplicate them by holding "ALT". we can bring them down to work on them. but as you can see they're not visible because we're out of the art board. so go to the left panel, long click on this arrow, and select "Art Board Tool". go and draw a big rectangle, where you'll be working on your frames. also add titles so that you know what you're working on. here we actually have 6 very good frames, of the character walking. so we can just mirror them, to create the complete cycle. select the whole body, and hold "ALT" to duplicate each one. in mirror. here, the best way to export each frame is clearly using the "smart object". select each frame with the mouse, and create a "smart object". a better way to do it is going to the top bar, and select "layer", then "create a smart object". do this for each frame. then select each smart object, and double click on it on the right panel, and export it to PNG. and after only 2 minutes, you get some frames for the character walking, that you can adjust a little in CapCut okay now let's leave photo pea aside, and go look at inkscape. and as you'll see it's a way better user interface. we'll do a complete benchmark at the end. so head to Inkscape's website, download it and install it on your PC. it's completely free. now it doesn't natively open EPS formats, (although there are some workarounds to do that) so we'll go and download some SVG files from freepik. we look for a similar background, download it in the right format, and open it in inkscape. let's look at some basics: zoom in and zoom out holding control, and the mouse wheel. also the good news is that you can select deep layers, just by double clicking. let's say I want to select this deer, I double click until I get this rectangle around it. I'll even double click to this "skin Mark". and I can see that I can move it around, I can resize it just like in photo pea. and by clicking again, I get the rotation feature. I can also pick any colour I want, and by clicking on the Anchor Points feature, I can modify any part of the vector: the shape and the curve. by playing with the little diamond, and the levers. when you're done, you can double click outside of it, to get out of the group. now if I want to bring it up, I might have to bring it to the front layer. to do that, select it and drag it to the top. now once you know this, Inkscape is very easy to use. so let's say I want to split this background. you just need to ungroup until you get it right. see I ungroup a first time, and take a look: I already get the layers that I want. I just click on them and bring them apart. and the export is also easier on Inkscape: simply do a mouse selection, and go to the right panel, in the "export" tab, you'll find another tab called "selection", and "Export selection only". then click on "export". I do this for each of the 3 groups, and I get my 3 layers for the background, in a matter of 1 minute. let's look at another example on inkscape: an animation character. as usual freepik, set the filter to SVG format, and vector files. and, look at this: this sprite sheet is also available in SVG format. let's take it and open it in inkscape, and try something different than the previous examples. okay first, always scale up to get a better resolution. on Inkscape, hold control while scaling to keep the original ratio. as I said earlier, how layers are organized depends on the creator of the file. in this case as you can see, the heads are grouped together. and so are all the body parts. so I need to ungroup them one by one, so that I can select individual characters and while you're at it remove all backgrounds as they'll be bothering us with our mouse selection. if the ungrouping takes too long, you can always go to the right panel, select all with "CONTROL+A", right click and ungroup them all. and now, I'm going to show you how easy it is on Inkscape. let's prepare a zone for the character running, and another for face expressions. for running I just take these two frames. and export each one in a separate file like I just showed you. and in a matter of 30 seconds, you have a "basic" running character. let's now try some face expressions. I choose this one and duplicate it a couple of times. (in inkscape you just do it with copy paste) now let's bring the face expressions, since they're all ungrouped, I need to do it with "mouse selection". bring them next to your characters, and start picking. let's say I want to change this mouth. I just select it, and move it away. I bring another mouth expression, and place it. now as you see, I need to put the mustache on top of the mouth. so I select the mustache with mouse selection, and this is easier on inkscape. because only "entire objects" count, (unlike Photo Pea). so like we did previously, I just drag it as high as I can, until the mustache covers the mouth. I can do the same thing with the eyebrows. just bring the one you like, to replace the previous one. you can do this rather quickly for each character. and the anchor points can also be used here: simply select this second button on the left, and these little diamonds appear. and you can play with them as you like, to create alternative frames. the rest is exactly the same as the background: adjust your frames according to your wishes, and export to PNG. and now, we get to what I think is the most important part. as announced this guide is focused about the free tools, to use the vectors. and before you start mastering one or the other, it's important to know which one to choose. so let's put them both to the test. when it comes to supported formats photo pea supports AI and EPS. inkscape on the other hand supports AI and SVG. so that's a tie. but when it comes to available vectors, photo pea wins by little. (as EPS formats are a little more available than SVG) although SVG files are also very widely available. when it comes to user interface, they both have the main controls and features rotations scaling anchor points, and so on. but inkscape has some better features like "double clicking" through layers, and a better mouse selection system. then, it's in productivity that inskcape starts to show it's power. while Photo Pea just runs on a browser, and has a very limited exporting system, inkscape just responds better, and allows for a very simple export system. and that's for performance in general: Inkscape will better handle images with larger resolutions. and will not lag like Photo Pea does in large files. so, "technically", inkscape surpasses photopea. and if you're willing to limit yourself to SVG or AI formats, inkscape is clearly the better choice. and really, I shouldn't call it a limitation, because there are millions of SVG and AI vectors out there. and in both tools, if you're really motivated, there are plenty of resources on their website, for detailed explanations on the user interface, shortcuts, and so on. if you have any questions leave them in the comment section and don't forget to subscribe for more. cheers
