 So, we can start now. Is everybody ready? So, we'll try to demo some inkscape features, simple features. A design I are part of LGM team this year in REN. We are CEO of Active Designs School and Studio. And we are mainly using inkscape for web designs, drawings, and UX design too. And recently we made some little games with it. So, the purpose of our workshop will be learn simple tools in inkscape to draw a little mobile game. Yeah. So, that's the result. We will attend. Okay. So, for that we'll create the background. Okay. We create some few buttons and assets like the egg or like the basket. And then we will add some text at the end. So, I hope we will have time to do everything. So, Elisa will draw and I will talk in the same time. So, this rectangle is the size we the target we may have in the smartphone. So, the size of it is it can be seen on the top bar. You have the width and the height. So, and then you can go to document property to set the document size to this shape. Document property is here. So, when you go to resize page to content, yes, you can resize page selection. Give the right size in the fields if you need. So, now we have this, this rectangles the side of the pitch. So, we can take the dropper and add a color to it as we shown previously. So, then we make the ground. So, little rectangle at the bottom. Take the color and just move it with the selector tool. As you can see, Elisa is often drawing on the workspace and then moving it to the drawing area. It's more easier if you want to draw because you don't have to deal with the stack of objects. So, she now duplicates with control D and resize the object with the arrow in the middle of the top border and change the color of it rectangle to have some gradient effect that will add a deep in the drawing. So, now we do the fence, which is white. It's a bit more difficult. So, we will have to make multiple elements. So, it's a little rectangle color in right with the swatch at the bottom. Duplicate with control D. Move it with control key or with space key. And you click how you press several times the space while moving the mouse. So, that makes copy each time you press space. And then you'll be able to align all the selected objects. So, it's selected the white rectangles and align at the bottom in the align and distribute. And then in distribute, the fourth button will distribute them equally. And now it's done. So, it takes the first and the last position and just make equal space between all the objects selected. So, if you want it to be from the complete left and complete right, you have to put the rectangle on the left and the right completely. So, she duplicated the rectangle. Just rotate it with the selector tool and resize. And then control D. Move. As you can see, the object is a bit bigger than the drawing itself so that you have white on all the drawing. Don't try to be too precise on such objects. So, now everything is selected at the bottom. And you can see the blue is not selected because only objects that completely in the selection box are selected. And then you can just group everything with control G. Okay, so now we add the button on the ground. So, she's taking an image. She grabbed before. This is a black and white pattern. It's very simple, like stones. And then she will vectorize the pattern, go into path, trace bitmap. There would be other ways to do it, but it's a way to keep everything vector. So, in the trace bitmap window, you can check for the right option. You need for the object. It's very easy because it's black and white. So, any object will be good. We need options will be good. And from that, you get only the black vector. The black, yes, black vector. And then you may use it as a pattern when going to objects pattern, object to pattern. So, yeah, now it's done. So, you can select the bottom rectangle with the node tool, the single middle toolbar. And in feeling stroke dialog, you can add a pattern. And now the last created pattern is automatically selected and is applied to the rectangle. Okay, so now let's add the gradients to the sky. So, she puts the sky on the top to see what she do. So, simply take the gradient on the left in the toolbar and use the color for it. So, selecting each end points of the gradient, you can change the color for it. Yeah, yeah, sure. Yeah, okay. Just say when you're ready. Okay, so yeah, yes, we will do a pose if you need to don't realize it's no problem. Just say, just say when you're ready. Yeah, you know, just do a search on stone seamless patterns, something like that. And your favorite search engine. Yes, exactly. We have one texture, one color for the texture, because it's only a path, a coupling path. So, it's very easy to change the color or change the opacity of all this path. Maybe you can show commit P or to change the color of the to do a second pattern with different color or to change the opacity, maybe of the path. So, in field stroke or in the, in the bottom, you can see 032. So, that's the opacity can change here without going to field and stroke if you want to do it immediately. But if you want to the pattern to have a different color than black, you will have to change the color of the original path and create a new pattern. We cannot change the color of the pattern like that. But in fact, stones can have different color easily by changing the rectangle color. So, it is showing how to create a second pattern. Now, unfortunately, in escape pattern gets automatic naming. So, when you have several patterns in a file, it's not very easy to remember which one to use. So, it would be nice to be able to rename them or to have an overview of them, maybe. If MC is listening. Okay. Is everybody okay with the pattern? Okay. So, let's go on now. So, she's grouping again the fence. And now, we'll do the montains at the bottom. Can you show the picture, maybe? Ah. Okay. Allie is not ready with the pattern. Let's wait for Allie. I see. In fact, you can use the bitmap as a pattern if you want. But the problem is you cannot easily change the color. So, vectorizing it makes it possible to have colors more customizable. So, for the montains, we use several tools. We use Bezier tools, mainly, which is the most important tool in vector drawing. So, as you can see, it's activated. It's just under a spiral tool. And then you can just click on the page to draw triangles. If you have already seen montains, you can know how to do triangles. As you can see, she will make symmetric triangles. So, she'll have two parts montains to use shadow. So, she changed the color again. They let the stroke and then placed it in the drawing and changed the stack. No, no. Okay. Sorry. So, she will do the mirroring. Now, move it and change to a darker color. Yeah. So, now you can group and move it wherever you want to place it. And duplicate to have other montains where, as we know in Brittany, there are many montains. And just resize everything to make it more beautiful and resize move to place it correctly. As you can see, when we have a group, we cannot access to all the objects of the group without using the node tool. So, if you have a problem, you can take the node tool and just put the mouse on the corners. And then you can move the node to have better results. So, now she wants to do the snow. So, just zoom with your mouse on the zoom tool. And then you can follow the shape of the montain as precisely as you can. You can improve it with the node tool after. You could also do it with Booleans if you want. So, you have to do the same as we did. So, we need two shapes because there are parts which is in the shadow. So, we need two shapes for the powder snow. So, now we have a stroke here. So, change the color of the field. And then, yes, make no stroke. You just press shift and click on the first color and the swatch at the bottom. So, some refinements now. It's still perfect. That's quite okay for our crop. The color of the mountain is not realistic. Say, Ali. I'm sorry, Ali. We don't have many mountains here. Just send us a photo. Maybe we can pick a color. Commit P asks if we could have made the color palette a switch at the bottom. Yes, we could have done this. In fact, in the swatch at the bottom, you have at the complete right little triangles which open the menu. I think you set this menu to auto. It's accessed the color palette of the document. So, by default, maybe you can show it, Elisa. The auto color palette here. So, you can click here. And here you have all the swatches given with Inkscape. And you have the auto at the top because it's an alphabetical order. And here you have the palette of the document. So, if you want to add the color to this palette, just select it somewhere, for example, here on the document, and just create a swatch from it. And it's, oh, that's nice. Because we are in stroke up. I was on stroke and it was not on the field. So, there's no stroke on the subject. So, that's why I get white here. So, I'm on the field. And then, yes, I grab the field color of the subject and it's added to the swatch. In fact, swatch does not really exist in SVG. So, this is a trick here. So, a single color are registered as gradients with two stops of the same color. So, but it works. So, it depends. Some people prefer having nice swatch at the bottom. And some people like Elisa prefer adding color on objects in the workspace and use the dropper to pick them. So, now she wants to do the blue ears just in front of the mountains. So, take the circle tool, put color on this, and then we'll convert the circle to a path so that we can get the norm of the circle and modify the shape freely. And then move it and duplicate several times. They are not really big mountains too, really. Even ears. And they are blue. It's a nice color. And as David said, this palette thinks ear from years. I remember that John Cruz who created it, maybe the second LJ Emil was already here. So, how do I know to be a girl? Oh, it's really simple. If you have the node tool, just put the mouse on the border of the objects and double click. Usually, we try to have as few nodes as possible because it's much easier to change the shape if you don't have too many nodes. But in fact, this tool is much more practical in Inkscape than it is in Scribers, for example. So, now she wants to do the clouds in the sky. So, again, use the circle tool. She could use processing, but not today. So, duplicate using a spacebar and moving the mouse. Select all the objects and then go to path union, which will make a union Boolean on them. So, it will now remain as a single object, which is different of grouping. And then you can do the same for all the clouds. You could have duplicate the first, but this way they will be different. And union again. All right. Yes, there's a Bezier tool in Scribers. If you didn't delete it, yeah. So, now there's a little darker place, kind of shadow at the bottom of the cloud. So, she's doing it with the Bezier tool, moving points. You can see she drew only segments, but it would be better to be curved. So, she would grab each segment and just moving the mouse with the left button. You can change the shape of the curve and eventually grab each control point. These are the little circle and zones to change the shape of the curve too. This is certainly the more difficult part in Escape. Be able to draw the curve we want to get. So, beginning with straight lines can be easier. So, then you're going to have to foresee how to manage with handles. And you can see the result as you are moving them. It's important to grab handles because when you're just picking the line and moving them to make them curve, the result is not really precise. So, we often need to refine with the handles and then change color and no stroke with shift key pressed. Okay. So, the next part will be to hide everything is outside the game area. So, she selects the background, which is the right size of the document. And she's grouping everything and putting back the background in the right place and select everything, the rectangle and the group object. Then go to path, clip and set. And this way the upper rectangle will hide everything that can be outside of its shape. But it remains here. It's not cut, just masked. So, we can and do this easily at any time. I'm saying that's true. Knowing what to draw is the hardest part here. That's the hard part of the job. But in fact, drawing more things like this is quite easy, but it could be much harder if you want to draw, for example, character assets. I couldn't draw like Diva, for example. So, it's not always the idea. It's also a knowledge of drawing and practice. So, now we are beginning with the eggs. So, make an ellipse. Convert the ellipse to outline and just move the bottom node a bit to change the main shape of the egg. Try to keep the symptoms symmetric. So, its form is well. Yeah. So, if you want them to keep symmetric, there's a button for this in the Induction Bar, as you can see, select the node symmetric so that the handles cannot be moved apart. So, it's the knowledge how to move handles to get the right shape. So, there's a bit of practice in this. So, now we can add a gradient. So, she decided to create the gradient directly in the fill and stroke dialogue. So, just pick each handle, the center handle, which is the core color. And then you can pick the outs and those to change the second color of the gradient. If you want multiple color of the gradient, just have to double click with the trial gradient tool and just change the color for each step you have created. So, it's quite easy, not always really beautiful, but that's not very difficult to do. This gate is very good for her. So, she likes gradient a lot. Yeah, rainbow egg. Exactly. She could have put rainbow egg. So, an example how to do a simple shadow with gradients, for example. Of course, it's not realistic, but vector drawing is not made to be realistic in fact. So, that's no problem. Egg of unicorn? Do you have a unicorn at home? Yes? In the bathroom? Yeah. Yeah, save orphan if you're not sure of your inkscape. Here, Alisa has the beta. So, that's why it crashed previously, but usually inkscape doesn't crash out. So, it might be good, but save as SVG. Yeah. So, now she's adding some text because text is important in vector drawings usually. So, simply use the text tool in the toolbar, click on the somewhere in the workspace and just type your text. So, then you have to change the color of the text. So, she has some problem here. Okay. So, the text color can just be set as the same way other objects. So, just select the letters or the complete text and click on the swatch or in the color and field dialogue. There's no special dialogue for this. Yeah. I was not sure there would be unicorn eggs, but okay. So, now she's trying to demo a new feature of inkscape 1. It's variable fonts. So, doing this you have to have compatible fonts. You can grab them from any good site. For example, Google fonts. And, for example, she grabbed Rosario, downloaded it and installed on the computer. And, unfortunately, you have to launch inkscape when you're installing new fonts. So, when you have the fonts, you can then use it. So, you have a weight slider and the weight slider changes the weight. Okay. So, when you click to apply, set the bolt at the weight. Okay. And then, in the tool, the text tool, if you want to reuse the weight several times, you have them directly in the style setting of the photo fonts. Yeah. So, that you can have as many bold variations as you want. So, now the artistic part, that would say word art, you put the text on the curve. So, dual curve with the with the PZ tool. But it depends on how you do it. It's not in the extensions. Put them in the path. Yeah. Put them in the path. Yeah. That's it. I've never used that before. So, then, if you have the text written on the path, you can go, you can select both and go to text, put a path, and then the text just take the shape of the curve. I guess there's an effect for this filter. So, the path you can see is here. So, once you move the path, the text is automatically adapted to the shape. Beautiful. Yeah. Is the direction of the path relevant? Yes, it is. Yeah. So, here the path is drawn from left to right. Yeah. So, path is a vector. So, it affects vector direction. Okay. So, now, try to improve the text a bit. So, it replicates the text, changes the color, and... So, the display view is really cool. So, it's in the view menu. So, you can easily get the components of your drawing without going to change the node options. So, it's really handy if you want to change hidden path, for example, like it was. Yeah. You also have an X-ray mode, if you want, for more precise or rare. Okay. So, she decided to make some kind of stroke on the text, but problem with normal strokes is that the stroke is placed on the border and we will overlap the letters. So, by using path dynamic offset, so we'll be able to increase the size of the letter shapes so that you can have some kind of stroke on the letters. So, you can do it as many times as you want and add stroke on it. So, good. Nearly good. There are some bad effects here, maybe a bit larger. It would be good. Okay. So, I think it's done now. Just have to put the text on the game and import it in Godot and make an executable of it. So, is there any other question? It's good to see that some people did learn some tips like swatch, for example. Did you have enough time to see Godot integration? Seven minutes. Yeah. Do you need this to export your asset in SVG, in PNG first, because it's not easy to import SVG in all software. So, yeah, the problem is that Inkscape is quite powerful with SVG. So, we can attend Godot to import everything. So, show students the project. So, in Godot, you have to import the asset in resource directory and you have to have a scene for that. And each scene will have a sprite node. And you can set the texture of the sprite node with the image. Simply import it for its PNG. You don't have problems with Alpha, for example. That's interesting. Okay. So, there's no other question. Good. Thanks a lot for participating. And we're happy to show you all this stuff. And we hope it would be useful for each of you.