 Best about to start the Brandon badges half-a-door designers create with inkscape talk with wonderful Marie and Jess here So we're gonna have a few questions in the middle But I will turn off my camera and let you guys take it away. I'm really excited for this. Awesome. Thank you, Madeline I'm Marie Norden and Here with me is Jess and me organizers of this data freedom summit So we're really excited to be able to share with you and Jess is going to be kicking it off today Cool. So hi everyone. Um, so we're gonna be talking about the brands part first Which is my section. So So just a little bit about me first. So I'm currently a fedora. Oh, excuse me. I'm currently a fedora community design intern and working with Red Hat based in Ireland and I've been here for for only a year. So my my knowledge of inkscape is is It's at a good level. Um, so I've worked on many projects in the in the fedora community such as the fedora brand book and And also the fedora brand guidelines that what we're turning the book into a website moment So I'm working on that too And we also have the nest flock and hatch logos as you can see there. There's one of the logos and there that I I worked on and Also logos like the mentor summit that you can see there and the fedora gaming logo as well as well as our new mascot color so Did a lot of stuff so Yeah, and again working with inkscape Doing the blender learning and all that stuff. So So in this talk, I'm just gonna talk about some things in inkscape That's and I found useful during my my internship here and And things that I've learned along the way. So we'll start off with the fedora gaming and Logo and for this one I use the para stroke feature. It was really cool feature and So when creating the fedora gaming logo, I wanted to keep the look of the original hot dog that we have like it looks very hand-drawn and So we wanted to recreate that in the vectorization of the logo because the original drawing I think I think it was drawn in critter. So we wanted to do some stuff like that. So Moe you've probably seen her Maureen as she introduced me to This feature called the para stroke feature, which is a really good way of portraying that hand-drawn feature and so it gives tapered ends and at the ends of different strokes and and other options the taper stroke as well, but I feel like with the With the para stroke feature you can kind of manipulate it better and the taper stroke is very kind of one-sided. So whereas the Para stroke feature has like these little pink nodes on the edge So like take my finger for example So like there'd be a pink node here that you can stretch it up and down But with the taper stroke you have your node here And then there's a node kind of in the middle and you can drag that up and down and In regards to like if you want to take her if you want to tin or if you want it like around edge edge At the top. So in the next video In the next slide I have a little video of This feature so I just wanted to show it in action It's better better to see it So I Went into the path effects tab and you can actually get this by clicking path and path effects And you can see the little nodes there just pulling them in and out and you can create the different shapes and Yeah reshape the stroke into a tapered line and even on one side rounder than the other side point to whichever You prefer so yes, that's the para stroke feature. So for the Fedora mentor summit and we created this like little Venn diagram Esk logo with a little light bulb to and I Suppose symbolize, you know, two people coming together creating really cool ideas and and that's all that mentorship is about so with this I originally wanted for the the two circles when they intertwined to kind of You know have that transparency effect. So I originally used you can use like The opacity slide on inkscape and we try to use that bush Thinking about it for like printing and stuff. It doesn't really Like it won't come out as good like it's best to have like three solid objects rather than have one object solid and then the other one transparent so So yeah, having three solid objects with no transparency effects would just make printing a lot easier and so The tools I use for this was the union difference and intersection path tools. So these are basically like cutouts and And so I use the So like the intersection tool I use that to create the center part of the diagram So you literally just get the two circles put them together and then whatever is on the top It cuts it out at the bottom. So it's kind of like a cookie cutter effect and then I also use that the same method in the actual light bulb itself like for the f looking and And in the light bulb, I literally just turned it from stroke to path and then And right to both and then you do the difference And it just cuts that squeaky shape into that light bulb shape that I made and it's the same with the the bottom too So this is a little demo. So the union tool then you select the two shapes and you go to path and union and and it just combines the two shapes together and Whatever is underneath it takes that and so the different the difference to so So whatever is on top acts as the cookie cutter and just cuts out from the bottom and Then same with the intersection tool. It's the reverse of the difference tool. So whatever is Whatever is actually underneath the the orange circle in this case actually gets cut out and The exclusion tool is kind of cool and it takes away Whatever is like overlapping and just leaves the other two there And then the difference tool is like a miss a mishmash of the difference through an intersection tool And you have the two little bits that It cuts out the two shape shapes, but it doesn't delete them It just separates them too so you can work with both of them So in the next one then so we have the next the nest flock and hatch those and this feature That I learned from this was using text as a logo type base. So I originally sketched up these logos by drawing them first so I use Comfort a as The base type the font is the base for this logo on the flock and hatch and then when sketching out the designs first and What I did with the original was I actually imported my sketch into inkscape And I got a really thick like I use the pen tool and I got a really thick stroke and drew them out which is totally not the way to do it and so So then what we did instead is actually Marie helped me out with this a lot since she has a lot of experience of creating logos and we did a little workshop and What I learned from that was to actually use the the logo type and if you select it and go to path and then it's object to object to path each letter becomes its own Individual like object so you can like manipulate the nodes however way you want and that's how I created the Like on the end you see there's like a little gap So what we did was we actually duplicated the end we took a little section off of The like the very like the foot of the end basically and we cut that off We kind of we put it in where the tail meets this like you have the end here. It's probably gonna be mirrored I don't know which way but So you have the stem of the end and then the curved bit so we just separated them to and then added that little foot just to create the round bit and Same with the E and the T as well, and then we added the the little tree then so Again with the freedom. Yeah, so this is just me Bringing the object to path Thing to to reality and then it just shows you then you can Manipulate the nodes and what's nice about this as well You can actually get the pen tool and whatever node you selected you can actually extend that and that's how I made the little tree on the On the T on the nest logo so and also you can do that or you can actually just draw it and then You can select to and do the union and then they all become one piece So then for color I learned how to use the gradient mesh, so Sorry, I'm getting ahead of myself so sorry So the gradient mesh consists of nodes and arrows that let you control the blend so it's basically it's like a massive grid and You can just plot your different colors that you want to use and I have here have to be careful when trying to blend colors I mean, it's it's like basic color theory like well, especially with the orange and the the Green that I used of course. They don't really mix together So they kind of look well at the start it looked kind of brown like a really muddy color It wasn't that great. So again, just like adjusting it with the little arrows you can move it around and so I don't want it to be really colorful as well Because when I originally drew it out, I am I was like sketching sketching it and blending it in Incredible and doing it that way so And I wanted to create the same feel with the gradient mesh. So this is just me and messing around with it with a circle And so again once you select it, then you can use the different nodes And like especially in the bottom where the green is you can see that there's a node there You can click on it and change the colors This is me just messing around with the arrows so you can see how you can change the direction of the gradient, which is really nice and and If you like put the arrows in a certain way so that they overlap You can actually make a line in the gradient, which you'll see at the end but again, you can like do make little shapes and Kind of manipulate the the gradient to where you want it to be and it's quite nice as well to have that bending and motion so that you can If you if you're doing like a 3d effect on a sphere or something. Oh, yeah, it's me don't mind that and So yeah, this is what I meant by creating the line So when I do select it at the end you can see there's a line there So and the last but I'm going to talk about is the multi-page feature which Was recently introduced into inkscape and it is my favorite thing ever. I love having multiple art boards on an inkscape design so Yes, so use the multiple feet the multi-page feature to organize the brand book and it was really helpful when exporting the pages In the video afterwards. I'll show you boss. Um, it's It's really nice. You can just select batch export and Pages and it just exports everything and it was really nice to keep everything organized as well And it's really nice, especially if you if you want to work on like multiple logos On the one like inkscape file rather than have many inkscape files. It's really nice to organize it that way as well, so We'll move on then to the video and this is just me showing how I used it for the four-door brand book and just sectioning at the pages and So this is me just going into a new file and then you have the page there and But you can also add pages with the Page tools that create a new page it'll immediately make another a4 But you can resize it and there's different like in the drop down beside that. There's different Page types you can pick you can rename your pages like I have cover page here That's a single image export so you can switch between the pages But the batch export is where the magic happens. It's so good so you can select whichever pages you want and You can export them you can actually export one page as two separate files So let's say for the front page of the brand book I can export that as a PNG to put into a PDF But I can also export it as an SVG if I ever wanted to have separate SVGs for some reason But it's handy for logos as well a few if someone requests like a specific logo And you can export that one out of your big and inkscape Files so yeah, so this is my section of of the top and done so I'll take we'll do a little break for questions if that's okay. So yes, we have some that have come in So the first one is is the fedora brand guidelines maybe public it would be nice to have a look on it Yes, they are public. We have a git lab for them I can Share that after this actually Next question is hi everyone great presentation. I wanted to ask what sources Like videos courses online material would you recommend for newcomers to learn more about inkscape? Thank you Oh well my Learning experience. I was just kind of All self-taught and going back to like mose my My mentor so a lot of going back and forth to her but I find I know like I know it's kind of a proprietor or software, but youtube is your your best friend when it comes to these things and especially since they're all free to access and and Yeah, like I'd say youtube was like my main Prior to like if I didn't get something I'd just google it or youtube or any kind of form even as well, so um, and I'll say that like I think as members of the design team. We're all really willing to Answer people's questions if they're ever in the design team element Like chat room, but yeah, youtube's a great place and then um, my own question was As you were showing all of the kind of tips and tricks and you know stuff that I'm familiar with But I often have a hard time remembering like sometimes I'll be trying to exclude something or exclude something and Then I choose the wrong one and I was like, I wonder if we could come up with a mnemonic device for remembering like certain groups of features and inkscape that like I don't know it'd be kind of a fun catchy thing. So I don't know something to consider Yeah, that's pretty cool I suppose like different colors and Finding it that way because I find it difficult to sometimes like us the layer meant to be above or below and which one do I select? Yeah, when I'm clipping something it's like oops. I've selected the wrong thing. Um, yeah But yeah, great so far and I I'll let you know at the end if any other questions come in for you guys perfect, um, I suppose one thing as well, uh that I'd like to mention too is um With the multi page feature as well. There's um one thing that It'd be really cool if there was like a pn like you can export all pages as like one pdf um Bosh Yes, I love I love thanks But yeah, I'll move on to marie to talk about badges then so Thank you. Just um I wonder if that's an option already or we could put a feature request in or maybe martin knows the answer if he's with us in chat Um, cool. So today I'm going to talk about badges um This is less of a this is how to use inkscape tool and more of a This is how inkscape has made the fedora community better and stronger and um Improved our culture over many many years So just a tiny bit about me um, I started with badges design and now I'm here I work at red hat as the code of conduct specialist doing code of conduct work and consulting But you might know me as The fedora projects former fcake. So I worked as a community architect in the fedora project for the past three years We recently moved into a code of conduct role um I was introduced to open source in 2013. So Just shy of 10 years ago um a shout out through outreachy and an amazing mentorship program and of course marine duffy my mentor and many A mentor for many other people in the fedora design team Um, I'm also an artist designer and maker. You can see some of my things here on the right side some drawings Some dot paintings some calligraphy and book binding So just thought I'd share that with you as well so Fedora badges If you don't know what they are, I'm just going to give a quick introduction to that They're a huge part of the fedora project culture. So that sub sub project was initiated in 2013 before I came on And the main goal of badges is to recognize contributions to the fedora project It's a gamification system Basically to give ourselves that hit up dopamine and serotonin and make it even more fun and exciting to Be a part of the fedora community. So the back end is built built with terrier and fedora messaging We have some automated badges that connect up to our fedora systems And that's made possible using yaml But the point that I want to talk about is that dozens and dozens of artists have contributed to creating badge art At this point we have 600 plus badge designs and there are requests for probably about 100 or 50 150 more That aren't even graded or haven't been able to be automated at this point Um So there's six main categories that we award badges for and that's content development quality community Events and miscellaneous. We needed a miscellaneous because there's just always those things that come up but here's a social panda badge that I designed for Uh joining a fedora virtual social so back when Badges all started there were some design goals for You know, what we wanted it to be, right? So we wanted to be fun and friendly um Basically tying back to that friend's foundation in the fedora project So we wanted to use that fedora color palette which would tie back to fedora's brand and also keeps the tones kind of lighter Some kind of pastel colors to keep it kind of airy and fun and fresh, right? So we don't have people represented in The badges as humans. We have them represented as animals. So that was another way that we keep it very fun and friendly So we have pandas in there and people ask where the pandas came from and I will tell you it's moe. I think And we also have Badgers snakes I'm sure we'll see color popping up in there now that we have a new mascot um, and back when this all started Comfortog was Like the main fedora type typeface that we used at this point. It's been deprecated um For use in a lot of fedora designs But we've held on to it here because it kind of embodies still that fun and friendly look And we also have that as a basis for some of our other logos like the nest logo that jess was talking about So we've we've held on to it in the badges space So here you can see like the anatomy of a badge We have an outer ring that denotes what category it it falls in background color There's usually a pattern of some kind and then on the top of that lays a graphic So I wanted to showcase the creativity Of our designers and these are all designed by pretty much different people. I think we have a few a few, you know mashups with multiple contributors, but Here you can see we have a similar look and feel across all different badges with all different artists and the creativity that we've been able to express through badges as a fedora design team over the years has been um A really fun part of being a part of fedora and being a part of the badges project As you can see we kind of have cultural references in here um And just you know kind of fun depictions of you know, this one were testing Fedora core os so Or this one I think is for the Community outreach revamps so people all over the world working together This one was for a social at a at a flock event. I believe so Some really really cool art and a chance to make art With each other We've also spent a lot of time passing on uh knowledge about inkscape and badges and fedora culture with design workshops at both flock or in-person conference and nest with fedora our virtual conference So all the way back in 2014 I gave a presentation on the internship. I did with badges And then after that I started giving badge design workshops so that I could add more artists into the folds and You know create more badge designs in general Uh in flock 2019 we had a hack fest and that merged the designers and the developers together to try to improve the system overall um We you know covid happened and things slowed down on that but we still managed to do some Um More workshops and presentations at our virtual event. This here is the badger pado on badge and that is for participating at a workshop a badge design workshop so Very excitingly and very full circle. I was able to mentor a Badges intern over this last summer. I co-mentored with smarigol. We um interned amazingly talented young woman nikita trapathy and We had some Goals for this internship, right? So we wanted to modernize the badge template Um wanted to give it, you know, keep the same feel but update the look a little bit We wanted to update the style guide because things had changed. It was like 10 years or nine years since we had Last made a version of the style guide And then also over the years there were things that kind of slipped through the cracks like We had files exported at the wrong size or maybe we just needed to push A piece of artwork through because we needed it for an event or something else And maybe those didn't fit all of the guidelines that we had in place so Here's an example of A revamp, you know adding the new logo in Using the new template, which I'll show a little bit more in a moment Um And just making sure that it's kind of following these up-to-date style guides So this is what I was talking about here Basically, we move from this design to this design. So this is a bit more focused on the graphic. It's simpler It's dark mode compatible um, and it also in the original design there was some Um, if you get real close in there on the nitty-gritty, there's a little bit going on with the vectors They're not entirely smooth. So we clean those up And it's visually balanced. So Along with that we created new templates. So we have template files To create badges so That kind of just was six templates you get an event template. There's nothing in there You're just kind of starting from scratch, right? So now what we have is instructions in the template We have type B samples in the template. We also have patterns sample graphics And basically a clip so that the artwork is just staying in that badge area instead of kind of Wandering off because we do have you know newcomers and people are new to inkscape Working on this. So we wanted to make it As easy and simple for them to get into designing badges so we also went with An update of the style guides. We wanted to modernize the style guide. This is the one I Created in 2013 2014 and here is the one that Nikita has updated Just this past summer So it kind of has a slicker look updated colors for the new fedora Logo color we have some more recommendations for how to pair the colors together And this is like a 30 page Style guide so this is just one page of it. I wasn't going to go through The entire thing but very excited to use that so If you go to fedora badges right now, you'll probably notice that the new style guide isn't there And there's a couple reasons for that So fedora badges is in the process of getting it overhaul. There was just a meeting yesterday for The redo of fedora badges. I forget what the name of the meeting is called but it's a group of us from the community platform engineering team People from the community people from the fedora design team coming together to Redo the badges site. I mentioned a little bit of that technology that was behind fedora badges And the truth is it's out of date and some of it is no longer maintained So it's been kind of a question for a while of you know, how can we keep this up to date? How can we keep this modern in a way that people want to contribute to the back end and front end of the fedora badges website? So what's going on right now is Exploration development and implementation of a new back end and front end of fedora badges We want to implement that new badge template on 600 plus badges. You'll see I put like a shocked face here because it's going to be a lot of work We want to apply the style guide to all the current artwork. So making improvements And we also along with that kind of need to know the requirements of what that new website will look like, right? So We built our template based on the specifications for this current website So it has like a certain amount of padding in it and for the new website We don't know exactly what those will be. So the reason that we don't have that new template Implemented is because we're you know working with the developers to make sure that we're doing it right the first time We don't want to have to Reduce 600 badges and then reduce 600 badges again And we are looking for people to contribute, you know people Who are already in the fedora community newcomers? And we need all different types of people With different skills and you can be a complete newbie In any of these areas to to contribute to this, right? So We need back end developers front end ui and ux designers slash developers. We need illustrators. We really need illustrators We need people who can do communications and want to do communication So making sure we're getting input from the community Talking about the work that we're doing And we also need project managers so people who can make sure we are on track and we are Adapting to the changes as things happen and maybe we bring new people on where do they fit into the picture So we really need all different types of people to make this implementation Of the new site and the new artwork And over here is the master badge artist. This is if you've designed over 100 badges, I think I also just want to say thanks to the many fedora designers We've had so many people contribute to fedora badges over the years Way more than this list, but it's kind of hard to keep track of everybody So I I got I went to the artwork log and I found, you know, the people who had Contributed at least a handful So thank you so much for your work on fedora badge design over the years And making something really awesome That's At the heart of the fedora community So cool. Thanks for attending. I'm going to stop sharing my screen And so then I can actually take a look at the chat too Yeah, we've got I think two questions for you guys So the first question is In some cases choosing between inkscape and pen pop for a certain graphic design project could be difficult as both Maybe suitable. How do you decide which one you work with per project? Do you have a standard? For this and are there any decisive factors you follow when choosing either one or the other I have a quick answer for this, but i'm i'm also curious jess and madeline what you think about this um I am primarily like an illustrator like Design logo designer, so i'm not doing a lot of like, you know front end development I haven't done a ton with pen pot so far me too is like my home like my bread and butter um And You know a piece of software that i've been using for so long. It's like, you know second nature to me, so My first instinct is usually to go to inkscape, but I think that there's a lot of tools and pen pot that um Are important for other use cases, so I think it depends on what what you're trying to accomplish. That's my input I agree and the the question asker kind of said like they Worthing an example like a presentation could be both design an inkscape and pen pot um And that a digital brand book might be a bit easier to design maintain in pen pod than inkscape um, and I think it Um a big part for me is also just like i'm more comfortable in inkscape um, and you can usually bring think that Most of the time any vector work that you're doing in Inkscape you can bring into pen pot And then vice versa So It like doesn't matter all the time But like pen pot has libraries, so it's great. I don't know you go Jess Yeah, I think Marie and Madeline you both said what was on my mind as well and like pen pot is really great I think for more so the front end as well and user testing and like wash um Wash um emma and um Ashlyn yes Like what they were talking about yesterday about using um pen pot to create the fedora websites like I I think it's it's a much better tool for that like personally and design wise for me It's it's it's inkscape all the way and what's nice about inkscape as well the the way you can transfer a project From inkscape into a pen pot no problem because it takes svg format as well like I've used pen pot as well for like the libraries to and updating the libraries but like the different um the different characters and logos and stuff like that so I suppose like How I use pen pot is more so maintaining it for others to use it if that makes sense so I have a question Jess because I think I remember this coming up, but is there um An issue with pen pot ingredients Yeah, so if you Import the s the svg so like say take calore for example Like when we were trying to import him into it as an svg um The gradient mesh on his belly wouldn't import So we have to import it as a png. We haven't figured out why that is I suppose it's the same as well if you just click on an svg and open it in an image viewer as well It doesn't display the gradient mesh. So I don't know if it's The s the svg format or if it's 10 parts out. So we're still trying to say When pablo was talking on I guess that was Tuesday that we brought that up So maybe that'll be a soon soon to be feature. Yeah fingers crossed The next question is when is the next badge workshop? So When we were first planning this creative freedom summit, it was I think I was calling it the fedora design week and like we were Considering like just trying to work on fedora design for a week and then we said like No, actually it would be better to share with others our knowledge instead of trying to make this internally focused So one of the things that I wanted that I was thinking about for that like previous idea was to do a badges sprint so I think one potential time could be flock or nest or whatever is happening for fedora's conference contributor conference in 2023 So, you know, whatever Whenever wherever that is I'd love to see a fedora badges design workshop, but you know Life is life. I don't know if If it's in person, I'm not sure if I'll make it to be honest, you know, like the world is kind of a crazy place right now. So I'd like to participate and be hands-on for Implementing that new template. So I'm also considering doing a sprint a virtual sprint where We all kind of work on badge designs for maybe a week or something like that I'm also talking with Smera who I mentioned earlier about mentoring another badge intern For this upcoming summer to do all the work Not all but a lot of the work of moving that the artwork from that old template into the new template So there's a couple of things we have That we're looking at for 2023 But you know, maybe one of those things that the intern could work on was, you know Coordinating a sprint, right? And we could kind of put that and put them in charge of that and they would get A taste of you know community building and community organization alongside, you know, the design work Brilliant I think that's really something to look forward to And the last question we have is I tried to do a badge like forever ago. What does happen? What happens on those cases? Do they get reassigned or just lost in time? I think aside from the design part that part of the flow could be improved too Absolutely, um, I'm gonna take partial credit or flame for this, um I think I mentioned it a couple times now, but Uh COVID made life pretty hard There for a while. I had a new job. That was a challenge, you know Working as fedora's community action impact coordinator Um, and that was my first job in community management. So I was learning a lot doing a lot. So I wasn't able to put as much time and energy into badges basically since 2019 so um I think what needs to happen is a triage of that repo and to kind of go back in and make sure Um, you know, people are getting responses. I have stopped filtering the badges emails at my inbox because uh as fk your inbox is a little bit wild um So I'm seeing those notifications. I'm Uh very involved now in this overhaul. I'm gonna co-captain the design part with Emma kidney So I plan to be much more involved in the badge design stuff, you know being in a new role I now have Some more space and of course it's demanding but now working on fedora can kind of be my hobby again um, whereas before it was my full-time plus Paid job day job. So you know with all the other needs that I was fulfilling for fedora. It was a bit hard to Also do badges at the same time Well, I'm glad that it is not going to be as overwhelming anymore for you and for other people who want to contribute Um, and that is it. I don't think there's any more questions. You guys gave such a great presentation It was so great to see all those tips and the history of the badges laid out Bye