Icon Workflows with Inkscape

the way that is I this is the thing that is that

is that for about 9 years now and I

also so you have a bit of what I do and then and then I'll tell you a bit of how I do it and the most recent projects that have been working on

is making giant robots and no in seriousness and we've about built and web service that allows you to make customs appliances which in your language these but described as and operating systems and that's configured with applications that you care about and it's just easily deployed can put it on the USB stick and take everywhere and you can do this yourself in a web browser is a service and have been doing like the visual identity of the project and I have I've been lucky enough to be

able to actually play was their 3 D now there's going to be talking about the percentile projects those are the guys that actually know what they're doing and but I'm just messing about it few you know whether projects that actually use 3 D in there visual identity so that's why we went with that was kind of like just investigated I had the tools thanks to guys but the and so we did not investigate if it's possible also work on the

2 main operating systems and products that we have the the solution to which the enterprise version of of the open source distributions with you guys are

not really Linux geeks that's is like a to but with even smaller user base and and so I do the visual identity for for both of these projects so it involves but which you know standing up

everything including they've had a really nice talk so again I had the tools so I had to look into designing my own font without really knowing what I'm what I'm doing so that is the window decorations and had a form also been created with rituals that's the thing that I want to point

out here for it hasn't always been the case but for the past few years I've only been using free software tools in my toolchain there's nothing proprietary and so Blender for the 3 D stuff that I used to reduce suffering from 4 things that you don't appear to be 3 so it's like you know this stay when waiting for something it's also done in London human Firefox and it's actually being used all over the web and by using for all weight vectors this is G and it's 1 of the because I do a bit of web development as well and then again and but and also the same but all

lot of what I do and something that I like is icon design and so let me take you on a trip back slightly of how how things used to be the so that things in 1999 when I 1st got involved with the free software I was looking forward to an alternative to Photoshop which couldn't afford back then it was just playing around with it and it was really it was given that introduced me to Linux and free software in general and it was really the only tool that was available no matter what you wanted to do the and so from the free software community with as given to begin I and so the icons that we've been designing were designed that meant editor and this is the style that was that was you set up by my colleague Thomas was when I was there before I joined the effort but and it was done in in in a bit map editor but was really

created really as as restriction as as we used as a vector and a really this is a screenshot I took like 3 days ago actually built a given 1 . all just for the for the screenshot it just built on the only dependencies cause trouble with PNG but it was just built so I was remember I remember when I was playing with is the possible lack of which is so much about it and you know it and really can really funny when you went see it and if the live dialogs collapses is really triple axels fat guys it's so fast that there are so we did was essentially drawing shapes with the Bezier tool and filling in coming making but again the selection and then you are filling it with the gradient to shade using large brushes to shaded like that and

so that was the process so the result was a very soft and then and we had a very the saturated points so so the result was very it was nice but uh style of illustration but

I always looked at the KDE project which is very short and then then we had you know very of relatively large resolution displays and they had a very sharp icons that were Pixel perfect and that they're very saturated color polite and very limited but I really love to the and the sharpness of the reference set and we had a really

fuzzy style that we actually been scaling down as well so I've tried to push the style and into and moral pixel precise an form and so on so we ended up iterating into what became the go down to 0 I can out the very who still use the same color palette very very disaturated not very common elsewhere but we added a very and dark position black stroke around the corner which helped it was crisp and it helped eligibility regardless of what background you used because there was a contrast between you always have to data very dark outline you have the inside larger so no matter what background you had it was very very contrast the problem with that is the we created a very unique style that was not there was no doubt about the no visible anywhere else and then you had a you you bought a written by Deloitte and Linux distribution which was like a sum of many many projects and each of them follow their own style and so we you know with with known we had a very unique style that wasn't the OpenOffice project and so what you what you've got even though the icon sets individually could have been consistent and very nice as a as a whole you had this really mishmash of styles that was really terrible in bed and I was experiment and this with different icons style so worst thing that I always come up with a fan mail that like all I love you know icons and there was a screenshot of like I have like 3 icons and the like put all of them together I like you themselves and we should of good the 3 styles clashing 1 so what do project like OpenOffice which ships like 2 thousand columns into sizes and we had a bit workflows so we have to like do each size individually so as to when project we did it for 6 months and to be able to make OpenOffice sort of visually part of the that up it was a was fun at the beginning but you can imagine that in the end it was not 4 5 so we some and that was just 1 project you know there were others so then there was a to doesn't for yeah I won't so sometimes we we try to address this issue of of having their inconsistent I can solve to to to come up with some basic guidelines 7 based ground that we could all agree on on so that your application developers wouldn't have 2 or more designers designing for the individual investor parameters we have to redo like every applicant up for every application redo the icons over and over again so the tango project was born

we started working on the only basis I concept which make everybody saying that were creating this I can seem that wants to like style every application in the world which wasn't so we were very good at communicating by the end of a lot of projects but partly because we did all the work

but I have a lot of projects that actually did comply with the with the guidelines and if you look at the screen shots back then and I I try to look it up it couldn't find like reasonable screenshots from the past horrors of Morris which would restrict the point but yeah I think we'll manage to find but it's like trust me the situation is much better than the not ideal and but and another thing that the change was that we have introduced a larger side will actually was the same size but we introduced vectors and workflow another projects that didn't exist before Inkscape came to be so we start using it and we while wild you know that there is a change in the workflow and still found that for the really tiny sizes which were what the most important thing for us was because still displays were very low density most applications use tool bars and menus that's where the icons were so most of the work was still in the low rank and and I found that there was a given bitmap editor using just a single pixel brush was the ideal to tools for that and I still believe that you can draw the small icon faster again and you could do it in and a vector workflow but we kind of ended up

with having some issues with time with making the stuff look consistent because for the smaller sizes if and only if you know it was faster in the actual application we wasted a lot of time like navigating the file systems and uh creating an icon theme or by concept is similar to creating a font you don't design a single piece like a single glyph font you have to see the whole picture and but to to to to to see the size what and and make sure that the colors consistent across different sizes because we also have to mention the sizes we we have multiple sizes because we care about the pixel precise scaling means fuzziness and we always wanted to avoid that and so you can see out of built like this web tool that that just pulled out of the we also set up by name expect so that we have like a set of essential item names in the base thing that we needed and pulled the icons from the act the injury could actually see the whole set I have an overview and you can already see the navigation system I conceded there's also to of the designers working on this have color deficiency in 1 of those meanings local in there so we always have like 1 that was that was the son green and stuff like that and so we ended up again as with the uh on this talk on on farms is a lot of iterations and it's something you find it and maybe even you know the metaphor is work that you gotta go back to the to the eigen if you if you haven't split across the false systems in multiple files it's actually pretty tedious to change a single even if it's trivial changes single thing on us single like going to go 4 times we have to use between tools and so that's why we

gradually ended up and and said countless all do with Inkscape we have tools to ask them to be able to have the same gradient used across multiple problems we can easily copy and paste and attributional fill and stroke we can easily create and direct durative icons because use copies scale it and fix it up 0 my god I'll have 5 minutes and that's it so so and and also we wanted to have like everything on a single catalysts um so it could it could do so in the figure can so that that's why we went out with Inkscape even though but we have to do a horrible things to make sure that any of the smaller sizes of the shops were using stuff like this we have like rectangles as pixels to be to make sure that it's chart but we also we gain a lot

from having this on a single catalyst because we can easily use features like clone so you can see here is actually a single icon if I want tweak it just tweak our you know what I commented it propagates to the other ones and there has been much the same thing it can be real big because of this this chief folder

and loans you can just have 1 wire common and tweak it change the color of the city can reference the same gradient multiple objects but sadly in all of this this is heading Inkscape so

it's got a really awesome features but it's so slow that to you can't really and lower world is it gets really really so please I I was hoping that in when I mentioned that slowing the developers shot at me so that these have filed for very old and the other 1 any features that I want any futures guys you know its feature completely or gradient even from the mean measure gradients forget it no it's feature complete just make it fast so how how how does

that work so we have like this baseplate in India CG that has just rectangles that define forgot I could put the mask and we have a script and so it's all of the

genes get is built on top of the city which is easily to pass so even if the desire is able to actually introduce stuff with that so what we used Inkscape feature which allows to like

exporter of a segment of the art works by providing the idea of the object from that and so I have I have build movie scripts that

walks the SPG finds the Special Air finds all the rectangles in there and and renders using using Inkscape on all the PNG were

actually still don't commit bit maps to to to the scene were not just in it's quite a big dependency would love to use something simpler like our CG but the use of books that would need to be fixed to be able to use that so this but it just

calling scape and rendering the past but also worked on a on a similar thing which is for the uh

bubbling guys like that that book operating system that Intel developed now they've moved on to the jokes at which is very simple so this even better in terms of overview endemic no magazine because you can have the whole thing as a single canvas really really nice of so like I said you know the whole theme is and like

that and I am actually on this is slightly

different workflow idea I miss use the the metadata the attributes that that Inkscape that puts in inside its own namespace to be able to define the icon name and it's not a special layer it's just grouped as an invisible rectangle and there's also can we use the title to put like a a group of icons that I have a long

ago and we have will follow the defines what sort of colors because as you can see there's uh the the

launches in the middle of a pile or program manager and the launches of different styles and sort of colorful and that is generated as well

so I just defined some colors and is a message template I change the color of the base and based on the color defined in the normal file and also setting I'm not working on the actual SCG to do that but there's something like the year the etched in fact that's done using our ImageMagick I add all what to do transforms since hobbyists Jesus too much of too much of hatchery and we

using our future of Inkscape that's birds which is essentially although the functionality you have so the green is exploded exposed as like actions and so you can call Inkscape non-interactively just it to do what it does so what it does this is the chopping up scripts and to adjust 1st of all I I figure out what to do with the group ideas and then I just you know selected I set the assigned to the to the icon doing everything else in and save it so that's how we crop the the year the whole canvas with all the constant to the individual CG's why we do it with this reduced because it allows us to treat the icons as well as text essentially now in GTK Acadia 3 we have the best in and and that pass and a single server have landed patches that services that allow us to actually recall at the icons at runtime based on the on the context of the widget so the icon is actually the enclosed inside a container like this that has like overriding of style sheet that changes the colors of the icons on so that this is generated by educators that the so that what we can do things like

you know if the item is selected as being treated exactly like text so that's coming up yes so what work is you know SPG is solvable with CSS so this is essentially for you and this is generated by education you don't have to do anything you it takes the colors from the from the widget theme in the context of the icon is being drawn and so so what kind of that up to

you with you want to do with the time for some questions that

fj so thanks for the last being can really have time for for questions or do you don't have to be the questions the we would like to this know where he was of because of then the features this as oriented comes from what kind of thinking comes from this is 1 of the 1st period the new also you that you see that other entities that in the in the yes that's and who knew that yes that's exactly what what we're doing and you can if you pass a list of verbs to Inkscape scandalous all this stuff that you can do when you can do pretty much anything the only downside is that and actually manganese to launch the the degree so while the rendering of the P G's easily achievable on the command line you need X or anything we actually now use same as a shell was interactive shell but we just pass stuff to it through standard input so we can have Inkscape just want ones and do all the stuff but sadly for the verbs it needs to a large degree for now I was told ages ago that they're working like 1 a on a server and so you can use like the bus interface to to have it do all sorts of stuff but I haven't really looked into the so right now if you want to render the this would be known symbolic I convened in actually starts like popping up things get windows that you had that do the stuff remember you would normally do so actually you can see it because it's so fast that you can see it select the the the icon and deleting years analysis so it is painful but if you know it works it's free so what could have been a lot the book and this a single thing in yes sir said it if anybody wants to approach me like if you using proprietary software and 1 of the if your your stuff is actually doable with rituals of people because I mean with you about to fit into the future