 So, hi everyone, my name is Mira. I am an outreach intern with Fedora and I'm a part of the design team. Marie Norden, the Fcake is my mentor. So this talk is going to be about designing Fedora badges in Inkscape and I'm going to start with a demo where I design a badge and she has some things that I've picked up in the last five months. So this talk is for anyone who is interested in design contributing to the badges team or learning about Inkscape. I will also be conducting a hands-on badges design workshop in about four hours. So if after this talk you would like to test drive your learnings, do join me for the workshop. If you have any questions, feel free to ask them in the chat box. I don't think there is a notification but I will keep on checking it periodically. Okay, so let's start. Hi Shradha. Hi everyone. I'm just going to share my screen. And for a moment I think, yep, there we go. So you can double click here to maximize this video so that this area is in focus. Okay, so what we're going to do today for the focus of this demo, we are going to design an events badge. So with specifically designing a badge that all of you will get, we're going to design the nest with Fedora attendee badge. The first thing you do is we'll set up the environment and collect all the resources we need. Right. So the first thing you do when you're making a batch is you download the template. And this is the badges website and you can go here and look at all the previous badges. So I'm going to talk more about this website in my workshop later. So if you're interested to join me there. I'm just going to visit the badge index. Okay, so here you can see the different types of badges. And today we're going to do an event patch. So I'm going to scroll down to the event category. I'm going to download a template from here. So I'm going to use an existing batch and modify the artwork so that we can use it for the batch. And I would suggest using a badge that is pretty new so that you know the design is up to date and there's a higher chance you will find the SVG. So, let's see. I'm going to use this, the Ohio Linux 2019 since this is 2019 is pretty recent. I'm going to use this one also if you want this. I think this, this one was made in the past two or three months. So this is also pretty easy to use this one. And if you click on the badge, so this will open the batch details. And if you go to the ticket, you can download the SVGs from here. I will do this in detail in the workshop. So right now I'm just, I have it here. So I've already downloaded it. And after you open the SVG, this is Inkscape. I've opened it in Inkscape for those of you who don't know. And this is what it looks like when it's open. Okay, I'm going to check if there are any messages. Hi, everyone. Okay. Great. So, so the first thing we do when we're designing a batch is we'll set up a pallet. So if you have, if you have not set up a Fedora pallet, this is not what you're going to see by default. By default, this is the pallet you're going to see. So if you're going to be designing badges, it's important that you set up the pallet. It's easier for you that way. And it ensures that all the badges that are made have a consistent style. So what we're going to do is we're going to set up the pallet. So I'm just going to go to this URL. This is the docs project. So the docs for the badges project. So you will find all the resources you need right here. If you don't have Inkscape, you can install Inkscape. Here are the links. So right now we're going to download the pallets. Right. So if you click on this, this is the basic color pallet, which is the requirement. So this is the GPL file. You'll see a bunch of hex codes here and these are the RGB values. So to download this, so this is a GIMP pallet file. So to download this, just right click, save link as. And so okay, so we have to save. So this is now a GPL file. So we have to save this in a specific folder. And this is the folder. So this is for Windows. You can find the folder. You can find this pallet, Inkscape pallets in your users. And then you go to app data, roaming, Inkscape, and then you go to pallets. For other OSes, you can look it up. It's very easy. You can just search and you can find where you have to save your GPL files. So I've already saved all these pallets. And after you do that, just restart Inkscape if it's already open. And you will see the option here and you can change it here. Okay. So we have now set up the pallet. So this next step is to import graphics. So we are going to design the nest with Fedora identity. So of course we're going to use the nest logo. So I'm going to import the SVG here. We import or control I. And I'm going to download the nest logo. I'm going to import it. I've already downloaded it. You can find it in the design repo and the ticket. So all you can just ask anyone in the design team. They will guide you to it if you're looking for specific logos or not work. So there we go. So now we have set up our environment successfully. And now we can start with designing the patch. I'm just going to check quickly if there are any questions. So the next thing that we're going to do is we are going to use this to fit here. So I'm going to get rid of the background. Since this is an SVG file, you can easily edit it. So all you have to do is you have to ungroup. So this is a collection of objects, which are grouped together. So I'm just going to ungroup this. We can also use the shortcut control or shift three. Sometimes you have to do it to two to three times depending on how many times it's grouped. So as you can see, we now have all of these objects individually. We can select them. Put that back there and we do this and we have removed the background. So you can delete it at this point. We are going to use this later. So I'm just going to keep this here. It doesn't matter because this is the page like this area right here. This is our canvas. So anything that is not on the canvas will not interfere with the file png. If you export it correctly, that is. I'm just going to group it again. So a tip to quickly select a lot of objects is to drag and select. And anything that is within this bounding box right here will be selected. So let's see if I do it only this, even though it's touching the cloud, it didn't select it. So anything that is completely inside the bounding box will be selected. So you might not think this is a pretty big deal. But when you have a lot of objects, this comes in really handy. Because sometimes there are a lot of objects placed close by. So all you have to do is make sure that it's not in the enclosing box. So I'm going to group it and we are good to go. So now I'm going to resize it so that it fits here. And the thing is when you're resizing objects, make sure that you lock the aspect ratio right here. Because if you don't, this is what's going to happen. So we do not want to squish this little word. We do not want to squeeze it, especially with logos. You have to be careful to not basically deform them in any way. And even general artwork doesn't look good when it's squished or squeezed. So just click this lock icon and there you go. So I'm just going to resize it. That's pretty good. Yeah. So the next step is, oh, okay. So these are my notes. I need them here so that I don't have to switch back and forth. I'm just going to drag this off the canvas. You can delete it. You might use it later. So, yeah. Now the thing is, I want to put this logo in the center of the badge. So I can either eyeball it, which is not going to be accurate at all. Or I can maybe use grids. So I can set up grids and try to measure it. But again, that is not going to be very accurate. Thankfully we have a pretty good tool here, which is called the Align and Distribute tool. So the shortcut is Shift, Control, and A. And you have a bunch of different options here. So as you can see, you can select the context here where you want to, how you want to basically align the object. So you have a couple of different options. You can align it to the page, to the last selected object, the biggest object. And after that, you have a lot of different options. So you can align the vertical centers, the horizontal centers, the top edges, the bottom edges. So this is going to make your job really simple and easy. So what I'm going to do is I'm going to select this object, then I'm going to select this shape right here. This is the center of the badge. I'm going to select this and I'm going to align the horizontal and the vertical axis there before. Okay, so this object right here, this represents the center of the badge. Some of you might ask why we did not center it to the page. And the thing is, the center of the page is not the same as the center of the badge. Because if you look carefully, there is a slight shadow here on the bottom. So what it does is it raises the center of the badge, a couple of pixels above the center of the page. And it's a very small difference, but it's enough to make a difference, right? So I'm going to undo it. So make sure that if you're aligning objects, align it either to this shape, or you can align it to the ring, or you can align it to the white badge shape. But make sure that you do not align it to the page because of the shadow. Okay, so now that we have aligned it, what's the next step? Okay, so there is this really awesome feature in Inkscape. And I'm going to show you what it does before I explain what it is because it's easier to explain it, easier to show it than to explain it. Okay, so this is the background that I had earlier. Let's say, for example, I wanted to put up a little nice sky sort of color here for the board, maybe, maybe. And I want it to be on the top half. Now how do I make sure that we have this correct badge space shape right here? How do I do that? There's a pretty handy tool and that is called set clip. So what it's going to do is set clip is going to, wait, I'm sure. So this is what's going to happen. Now I'm going to undo it and explain it step by step. So it helps if you imagine this shape, the shape that you want as the cookie cutter. So this is your cookie cutter right here. And this is your rule of cookie dough and you want to cut this in the shape of the cookie cutter. So what you do is you duplicate this object because this object is going to be used up when you are cutting the cookie. Okay, so I'm going to press control D and it's going to duplicate right on top of the original object. You can also right click and select duplicate here. Right. So a couple of people ask why we use duplicate instead of copying and pasting. And the thing is in Inkscape when you are copying and pasting an object, let's see. I have copied it to my keyboard and if I paste it, it's going to paste where my mouse pointer is. So you see it's going to paste it wherever my mouse pointer is. And the thing is you want the object to be on, you want the duplicate to be on top of the object. So that's why you should use the duplicate tool instead of copying and pasting because you're bound to miss the original object like even a couple of pixels. So after you do that, you select a duplicated object. Make sure it's on top of the cookie dough. That's how you cut cookies right and select the dough and set up there we go. So let's zoom in here. You see it's precise and it will be because we use the duplicate tool. And it's going to find applications in a lot of places. So let's see if you download a badge. So this is here we have this little badge of cowboy. So if I go right here and I release clip, this is going to release the clip. And I drag this right here. So we had this whole part right here. We had this whole badge right here. And by using the set clip to be actually cut it off. So it's a great tool when you're designing batches because you will want to use it. This is not a very natural shape this one right here. So your graphics are going to need to be clipped. Right. Also, as we saw this tool is non destructive. And what that means is you can use the release clip to have your original objects back. That's why we have this. We had the whole magic here. So this tool is really helpful. And if you download older badges, you can find a lot of artwork hidden in these clips. So yeah, it's I'm going to see if we have any questions. Hi Justin. Hi. Okay. So let's see. The last thing we have to do is right. I'm going to make the number. So I'm going to add 2020 here. Just in case. We have nest next year also. So Marie actually suggested this to me. So you need it's, I guess with experience, you have this sort of insight. I'm just going to use this. 2020. And we always use comforter typeface for any numberings or text that we use inside the batches. You can download the link to download this typeface is in the style in the docs page itself. So you can always go there. Now we just if you see right here, we have a very unique way of numbering. So if you see there are three layers. So this is the original number. There is a middle tone and then the darker tone. So what happens is if you zoom out. It gives it a sort of a 3d effect. And it's really cool. So we are going to see how we do that. So what I'm going to do is I'm going to first reduce the current in a bit. So that it's squeezed together. There we go. Yeah. Okay. So now we're going to use this to right here. I'm going to use the color picker tool. To change the color that I have. And there we go. So. Now if you click on this too. There we go. So what it does is it sort of creates a bounded area. With the color that you chose. Wow. Inkscape is exceptionally slow today. I think it's because I am also streaming side by side. That's okay. Okay. So we have this right here. And if I use this tool. I'm going to lower the selection. One praying. It doesn't crash right now. Cause I feel like it's going to crash. I hope not. So there you go. Yeah. So now. All the boundary areas are beneath the text. So you have this sort of call out line effect. And to get the third layer. I'm going to use this tool again. And hopefully it will be easier this time around. This. Yep. There we go. So it's. It created the outline for the whole. Thing because all of these were now touching. So. If I. Bring it to the bottom. I'm going to save this because I think. Inkscape is going to crash. Right now. Wow. Okay. This and the last thing we do is. Change this color right here to white. There we go. Great. So you can. Play adjust with adjust the colors, the thickness, everything. And then after you do that, just group it all together. I used to control G. I used to control G. Yeah. There we go. Wow. That's a lot. Okay. And. You can. Play around with it. Maybe you can change the color. I think this color, this one. I did not use the correct color. I think I should have used. Okay. I don't need this. Okay. It's going to work a lot better. So, yeah, we do that. You play around with the colors. You can even align. This whole thing. With the words. I'm going to use the line and distribute tool again. Yeah. So. I'm going to use the line and distribute tool again. Yeah. Yeah. So. Yeah. You should fix that. And after that, just make sure the background is. Um, looks good. And then you're good to go. You have successfully. Completed your first batch. Yeah. But the thing is it's not over. There is still a very crucial step. And I know we are almost out of time. Thankfully we are. About to be done. So this is the most important step I would say, because even after you did everything correctly, if you don't export it correctly, it's going to be reviewed and it's going to be exported correctly. So it's not going to work if you don't export it correctly. So this is the final badge. Um, made a few modifications, changed the background a bit. And then we export it as a PNG, right? So what you have to do is you select page here. Make sure you select the page because it's really important. We need to export it at this particular size. 256 by 256 pixels. If you export it as a drawing, which is the default option. What you're going to do is you're going to export everything right here. So if I do this. What's going to happen is. Let's see. Let me open this. Right. This is what's going to happen. You have this text also says it's going to export everything that is on the screen. So just select the page, export and replace. And. There we go. We just successfully designed the first batch. And after you upload it to the ticket, you upload the PNG and the SVG so that if there are any changes to be made, someone else can also do that somewhere from the design team maybe. And then you are good to go. So, and also this is the batch that all of you can get right now. So we go to the reception, you will find the link to get this batch. Ah, Marie. Don't forget to save. Yeah, it's really important to save. Happens so many times that. Yeah, the escape crashes. I'm going to stop sharing my screen. Yeah, there we go. Okay, so does anyone have any questions? You can ask in the chat box right here and we do. Yeah, I think that works. And if you want to ask anything you can always email me, contact me on telegram. My username is Mira Goyal. It's in me already. Oh, how do I design, join the design team? If Marie needs to ask that. Okay, so to join the design team, you can join the telegram group that we have. This is the picture right here. I'm going to open the design picture right here. Make sure you sign up. To the mailing list. Then introduce yourself on the mailing list and start contributing. This is the design picture and we also have the badges picture. So yeah. The telegram group, I think it's called the Dora design design, so you can look us up. I can put a link here if you want. Well, not Marie, but if anyone else wants. What link? Wait, I will drop the. Oh, thanks, Justin. I hope I have then I can help you work past that trouble point. I know even when I started initially there was a lot of problems that I worked that I had to work on. I was not exported correctly. I will not save it and escape crashes sometimes, especially since there is a new version of escape one point or two. Oh, right. The picture link. This is the picture one. I'm going to send the fedora badges. You can find all the open issues here. Maybe we will see you in the contribution part also. Yeah, so. I don't have any more questions. Yeah. Okay. So just a reminder to get your next badge. Let's see. What if I do pick this? How do I present my screen? We have three. We actually are over time. I'm just going to quickly show. How to. Yep. We can see my screen. So this is the reception. You go down here. You can grab your Nestle fedora attendee badge here. I already have the badge, but if you click it, you will see you can claim it. So this is the final badge. I hope it opens up. See. Okay. Great. Thanks for coming everyone. Oh, thank you. I hope it was information. I mean, I even I am a newbie. Thanks, Justin. I couldn't have done it without your word of confidence. Thank you so much. And I joined the other sessions now. And I hope I see you guys there also. And there's a workshop. There's a badges workshop session also badges design workshop in about three and a half hours. 1130 my time. So that's three and a half hours. Okay, so I hope to see you guys there. We can make our own badges. And hopefully I will see some of you as a part of the design team also. Thanks everyone. Thanks for coming. Bye bye.