Icon Workflows with Inkscape
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Teil | 43 | |
| Anzahl der Teile | 46 | |
| Autor | ||
| Lizenz | CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben. | |
| Identifikatoren | 10.5446/21553 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
| |
| Schlagwörter |
1
2
6
13
20
28
31
32
36
39
42
43
45
00:00
Treiber <Programm>BildschirmsymbolBitWeb ServicesFormale SpracheDienst <Informatik>RobotikBrowserPhysikalisches SystemIdentitätsverwaltungProjektive EbeneBenutzerbeteiligungKartesische KoordinatenNetzbetriebssystemVorlesung/Konferenz
01:17
Produkt <Mathematik>IdentitätsverwaltungVisualisierungOpen SourceProjektive EbeneNetzbetriebssystemUnternehmensarchitekturDistributionenraumVersionsverwaltungBenutzerbeteiligungVorlesung/Konferenz
02:15
IdentitätsverwaltungProjektive Ebene
02:37
BildschirmmaskeBildschirmfensterFont
03:04
BildschirmsymbolÄußere Algebra eines ModulsTexteditorSoftwareMAPFreewareBitWeb-DesignerVektorraumGewicht <Ausgleichsrechnung>Quick-SortBitmap-GraphikBenutzerbeteiligungVorlesung/Konferenz
05:19
Shape <Informatik>Trennschärfe <Statistik>ResultanteProzess <Informatik>GradientPunktVektorraumComputeranimation
06:39
BildschirmsymbolGraphfärbungDatensichtgerätAuflösung <Mathematik>Projektive EbeneSchnittmengeVorlesung/Konferenz
07:03
BildschirmsymbolBildschirmmaskeDifferenteProjektive EbeneSummierbarkeitPixelDistributionenraumKontrast <Statistik>E-MailOrtsoperatorGraphfärbungFächer <Mathematik>Quick-SortBitFontMereologieBitmap-GraphikComputeranimation
09:54
SoftwareentwicklerKartesische KoordinatenProjektive EbeneWiderspruchsfreiheitBildschirmsymbolParametersystemVorlesung/Konferenz
10:35
Uniformer RaumKartesische KoordinatenBasis <Mathematik>Projektive EbeneBildschirmsymbolTelekommunikationComputeranimation
10:55
SchnittmengeBenutzerbeteiligungGradientKartesische KoordinatenPixelDateiverwaltungRechteckProjektive EbeneBildschirmsymbolZentrische StreckungEinfache GenauigkeitPhysikalisches SystemBitmap-GraphikKlon <Mathematik>VektorraumGraphfärbungIterationMultiplikationsoperatorDichte <Physik>Green-FunktionSpezielle unitäre GruppeFaserbündelMultiplikationDatensichtgerätMathematikFontWiderspruchsfreiheitElektronische PublikationFigurierte ZahlGrundsätze ordnungsmäßiger DatenverarbeitungDifferentePunktRichtungFuzzy-LogikTouchscreenTexteditorEinsStellenringEigenwertproblemHeegaard-ZerlegungIdeal <Mathematik>Flussdiagramm
16:06
GradientGraphfärbungMultiplikationObjekt <Kategorie>MathematikBildschirmsymbolEinflussgrößeArithmetisches MittelSoftwareentwicklerVollständigkeitElektronische PublikationComputeranimation
16:55
VerdeckungsrechnungRechteckSkriptspracheComputeranimation
17:23
Objekt <Kategorie>Gebäude <Mathematik>SkriptspracheVolumenvisualisierungRechteckSchweizerische Physikalische GesellschaftVorlesung/Konferenz
17:43
BitDemoszene <Programmierung>Mapping <Computergraphik>Bitmap-GraphikProgrammfehlerVorlesung/Konferenz
18:06
NetzbetriebssystemTermBildschirmsymbolSoftwareentwicklerNetbook-Computer
18:32
BildschirmsymbolAttributierte GrammatikNamensraumGruppenoperationRechteckMetadatenDifferenteTechnische Zeichnung
19:07
Elektronische PublikationQuick-SortGraphfärbungDifferenteDatenverwaltungProgrammierungFunktionalGruppenoperationSoundverarbeitungBildschirmsymbolTemplateMessage-PassingBegriffsgraphSkriptspracheVorlesung/Konferenz
20:45
BildschirmsymbolMessage-PassingWidgetPatch <Software>ServerLaufzeitfehlerKontextbezogenes SystemDienst <Informatik>GraphfärbungFunktion <Mathematik>
21:34
Schweizerische Physikalische GesellschaftWidgetBildschirmsymbolKontextbezogenes SystemGraphfärbung
22:05
MultiplikationsoperatorEin-AusgabeBitBildschirmfensterSymboltabelleQuick-SortSoftwareRenderingFreewareMailing-ListeInterface <Schaltung>BildschirmsymbolAnalysisMinimalgradNabel <Mathematik>FrequenzBus <Informatik>ServerVorlesung/Konferenz
Transkript: Englisch(automatisch erzeugt)
00:01
Okay. So hello everybody. My name is Yacob Scheinreid. I'm a designer. I'm working mainly for the wealth. I've been doing that for about nine years now and I'll first tell you a bit of what I do and then I'll tell you a bit of how I do it.
00:29
The most recent project that I've been working on is making giant robots. Now in seriousness, we've built a web service that allows you to make custom appliances,
00:48
which in your language probably is better described as an operating system that's configured with applications that you care about. And it's just easily deployed. You can put it on a USB stick and take it everywhere.
01:04
And you can do this yourself in a web browser as a service. And I've been doing the visual identity of the project and I've been lucky enough to be able to actually play with 3D.
01:22
Now there's going to be a talk about the Syntel project. Those are the guys that actually know what they're doing, but I'm just messing about. It's one of the few web projects that actually use 3D in their visual identity, so that's why I went with that.
01:46
I was kind of just investigating. I had the tools, thanks to you guys, Blender, and so we could investigate if it's possible. I also work on the two main operating system products that we have.
02:07
The SUSE Linux Enterprise, which is the enterprise version of the OpenSUSE distributions. If you guys are not really Linux geeks, it's like Ubuntu but with even smaller user base.
02:29
And so I do visual identity for both of the projects. So it involves pretty much styling up everything, including Dave had a really nice phone talk.
02:45
So again, I had the tools, so I had to look into designing my own font without really knowing what I'm doing. So the window decoration had a font, also been created with free tools.
03:03
That's the thing that I want to point out here. 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 in there, so Blender for the 3D stuff.
03:24
And I use 3D stuff even for things that don't appear to be 3D stuff, like the spinner when you're waiting for something. It's also done in Blender, in Firefox, and it's actually being used all over the web.
03:42
I use Inkscape for all my vector editing needs. This is Gedit, because I do a bit of web development as well. And then GIMP. But I do all sorts of things, but a lot of what I do and something that I love is icon design.
04:08
So let me take you on a trip back slightly of how things used to be. So that was in 1999 when I first got involved with free software.
04:25
I was looking forward to an alternative to Photoshop, which I couldn't afford back then. I was just playing around with it. And it was GIMP that introduced me to Linux and free software in general.
04:40
And it was really the only tool that was available, no matter what you wanted to do. The answer from the free software community was GIMP. And so the icons that we've been designing were designed in a bitmap editor.
05:01
The style that was set up by my colleague, Tuomas Kwasmanen, was there before I joined the effort. But it was done in a bitmap editor, but it was really created as an illustration.
05:29
We used GIMP as a vector editor, really. This is a screenshot that I took three days ago. I actually built GIMP 1.0 just for the screenshot.
05:41
It just builds. The only dependency that caused trouble was libPNG, but otherwise it just builds. So I remember when I started playing with GIMP, it felt so complex. There was just so much about it. And it looks really, really funny when you see it. And then if the layer dialogue is collapsed, it's just really trivial.
06:03
And it's so fast, guys. It's so fast. So what we did was essentially drawing shapes with the Bezier tool and filling it. I mean, converting it into selection and then either filling it with a gradient to shade
06:20
or using large brushes to shade it, like that. So that was the process. So the result was very soft, and we had a very desaturated palette. So the result was very... It was a nice style of illustration.
06:40
But I always looked at the KDE project, which is very... Back then, we had very relatively large, low-resolution displays. And they had very sharp icons that were pixel perfect. They had very saturated color palette and very limited.
07:00
But I really loved the sharpness of their icon set. And we had a really fuzzy style that we had actually been scaling down as well. So I've tried to push the style into a more pixel-precise form.
07:25
And so we ended up iterating into what became the GNOME 2.0 icon style. We still use the same color palette. Very, very desaturated. Not very common elsewhere. But we added a very dark, it was actually black, stroke around the icon,
07:45
which helped. It was crisp, and it helped legibility, regardless of what background you used. Because there was a contrast between... If you did a very dark outline, you had the inside lighter. So no matter what background you had, it was very, very contrasty.
08:05
The problem with that is that we created a very unique style that was not visible anywhere else. And then you bought, or you did buy, you downloaded a Linux distribution,
08:23
which was like a sum of many, many projects. And each of them followed their own style. And so with GNOME, we had a very unique style, and it was the OpenOffice project. And so what you got, even though the icon sets individually
08:43
could have been consistent and very nice, as a whole you had this really mishmash of styles that was really terrible. And back then I was experimenting with different icon styles, so the worst thing that I always got was a fan mail that's like,
09:01
oh, I love your icons, and there was a screenshot of... I had like three icon sets, and he put all of them together. I like your icon styles, and it was just a horrible mess of the three styles clashing. So there were projects like OpenOffice, which shipped like 2,000 icons into sizes.
09:26
And we had a bitmap workflow, so we had to do each size individually. So it was a two-man project. We did it for six months to be able to make OpenOffice sort of visually part of the GNOME desktop.
09:41
It was fun at the beginning, but you can imagine in the end, it was not so fun. And there was just one project. There were others. So then, I think it was 2004, 2005? I don't remember.
10:00
So sometime we tried to address this issue of having the inconsistent icon styles to come up with some basic guidelines, some base ground that we could all agree on so that application developers wouldn't have to,
10:23
or designers designing for individual desktop environments, would have to redo every... For every application, redo the icon set over and over again. So the Tango project was born. We started working on a base icon set,
10:42
which made everybody think that we're creating this icon theme that wants to style every application in the world, which it wasn't. So we weren't very good at communicating. But in the end, a lot of projects, partly because we did all the work, but a lot of projects actually did comply with the guidelines.
11:06
And if you look at the screenshots back then, and I tried to look it up, but I couldn't find reasonable screenshots from the past. It's just horrors and horrors, which would illustrate my point, but yeah, I couldn't manage to find it.
11:21
But it's like, trust me, the situation is much better, even though it's not ideal. But another thing that changed was that we introduced a larger size. Well, actually it was the same size, but we introduced vectors into our workflow.
11:40
Another project that didn't exist before Inkscape came to be, so we started using it. And while it's a change in the workflow, I still found that for the really tiny sizes,
12:02
which were what the most important thing for us was, because still displays were very low density. Most applications use toolbars and menus. That's where the icons were. So most of the work was still in the low res. And I found that the GIMP bitmap editor,
12:23
using just a single pixel brush, was the ideal tool for that. And I still believe that you can draw the small icon faster in GIMP than you could do it in a vector workflow. But we ended up with having issues with making the stuff look consistent,
12:50
because for the smaller sizes, even though it was faster in the actual application, we wasted a lot of time navigating the file system.
13:00
And creating an icon theme or icon set is similar to creating a font. You don't design a single piece, like a single glyph in a font. You have to see the whole picture to see the size-wise and make sure that the color is consistent across different sizes,
13:23
because I didn't mention the sizes. We have multiple sizes because we care about being pixel precise. Scaling means fuzziness, and we always wanted to avoid that. So you can see I've built this web tool that just pulled the...
13:41
We also set up a naming spec so that we had a set of essential icon names in the base theme that we needed, and it pulled the icons from the icon theme so you could actually see the whole set, like have an overview. And you can already see the application system icon.
14:00
You can see that there's also two of the designers working on this have a color deficiency. One of them is me and the other one is Lapo. And so we always had like, why is the sun green and stuff like that? And so we ended up, again, as with Dave's talk on fonts,
14:22
there's a lot of iteration. There's something you'll find. Maybe even the metaphor doesn't work. And so you've got to go back to the icon. If you have it split across the file system in multiple files, it's actually pretty tedious to change a single... Even if it's trivial to change a single thing on a single icon,
14:42
you have to go four times. Then you have to use two tools. And so that's why we gradually ended up and said, let's all do it in Inkscape. We have tools to be able to have the same gradient used across multiple icons.
15:03
We can easily copy and paste attributes, you know, fill and stroke. We can easily create derivative icons because you just copy, scale it, and fix it up. Oh my God! I only have five minutes.
15:22
So, and also we wanted to have everything on a single canvas. So, on a single canvas. So that's why we went with Inkscape, even though we had to do horrible things to make sure that the smaller sizes are very sharp.
15:41
So we're using stuff like this. We have rectangles as pixels to be able to make sure that it's sharp. But we also gain a lot from having this on a single canvas because we can easily use features like clones. So what you can see here is actually a single icon. If I want to tweak it, I just tweak, you know, one icon
16:01
and it propagates to the other ones. It's pretty much the same thing. It can be, you know, big because, you know, there's like the XDG folder emblems. You can just have one icon and tweak it, change the color. As I said, you can reference the same gradient in multiple objects.
16:20
But sadly, you know, this is Inkscape, so it's got really awesome features. But it's so slow that you can't really, in the real world, it gets really, really slow. Please, I was hoping that, you know, when I mentioned that Inkscape is slow, Inkscape developers will shout at me, file bugs!
16:41
So, these have been filed. They're very old. And I don't want any features. I don't want any features, guys. You know, it's feature complete. Gradient, I mean, mesh gradients, forget it. No, it's feature complete. Just make it faster. So, how does that work? So, we have like this base plate in the SVG that has just rectangles
17:04
that define like clipping masks. And then we have a script. So, it's all SVG. Inkscape is built on top of SVG, which is easily to parse, so even a designer is able to actually, you know, do stuff with it.
17:21
So, we've used Inkscape's feature, which allows to like export a segment of the artwork just by providing the ID of the object. Looks like that. So, I've built a Ruby script that walks the SVG, finds the special layer, finds all the rectangles in there, and renders using Inkscape all the PNGs.
17:45
We actually still commit bitmaps to the theme. We're not, because Inkscape is quite a big dependency, we would love to use something simpler like RSVG, but there's some bugs that would need to be fixed to be able to use that.
18:00
But it's just calling Inkscape and rendering bitmaps. I also worked on a similar theme, which is for the Moblin guys, like the netbook operating system that Intel developed. Now they've moved on to Amigo, which is very simple.
18:20
So, it's even better in terms of overview than the GNOME icon theme, because you can have the whole theme as a single canvas. So it's really, really nice. So, like I said, the whole theme is done like that. And I've actually, it's a slightly different workflow.
18:42
I misused the metadata, the attributes that Inkscape puts inside its own namespace to be able to define the icon name. It's not a special layer, it's just grouped, and there's an invisible rectangle.
19:02
There's also, like I misused the title to put a group of icons. Then I have a YAML file that defines what sort of colors, because as you can see, there's the launchers, and there's like a file or program manager, and the launchers have a different style.
19:23
They're sort of colorful. So that is generated as well, so I just defined some colors. And as a SVG template, I change the color of the base based on the color defined in the YAML file. And also, sadly, I'm not working on the actual SVG,
19:42
because I didn't know how to do that, but there's the etched-in effect that's done using ImageMagick. I didn't know how to do transforms inside the SVG. That's too much of a hackery.
20:00
And we're using a feature of Inkscape that's called Verbs, which is essentially all the functionality you have inside the GUI is exposed as actions. So you can call Inkscape non-interactively, and just tell it to do what it does. So what it does, this is the chopping up script.
20:21
So we just, first of all, I figure out what the group ID is, and then I just select it, I set the size to the icon, delete everything else, and save it, so that's how we crop the whole canvas with all the icons
20:42
into the individual SVGs. Why we do it with SVGs? Because it allows us to treat the icons as text, essentially. Now in GDK 3, we, Bastian and Matthias Klassen,
21:02
Bastian Nosra, have landed patches that allow us to actually recolor the icons at runtime based on the context of the widget. So the icon is actually enclosed inside a container like this
21:20
that has an overriding style sheet that changes the colors of the icon, so that this is generated by GDK, the style sheet, so that we can do things like if the item is selected, it's being treated exactly like text, so that's coming.
21:42
Is it CSS? Yes, well, because SVGs are styleable with CSS, so this is essentially how you do it. This is generated by GDK. You don't have to do anything. It takes the colors from the widget theme
22:01
and the context that the icon is being drawn in. So I kind of sped up to be able to tell you everything I wanted, so I hope we have time for some questions. Thank you very much.
22:26
So thanks for that last speech, Roland. We have time for two questions. No, no, it's good. Two questions. Two, yeah. Who would like to ask? You were asked. That was my question.
22:40
Oh, that was your question. Speeches, yes. I'm sorry, you have to come to the front. It's a bit of a climb, but I can come.
23:03
Yes, I was wondering with the verbs for Inkscape, can you also do that to save it as another SVG instead of rendering it to PNG? Yes, that's, hello, hello? Yes, that's exactly what we're doing. You can, if you pass list verbs to Inkscape,
23:23
it's going to list all the stuff that you can do, and you can do pretty much anything. The only downside is that it actually needs to launch the GUI. So while the rendering of the PNGs is easily achievable on the command line, and you don't need X or anything, we actually now use Inkscape as a shell.
23:43
You know, it's an interactive shell, but we just pass stuff to it through standard input so we can have Inkscape just launch once and do all the stuff. But sadly, for the verbs, it needs to launch the GUI. For now, I was told ages ago that they were working on a server,
24:02
and so you could use Dbus interface to have it do all sorts of stuff, but I haven't really looked into that. So right now, if you want to render the GNOME symbolic icon theme, it actually starts popping up Inkscape windows at you and do the stuff you would normally do.
24:23
So you can see it because it's so fast. You can see it, you know, select the icon, and deleting everything else. So it is painful, but it works. It's free software. Okay, one more question.
24:45
So you will be in the workshop this afternoon? Yes, yes. If anybody wants to approach me, like if you're using proprietary software and want to see if your stuff is actually doable with free tools, I'll be happy to talk about you.
25:01
I mean, with you, about that. Thank you very much. You're welcome.
Empfehlungen
Serie mit 11 Medien