Ubuntu Wiki

[23:05] <Riddell> next up is kwwii talking about Artwork
[23:05] <Riddell> kwwii is the founder of KDE's Oxygen artwork project
[23:05] <Riddell> and does much of the Ubuntu Artwork
[23:05] <Riddell> go kwwii!
[23:05] <kwwii> woot!!! ARTWORK!
[23:06] <kwwii> I'd liek to come over as a big muscular guy screaming about artwork and how simple it is to design something but naturally that is simply not the case :p
[23:06] <kwwii> I would also like to learn how to spell correctly when typing fast :p
[23:06] <kwwii> but anyway
[23:06] <kwwii> I have no idea who is here or what they know and/or are interested in...
[23:07] <kwwii> first I will go through some of the basics which amazingly few people know
[23:07] <kwwii> 1) we use svg
[23:07] <kwwii> svg means scalable vector graphic but it is really not that scalable in the usage for icons
[23:07] <kwwii> so we create lots of svgs :)
[23:08] <kwwii> depending on the icon, there are svg's for lots of different sizes
[23:08] <kwwii> you don't see it in the end theme because they are rendered to the right size and installed as png files
[23:08] <kwwii> but if you download the svn sources you will get a feeling for what is going on
[23:09] <kwwii> funny enough when I tried to find info for the anon svn links I found there is an extra sentence just for oxygen :p
[23:09] <kwwii> http://techbase.kde.org/Getting_Started/Sources/Anonymous_SVN#Checkout_KDE
[23:09] <kwwii> so if you have the time/bandwidth get the icons and in a bit we can go through one
[23:10] <kwwii> naturally you will need svn on your system :)
[23:11] <kwwii> so going on, although svg is scalable it is only scalable to a point
[23:11] <kwwii> the human eye is kinda funky and doesn't just interpret info as such but forms opinions about how things look and tries to put things into their respective box, so to speak
[23:12] <kwwii> and anti-aliasing is funky and doesn't always allow you to do what you think you should be able to do
[23:12] <kwwii> in the end, it comes down to things being, at least to some extent, on a pixel raster
[23:13] <kwwii> so if you draw an icon at say 48x48 pixels, it does not scale well to 16 or 12
[23:13] <kwwii> most of the original svg icons were 128x128
[23:13] <kwwii> which, needless to say is useless for any smaller size rendering
[23:14] <kwwii> oxygen has a directory with the scalable icons and inside of it is a dir named small
[23:15] <kwwii> inside of it are different sizes, if an icon exists in a directory at a given size it will be used to render that size of png instead of the larger version
[23:16] <kwwii> in the meantime, jimmac (Jakub Steiner, the tango icon maintainer) created a one canvas workflow which allows an artist to include the different sized svg's in one svg document
[23:16] <kwwii> which is, in some ways, really interesting when creating an icon
[23:17] <kwwii> people think creating an icon means making one picture
[23:18] <kwwii> but it is really creating, in many cases 4 or more images (16x16, 22x22/24x24, 32x32, 48x48,+)
[23:18] <kwwii> so anyway, if you want to do an oxygen icon the first thing you need is the palette
[23:19] <kwwii> oh, http://jimmac.musichall.cz/log/?p=436 is a link to the one canvas video from jimmacs blog
[23:20] <kwwii> http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/utils/oxygen.gpl is the oxygen palette for gimp or inkscape
[23:20] <kwwii> it has a lot of colors, both vibrant and normal
[23:20] <kwwii> try to use the normal as much as possible
[23:21] <kwwii> :)
[23:21] <kwwii> in the end, if you really want to make an icon in a given style the best way to learn how to do it is to look at the icons very closely
[23:22] <kwwii> for this chat, I chose the document-save icon (a floppy disk, which could in itself be discussed to no end)
[23:22] <kwwii> so if anyone/everyone has the svn icons (ie the scalable smaller sizes) I can go through the basics
[23:22] <kwwii> anyone interested?
[23:24] <kwwii> cool...so open no worries, this will give you a feeling for how it works and, perhaps, show you how you could help
[23:24] <kwwii> honsestly, picking this icon was luck..give me a chance
[23:25] <kwwii> open scalable/actions/small/*/document-save.svgz
[23:25] <kwwii> ie all the sizes in the small directory
[23:25] <kwwii> a 1x1 preview will suffice
[23:26] <kwwii> the point is to see how the shapes are simpler as the image get smaller
[23:26] <Riddell> svn co svn://anonsvn.kde.org/home/kde/trunk/kdesupport/oxygen-icons/scalable/actions/small   will download just the  small icons (22MB)
[23:26] <kwwii> if you look closely, you will, unfortunately see that the strokes of some objects at certain sizes don't line up to the object underneath them, which is an error caused by simply scaling the larger sizes down
[23:27] <kwwii> thanks Riddell
[23:27] <kwwii> so on the small sizes the image is made of large, simple shapes and gradients
[23:28] <kwwii> whereas the larger sizes use a texture on the metal part of the floppy
[23:29] <kwwii> does anyone see the problem with the texture in the larger sizes?
[23:29] <Riddell> here is just that icon http://muse.19inch.net/~jr/tmp/icon.tar.gz
[23:30] <kwwii> for whatever reason it is off by 4 pixels in both the x and y coordinates
[23:31] <kwwii> so over-all my point is that drawing pictograms is not drawing pictures...only the very large sizes come close to illustration and illustration is in any case differetn than real artwork
[23:31] <kwwii> it is about artistic design
[23:31] <kwwii> and if you really want to learn how to do it, look at the stuff that is already out there very closely
[23:32] <kwwii> oxygen is about very subtle, realistic surfaces and materials
[23:32] <kwwii> simple gradients everywhere
[23:32] <kwwii> although the outer edges of things tend to be a bit darker
[23:33] <kwwii> which precludes the need to use a line around the icon the define it against the background
[23:33] <kwwii> which increases the realism
[23:33] <kwwii> but really, the small oxygen icons are just as simple as any other theme
[23:33] <kwwii> there is no way around that
[23:33] <kwwii> it is not a matter of design but a matter of physics
[23:34] <kwwii> interestingly enough, with the advance of computer displays the tiny little things they are selling today have really high resolutions so larger icons are needed more than ever
[23:35] <kwwii> funny that...it took a tiny display with high resolution to increase the need to larger sizes icons
[23:35] <kwwii> people always say that I talk to fast when giving a presentation...I get the feeling that I am typing to fast as well
[23:36] <Riddell> the wrong texture is on the metal slider at the bottom of the floppy disk?
[23:37] <kwwii> Riddell: yes, let me make a screenshot
[23:37] <Riddell> I see it
[23:37] <Riddell> how long  does it take to make an icon like that?
[23:38] <kwwii> http://sinecera.de/Screenshot.png shows the problem clearly, I think
[23:38] <kwwii> in the old days I would have said that a typical icon takes a day to make
[23:39] <kwwii> some, like arrows and such are so closely related that it takes a few days to hammer out the concept but then you have a lot of icons done quickly
[23:40] <kwwii> whereas some things take time just to create an idea of the metaphor you want to express
[23:40] <kwwii> really, it is about creating visual metaphors which people translate into concrete ideas or actions
[23:40] <kwwii> so they are very important and very hard to do "right"
[23:41] <YenTheFirst> That was going to be my question (and what I originally thought this talk would be about): How do you go about creating a good visual metaphore?
[23:41] <YenTheFirst> *metaphor
[23:41] <kwwii> you can make the most amazing pineapple icon at 16x16 and say it means miscellaneous but people will call you on it for years
[23:42] <Daskreech> Gotta go!
[23:42] <kwwii> YenTheFirst: well, the way we have done it is 1) asked ourselves what kind of styling would be appropriate for this metaphor
[23:42] <Riddell> speaking from experience on the pineapple are we? :)
[23:42] <kwwii> ie is it something slick and sexy or is it something simple and plain
[23:43] <kwwii> then, we created a kind of definition for the different icon types
[23:43] <kwwii> http://www.oxygen-icons.org/?page_id=2 explains the idea
[23:43] <kwwii> although we probably didn't reach all of those goals, we still try to live by the ideas behind them
[23:44] <kwwii> so we look at the material type and how it reacts to light
[23:44] <kwwii> that is very important as the things we make are hyper-realistic at the larger sizes
[23:44] <kwwii> another thing to take into account is the smaller sizes
[23:44] <kwwii> how does it work, scale it down, make a simpler version
[23:45] <kwwii> then go back and change the big version, etc
[23:45] <kwwii> back and forth to some degree
[23:45] <kwwii> so depending on the size, the icon gets more complicated
[23:46] <kwwii> the smaller sizes, although they may seem more challenging or really the things that the new artist could look into first
[23:46] <kwwii> although, if they are really good at illustration then I would suggest simply talking to me directly
[23:46] <kwwii> :)
[23:48] <kwwii> so, as the last part of this, I thought that if enough people are intersted in actually discussing something and working out an idea for an icon we could make one
[23:48] <kwwii> I was told that there is a need for an icon for the usb image creator (or such)
[23:49] <kwwii> so it occured to me that people only install an image on a usb key and not disk
[23:50] <kwwii> and as I made the current oxygen usb key icon I figured we could go from there
[23:51] <kwwii> so open drive-removable-media-usb-pendrive.svg from scalable/devices
[23:52] <kwwii> ideally we want to say that we are putting kubuntu onto a stick, right?
[23:52] <kwwii> ie. if I am wrong or you have blood pumping through your brains say something :p
[23:52] <Riddell> http://websvn.kde.org/*checkout*/trunk/kdesupport/oxygen-icons/scalable/devices/drive-removable-media-usb-pendrive.svgz
[23:53] <kwwii> so we could remove the oxygen branding - trust me, I know them :p I am sure they will be ok with it - and add a kubuntu logo
[23:54] <kwwii> Quintasan: yes, the logo is good
[23:54] <kwwii> another thing to look at it how the oxygen icons show adding something new
[23:55] <kwwii> if you look around (trust me, I have) it uses a white plus symbol on a green 3d globe thingy
[23:55] <kwwii> not sure if that is what we want for this though
[23:55] <Riddell> http://kubuntu.org/art/kubuntu-feisty-plain.svg  logo
[23:56] <apachelogger> kwwii: could become a bit crowded, right?
[23:56] <kwwii> I think making the purple in the usb stick blue and adding a nice kubuntu logo would be enough...maybe a star or something like that to show the act of creation
[23:56] <kwwii> apachelogger: exactly
[23:56] <kwwii> this icon will mainly be shown at 48x48 I guess
[23:56] <kwwii> Riddell: do you know the details of the icon size?
[23:57] <kwwii> one interesting thing about this icon is that at the time I made it we could not rely on guassian blur support from inkscape so we had to draw the shadow by hand
[23:57] <apachelogger> it's only shown in the kickoff menu and window decoration I suppose
[23:58] <kwwii> apachelogger: hehe, so a large version and a *really* small version
[23:58] <apachelogger> righto
[23:58] <Riddell> kwwii: I don't I'm afraid
[23:58] <kwwii> which is a worst case scenario, really
[23:58] <kwwii> no worries
[23:58] <kwwii> I'll make this icon blue and add a logo to it
[23:59] <Riddell> http://people.ubuntu.com/~jriddell/tmp/kubuntu-usb-creator.png  I am an artist!
[00:00] <kwwii> Riddell: honestly, it is not going to be much more than that :)
[00:00] <kwwii> that shows me that perhaps the kubuntu logo should be engraved on it
[00:00] <kwwii> and perhaps one color
[00:00] <kwwii> not sure about the rotation
[00:00] <kwwii> but all in all, that is the main point for this icon
[00:01]  * apachelogger thinks purple => blue is a good idea
[00:01] <kwwii> man, I had really hoped to get this icon finished :(
[00:01] <kwwii> I promise to finish it asap
[00:01] <Riddell> time up I'm afraid
[00:01] <kwwii> yepp, thanks for the interest