 Hi everybody. How's everyone doing? Good. Glad that you guys came. So we're here to talk about and work on fedora badges. I see a few people might have already done some or a lot with badges. Yeah, I'm Marie Moran. I've been working on badges for about four years. And now I've been working on badges I don't know how long. And this is... So I'm Kanika. I'm contributing to badges for about 20 years. What else? Oh, did you have something, John? No, you should move in a little bit. So first we're going to talk about badges just a little bit and then we're going to run through a quick tutorial and then we're going to get everyone set up to go and then we're going to pick up tapes and start working. So if everyone's ready let's like jump in and do this thing. So obviously designing fedora badges is fun. We do it as a fun part of fedora to bring more contributions in. Here's our blog where we talked about our work. Okay, so let's look at the badge itself and I'm just going to go over here. That's okay if I have to take this thing. Okay, so I'm sure you've all seen a badge and if you have not seen a badge in your life just put your hands up. So the badge constitutes like five different things. There's an outer ring, a little drop shadow, there's a colored ring, and there's a background, a background in the graphic. And what you need to know about this one is that the color drain and the background change from batch to batch and there are different categories and we're going to get to that in a bit. And then the graphic is the fun part actually that you get to design. So an important note here is that all badge designs will have all of these elements. So whenever you're designing a badge on your own, you want to make sure that you have each one of these elements in your design. All right, so this is what the website looks like. You know we have a profile for each person because everyone logged on and seen what their their profile might look like. Yes? Okay, cool. So you can see history sections. It's broken down by the six different categories. Okay, so recently we moved to Beggar which is new and exciting and we're very happy to be there. And the other day I was trying to remember what the door hosted looked like. So have you moved to Beggar? And I'm sure you've all guys seen Beggar, right? Yeah, okay. Well the good thing about it is that it's new. First of all, it's new and shiny and it's beautiful and the UI is beautiful and we love using it. And then it has tags and so you can store your badges right now. And also you can add images just directly upload them into your tickets which is so cool. And there's more stuff and I guess we'll just have to see. Okay, so there's design resources for designing badges. So before you start designing badges you want to make sure that you have all these and when we get to that point we'll make sure that everyone's got them. But there's a style guide. So that's something very helpful that you want to reference while you're designing to bring your design in with the aesthetic of the rest of the badges. Although we have many different artists working on it, we do have like a general look and a feel that we want to go for. And there's just a few different tips that you can learn from the style guide that will help help it kind of feel cohesive. Because obviously there's all different kinds of art that can be made. So we want to kind of keep it somewhat streamlined. We have templates for you. There's palettes. So that's another thing that helps the aesthetics stay together. We kind of use the same colors throughout the whole set of badges. And there's content which Kanika's going to talk about momentarily. There's some very exciting stuff going on with a symbol library. So we'll get there. Do you want to go back for yourself? Yeah. Just to point out, there's a tutorial with all the links that you might need. And I'm trying to make it a little tiny URL for you or this QR code. So you could just go ahead and get it in the background if you want or if not we'll get to this later. Would that ever anyone need this up for a minute? Do you have the link? Are we good? Oh no. Okay. So if you get the dagger and get it just put our badges right there. There are a couple things you need to know. So there will be a list of badges and Marie here did triage and she categorized all of them. And if you are designing your first badge, which you want to do, you want to go for the artwork easy kind of badges with the artwork needed signed by it. So basically these badges will have the full description, the artwork concept, and you just need to go in and kind of draw the badge. And that's crazy. Yeah. Do you want to add something? Oh. All right. Great. Do we need to switch to... I think we can go through the... For yours right now? Yep. I'll just drag it over. Again we're going to do one for the single library. So you can go ahead and I can switch your slides when you want. So hi, I'm Kanika. So I recently started contributing for making badges. And I used to use Enscape for making badges. So I thought of making... Like working on a new project. It's a small project called symbol library. So symbols are basically the pre-made SPGs that are saved under the tag symbol in SPG files. So then you release off Enscape 0.91. They have a new feature called Enscape... sorry, symbols dialog. So it will help you to make your own symbol library and you can use it anywhere in... like you... it's very easy to install a symbol library and use graphics as a symbol. So a symbol library is a document which consists different symbols under the tag symbol. Each symbol tag is a complete symbol itself. So when I started working on badges, the thing that I used to feel that the resources are scattered, they used to be in zip file but it was... I was a bit lazy so I need to go to the zip file and zip it and import a single SPG. So I used to find it a bit time consuming. So I thought of making... collecting them under a single library using the symbol feature that was introduced in 0.91. So to reduce the efforts of using resources which are made with so many... so much of hard work by the design team, I thought of going forward with this project. So how does it work? You need to download one SPG file which contains all the graphics in the form of symbol. Then you need to install it. Install it as in... there's a folder.config in your home directory. You need to go to the Enscape folder under .config and then you need to make a folder called symbols. Under that folder, you need to paste the downloaded SPG file. Then you need to restart your Enscape and then you need to open the symbols dialog box or you can just press shift control right and you have to drag down to the new symbol library like Fedora's graphic library and you just need to click and drag the graphic for using them. So you don't need to... you will see all the resources present for the design team which has been given by design team in the same dialog box. So you need not switch screens for seeing different graphics. So it's very easy to use. What are the different libraries already present in Enscape? So there are five basic libraries already present. Map symbols, logic symbols, the mail symbols, dot symbols, the flowchart and the word buttons. So these are the basic libraries. So we thought of coming up with Fedora library. It will contain Fedora characters like Badgers, Pandas, Penguins, these and the Fedora graphics which the design team has made like the flag we have and the beakers. What are the other graphics other than the characters and backgrounds? So these are Fedora's graphics and simplified backgrounds. So symbol dialog is a new feature in Enscape. So it's not that stable. So it cannot support complex graphics to be converted as symbols. So right now we are planning to add the simplified backgrounds or the simple backgrounds that can be converted to symbols easily. So we are making one library which contains all these graphics for simplifying the Fedora batch making process. So advantages of this library can be like there are advantages. So you can make badges faster. Symbols can be made. So now you must have noticed if you have made the graphics, the badges, the graphics sometimes we don't understand that what the graphic is. It's like if we use them they will be looking good but we don't know what the name of it or we are just confused what does it represent. So in symbol library we can add a description to the symbols which can make it easier for the contributor to understand what the graphic is about. Symbols can be edited. So the resources we have these are SVGs. So it can be edited very easily. So the symbol they also can be edited. So there's no restriction of editing it. You can go to edit in Escape, select the symbol, edit, clone, unlink, clone. So it will convert the symbol into a growth. So you can edit it easily. There should in Escape there is a bug for symbol editing a symbol. It should be there should be an option under objects for converting objects to symbol and symbol to object. But there's a bug so it has not been activated right now. It has been worked upon and I think next release will be fixing it. So now it's a callback option to edit symbol using edit clone and unlink. So the disadvantage of using symbols are so I have shown a picture like Fedora symbol. It was a symbol I used this procedure to convert it into a group. Now I can edit it as much as per my wish, as per my needs. So these were the advantages. Disadvantages are symbols are like pretty new as I said. So they are not well tested. Sometimes what happens when we are dragging and clicking and dragging a symbol, if the graphic is too complex when we converted it to symbol, the escape document crashes. So it's like you need to be very precise in making symbols sometimes because if you make a symbol out of an object which has a lot of groups, it will be complex and it won't be converted to symbol easily or if it is converted, if you use it later on the document will crash. So it's a disadvantage. Very complicated SVGs cannot be converted to symbol. You will try to convert it but it won't be converted and it won't show any message that it has not been converted. So it's a disadvantage. Another disadvantage, so if you have a graphic which uses gradients and shadows, so these when you convert them to symbol, the gradients and shadows will be disappeared. Either it will be completely empty or the gradient, a base color will be given to the graphic. So the gradients and shadows doesn't work right now for symbols. So these were the disadvantages for this library. But I think Escape, this is a new feature. So Escape Community will be working on it and we'll come up with the fixes for this. So I have made this repository a trigger. I'll be updating a few SVGs there. You can go and visit it. Right now it's not been updated and I would like to thank Masha and Mary and Ms. Bo for helping me and coming up with this project. Thank you. If you have any doubts, you can ask. So this is the project that you are starting now and that you want to improve in the future to make it easier for us to produce some new gadgets. Because we went to the major repository and for the moment there is no files. Very exciting. Okay, so now we're going to do a design tutorial. So we're basically going to run through the steps that you want to take when you decide on creating a badge design. So we're going to go through quickly, but then we can kind of go step by step with everyone and myself and Masha and other people who are experienced will help you guys individually. It's going to go quickly. Don't worry. If you think it's going too fast, we'll come and help you guys all individually. Ready to click. All right. There you go. So first of all, what are we going to do? And again, we're going to do this in a second, which is run through. First of all, you download all the resources and install them. So if there will be a font, there will be a polarity, there will be a couple of refugee files that you can drag around. And then we'll help you select the ticket that you can work on. And then you can take it, assuming that you are in the design group, or if not, we'll add a view to the design group. Or you don't have to take it at all. I mean, it depends on what you want to do. Download and if I take it, then set yourself to owner and then you do the deal. All right. So once you've chosen a ticket and on the tickets that are marked as artwork easy, there should be a concept there. You are going to want to look at similar badges. So that will help inspire your artwork for the badge you're creating. This is good because once again, it helps it stay cohesive. And you can grab elements from those badges to make your artwork. There's a lot of reoccurring themes within the badges system. So it's nice to kind of reuse and mishmash what we already got going on. It's a great jump board for everybody. So from there you can gather inspiration using a search engine. You can see what other designers have done. Say you want a bicycle, the one that I think we're doing is a package delivery. We're using as an example here. So we decided we wanted a badger on a bike with a package. So I just googled guy on a bike and I grabbed a package and I grabbed a badger from a previous badge. Except that's what we always want to do because like try to draw a bike from your mind right now. You probably will be almost very good, but if you just google for an image, there you go. Then the important part starts. Now listen up. There's a style guide. The style guide is what you want to look at first because there are categories. Like I said, so all the outer rings are different colors and the background are different colors and that's why I need the style guide. So you want to go in, you want to identify which category of badge falls under. For example, it can be community or it can be development right or it can be content. And if you're having trouble with that, you can always ask Marie or me or Misa or Mary over there and then you can help you categorize your badge. So please use the style guide and also it has some very good rules on how to keep the badges consistent. So for example, the outline should be rather like you know and stuff like that. Okay and then there are templates for each of those categories. So you go in the style guide, you see what your badge category is and then from the resources you open the particular template. Now you don't want to change the template. The template is perfect. It's the perfect size and the perfect place. So when you export a PNG, it would be like the same as other badges. That's what you want to do. So you open your template, the inkscape and then it's saved as and pick your own name. And usually what you're going to manage is picking up the number of the ticket and the date you're working on or the place you're here, right, and that will help you organize your positive computer. Oh yeah, that's it for this one. And by the way, this is the link to where our resources are account. All right. So the next step and the next layer of your badge is going to be the background. So in the style guide we have subcategories broken down for each of the categories for the background colors. Now I'm going to admit that this is not as updated as it needs to be. There have been a lot of new badges since this was made originally. So you also want to use the explore page on Fedora Badges proper to get some reference for the background. So for example, under community, like we have a lot of member badges. So if you're a member of Sysadmin or you're a member of the design team or et cetera, et cetera, you have a pink outer circle and then the background of your badge will be green. So that's just one example. And there is there's plenty more of those. So those badges are those colors, the background colors you can find on the palette or the Fedora Badges palette, which we'll install and help you set up. Have you template open just new category? The next thing you can do is, having looked at the similar badges, you might want to grab one of the patterns for your background or, I don't know, you might create them, even, kind of you're feeling particular and creative about them, or you can just grab one of those. So I like the ways, I like the ways coming out of Sysadmin. That's one thing you can do. And then save. Yes, that's important. Definitely. All right, so the last and final element of your badge design is going to be graphics. So you can mix and match stuff that already exists. You can build your own, which I can show you guys as I go around, like a few tips and tricks to making and using inkscape, making objects. So you basically want to jump into that. And this is where the real drawing part comes into it. But luckily, there is a lot of artwork that's pre-existing, which you can work on. So you want to, once you kind of have a draft, you want to use the style guide to evaluate it. So what are my strokes, the stroke on the object looking like? Is it very thin? Maybe it's too thick? So the style guide will give you a reference for what that should look like. Also, am I using the right type base? We use Comfortod in most cases, unless it makes sense with the concept to use something else. And then once you're satisfied, you want to export a PNG. And if you're using that template, it should be exactly the right size. And then you save and, you know, export. Oh, right. Okay, so I think the point was that you might want to download an artwork. Okay, so if somebody, if you come to a badge's ticket and you see that somebody has been working on it, but this has been like half a year or more since they touched it, you should probably assume it's safe to take it. I mean, you can ask in a comment, like, they do mind if I work on it. But if they haven't done it for a while, it's probably okay. And this slide is about failure. There are some slight issues after migration, and so files might not always be visible. So usually you could come in and download the SOG from there, because you can't attach it for it where you can move the ticket. But sometimes you would see that they, like, it's not working, and then want to do, first of all, so this is the URL coming from Deras Hosted. And you want to place this bar with a figure, or if it looks like this already, but it's still not working, you might want to get rid of those files, such files before. It's kind of a workaround for Pajor. So we want to review it with you guys. You might have the need to download previous artwork, and this is the workaround to deal with that, because images didn't come over perfectly. So the problem is that, so I'm working on removing the files, but I've fixed the issue in Hubs, but the problem in Hubs is that whenever I try to do a migration, it creates a third comment. So I did it in one of the issue, and it created a third comment. It shows the proper image in there, but then we had the other two also present there. So we'd have to manually delete them? Me and Pingo are trying to figure out what's the issue in there, but it might be sometimes. Okay, cool. Thanks for the update. Okay, so once you have your artwork, you then want to upload the SVG and the PNG to the ticket. Now it's really important that you upload the SVG because we all know how life goes, you might get distracted, you might not be able to finish the badge, and that's totally okay. But uploading SVG the source file will help any future artist come along and be able to work on it. Also, if it's exporting strangely and you're not sure why, then one of us, the mentors for this project, can jump in and take a look and see maybe what's going on with that. So actually, for sure, you can just drag and drop the files right into that comment box, say, hey, what do you guys think? You could even comment me, Masha, Ms. Noel, Mary, into it and say, hey, what do you guys think? That will give us a direct, like, hey, this person's work counts actively. So we'll comment. And then you update the issue and then press preview just to make sure that those are uploaded. So press preview, don't see what happens. Okay, once you've done that, so if you've mentioned one of us, you're probably most sure to grab our attention. But if you really want to talk to some of the people, then you can just hop on to our design channel on IRC. Or you can even, no, don't email me. No, you can email me. I can email you. Masha might know I read most, but you can email me. I'm on IRC a lot less frequently. I have a separate full-time job. So I'm not online all the time. So for the batch to get pushed, you need to be approved. And that's what we can do. So we'll set our work to approve and then get approved. So that's what we're going to do. But before that, we probably, unless you're, like, totally amazing and great at it, which is definitely a possibility, we'll probably want to work with you a little bit to improve the design, just so that it fits in with the badges a little bit more. So you can expect some reviews and critiques, but it's all in the good name of our beautiful designs. So once it's all approved, then we say, hey, developer, come by when you can and push this out. That's the whole process. Who has inkscape on our computer right now? Does anyone not have inkscape? Does anyone have, does everyone have design resources? No. Okay. So first thing we're going to have to do is go to Peugeot, the Fedora badges, issue 528, and you can find the resources there. So