Icon Workflows with Inkscape

Video in TIB AV-Portal: Icon Workflows with Inkscape

Formal Metadata

Icon Workflows with Inkscape
Title of Series
Part Number
Number of Parts
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Learn how to worry less about the file system and more about your artwork in this overview of Inkscape workflows. Various details of the workflow and tools are discussed with specific examples from projects including, but not limited to, Firefox, GNOME and Moblin.
Keywords Libre Graphics Meeting (LGM)
Computer icon Computer animation Projective plane Bit Device driver
Web service Service (economics) Visualization (computer graphics) Meeting/Interview Robotics Projective plane Web browser Cartesian coordinate system Identity management Physical system Formal language
Revision control Enterprise architecture Distribution (mathematics) Computer animation Open source Projective plane Operating system Product (business)
Vector space Software Web-Designer Weight Computer font Freeware Window Form (programming)
Exterior algebra Computer animation Software Mapping Vector space Gradient Text editor Bit Selectivity (electronic) Shape (magazine) Freeware Computer icon
Point (geometry) Process (computing) Image resolution Projective plane Electronic visual display Set (mathematics) Resultant Computer icon
Pixel Email Distribution (mathematics) Software developer Projective plane Bit Basis <Mathematik> Parameter (computer programming) Cartesian coordinate system Mereology Computer font Graph coloring Computer icon Hand fan Uniformer Raum Computer animation Different (Kate Ryan album) Summierbarkeit Contrast (vision) Quicksort Position operator Form (programming)
Point (geometry) Pixel Computer file Multiplication sign Set (mathematics) Raster graphics Computer font Graph coloring Computer icon Web 2.0 Heegaard splitting Mathematics Population density Different (Kate Ryan album) Single-precision floating-point format Green's function Ideal (ethics) File system Electronic visual display Physical system Multiplication Touchscreen Scaling (geometry) Eigenvalues and eigenvectors Consistency Projective plane Cartesian coordinate system Computer animation Vector space Fuzzy logic Text editor Iteration Fiber bundle Local ring
Pixel Computer animation Direction (geometry) Gradient 1 (number) Cloning Figurate number Rectangle Computer icon Attribute grammar God
Multiplication Arithmetic mean Computer animation Software developer Gradient Object (grammar) Graph coloring Measurement
Scripting language Computer animation Auditory masking Rectangle
Scripting language Building Computer animation Schweizerische Physikalische Gesellschaft Object (grammar) Rectangle
Computer animation Mapping Bit Demoscene
Operating system
Group action Computer animation Namespace Different (Kate Ryan album) Rectangle Computer icon Metadata Attribute grammar
Data management Message passing Computer animation Computer file Different (Kate Ryan album) Quicksort Graph coloring Computer programming Template (C++)
Scripting language Functional (mathematics) Group action Server (computing) Context awareness Run time (program lifecycle phase) Service (economics) GUI widget Patch (Unix) Conceptual graph Schweizerische Physikalische Gesellschaft Graph coloring Computer icon Message passing Computer animation
Server (computing) Multiplication sign Interface (computing) Electronic mailing list Mathematical analysis Computer icon Degree (graph theory) Frequency Computer animation Software Artistic rendering Gastropod shell Bus (computing) output Quicksort Freeware Window
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