Eight years since first release and still no usable theme?

Well, let me be frank. Ever since gtk-3.0 I've been skeptical of it, especially of the theming aspect. In gtk-2 we had (and still have) many themes ranging from trash to excellent, almost every kind of taste could have been satisfied. Not so in gtk-3. First issue is constant changes to theming API, meaning that despite there being hundreds of themes, only handful of them actually work right :( And among them, I still have yet to find one that would work on my fairly usual 15,6″ laptop screen with 1366×768 px resolution. Basicaly I have two issues.

1. Almost every possible gtk-3 theme has huge (no, not just big, I really mean the word huge) paddings and there are no working compact variants. Yes there are minwaita and adwaita-slim, but they kinda break Thunar's and Whisker menu's entry boxes, and they also aren't very slick (yes, I don't like proper adwaita either, it does not look very proffessional to me).
   
   So far it meant I had to expand side pane in libreoffice and had less usable screen estate left for editing (the first two pics, notice how in the gtk-3 version the sidepane is not only wider, but also needs a scrollbar!), but now inkscape is getting ported as well, I'd need twice the screen resolution I have now for it to be usable (the second two pics, notice how in the gtk-3 version much more buttons and entries are not directly accessible, and the sidebar is sooo huge and cannot be made smaller) :(
2. Scrollbars. They're small, they're ugly, they're hiding and hiding badly, meaning sometimes it's almost impossible to select either last column or last row in a list or both.

*Sigh* You at gnome/gtk – why do you try to fix something that ain't broken? Why there isn't a single proffessional looking compact theme that I could use with inkscape on my laptop much like I could with its gtk-2 releases? Are low-end machine users nothing to you? Why gtk-2 themes worked actually better at gtk-2.8+ (and probably in any version sans the very first or second) than gtk-3 themes in any version you choose?

Do you still wonder why people are complaining?

Oh, and to end on a positive note: if someone points me to really working really compact theme that does not break xfce-gtk3/libreoffice-gtk3/inkscape-gtk3 a is good looking (no, not adwaita, but something along the lines of numix, greybird, menta, zuki*, etc.) I'd be very happy to change my mind about gtk3 ;-)

Consistent Perspective in a Group of Icons – How To

I've been creating a bunch of Echo icons lately and one thing I wondered how to do properly is perspective. It's easy to do thinks consistently if you're using some kind of metric projection (e.g. isometric), because you have simple linear transformations from (X, Y, Z) to (x, y). That's not true for perspective. How the 3D projects to 2D depends on the shape, on the position, on the size and many more factors when projecting with perspective. Because I was creating many icons at once, all flat ones with constant thickness, I wanted to do this not only consistently, but also quickly. I've came up with the following workflow.

Start with drawing the front face of the icon on the canvas, just like if you were drawing pure 2D.

Then duplicate the canvas as well as the icon shape. Don't forget to change colours so that you can easily tell them apart.

Next change the size of them by some factor and use the same factor for every icon you create and is supposed to have the same thickness. The resize should be done to both canvas and the icon shape at the same time so that it scales properly, keeping the ratios and position of the icon on canvas.

Then move the resized canvas together with the icon shape to it's new position. Again this has to be done consistently for all icons with the same thickness. You can imagine that the original and edited canvas create together some kind of cuboid whose front and back faces are squares, even in the 2D projected image its thickness regulates thickness of the icons and the relative position of its back side to the front side controls your point of view.

Next delete the changed canvas (we don't need it anymore) and put the back side of the icon behind the front one.

Next you should remember that you're doing an icon so it should be properly aligned to pixel grid in order to look crisp. This can be done quickly with the help of inkscape grid feature.

Now we have front and back side of the icon, but we still don't have it's sides, as can be seen on the next picture.

The easiest and for simple icons also the best way to do them is to duplicate the front side again, merge it with the back side and fix those bumpy parts to look as you'd expect them using the node tool.

Now the icon is only missing some shading and outline.

So next we add some gradients to make it look as we wish – this can be a tedious task, depending on how realistic we want the icon to look. On small size like this one it can be greatly simplified though. And finally we add an outline. This can be done by duplicating the edited shape again, adding an outline that is twice as wide as we want it to be (because half of it will be hidden) and push it bellow the whole icon. The result looks like this:

Finally we render the icon in desired size with transparent canvas and it looks like this:

I hope you like my today's how-to :-) Also, bear in mind that this is greatly simplified perspective projection as we use it in icons, if you were going for fully realistic painting you'd quickly find this workflow isn't suited for such task.

Some Impressions on LGM

Ok, first let me same I'm totally awful with writing kind of what-did-I-do blogpost and at the same time both Nicu and Pierros are making a really good posts about what we do here (with some of the best photos Nicu and Pierros took included)…

My first first impression of Belgium was not that great — I'm pretty used from Czech Republic to get easy everwhere, there're "online" infotables about trains departures/arrivals on train stations, the subway in Prague is really easy to follow (I'd say it follows the KISS principle, like gnome does), and to add to that everything here in Belgium is in French (which I know nothing about) so I was a bit at loss when trying to travel from Charleroi to Brussels and then to our hotel. But at last I was successful.

It really is a bless to have Pierros with us — if it were not for him, I would be constantly lost in the city (somehow my sense of direction in big cities is terrible) ;-) Both Nicu and Pierros are really awesome companions and they're showing me lots of new stuff I have no idea about (like the Belgium beers). Btw. speaking about the beers, I'm totally "insesitive" in this area and most beers I've tried taste very similar to me :-D

But back to the conference itself. Yesterday's morning lectures were the more technical ones which is probably not a best way to start a graphics meeting, but they were pretty interesting. Lots of python, some C and even Scheme based scripting language (the Script-fu and Tiny-fu from gimp). The most interesting talk for me for that part of day was A first outline for a UI for a fully GEGLed GIMP. As I understand it it's a new type of workflow and format that is kind of chain based — you take the initial image and apply various edits, effects and other operations like the old way, but the difference is that it does not change the image itself. Those of you familiar with quantum physics or generally a [noncomutative] operator algebra over some space could see it as taking an image (member of the space in question) and applying various operators on it. And the point is, you apply it only on screen, in memory it's still being interpreted as a sequence of operators applied on the image. So you can insert another operators in the middle, delete some of them, without breaking the rest of the chain. Lots of possibilities. I really look forward the time when this will be included in gimp releases ;-)

The lunch was fairly good, and we've met some interesting people there. It's a really great oportunity to talk with various people during the lunch break. In the afternoon there were some interesting presentations like How to get contributors to your Free/Libre/Open Source project from Vietnam and Asia or How to Run an Art School on Free and Open Source Software. Btw. Hong Phuc Dang who was doing the presentation about Open Source in Vietnam is really enthuiastic about the FLOSS software as you can see in the video she put up (sadly it's in flash, but it should be acessible form lgm site some time in the future hopefully in more open format). And of course, we've had our presentation with Nicu, seems the audience liked it, but we're regretting that we forgot to say some of the things we wanted to say…

Today, I'm a little sad that we overslept and missed a good part of the Diffusion Curves in Inkscape vector drawings, there was an interesing presentation about LibreDWG and I'm looking forward some presentation later today about fonts and typography.

Answer to: Why is my design blurry?

Short answer – unlike paper, display is a discrete medium.

Long answer, bellow.

When you prepare designs that will be printed, or when you are painting on paper, you usually do not have to care about some "pixel" grid. Thanks to the small size of dots when printing or the small size of paint particles when painting, you don't have to worry about fitting them in a grid, either because there is no grid at all or because the particles are much smaller than an eye could discern. On the other hand, displays have rather big grids, with resolution usually about 100 dpi, which means there are 100 particles per inch. You can easily imagine that with such small resolution, people with good eyes easily notice when something is not aligned to this grid, or isn't smoothed (we call it antialiasing).

For inkscape, cairo and other similar libraries and applications we can visualize the pixel grid like this:

The black lines represent coordinates used by cairo, inscape, ... while the squares inbetween are the actual pixels. Now imagine you'd like to draw a blue rectangle on (1,1) with width = 6 and height = 4. If you pass these numbers as its coordinates it will look like this:

This is fine, as the rectangle nicely fits into the grid. Such a rectangle would look crisp if displayed in 1:1

Now, if you decide to draw it with 1px wide border at the same coordinates with the same dimensions, how it will look like? Will the border be drawn outside the original rectangle or inside it? Neither is correct:

As you can probably guess, this will look blurry as the border ended up in between the pixels and thus is misaligned. You can correct this by shifting the position by 0.5px and making the dimensions smaller by twice the value:

If you now compare the two cases in original size, I think anyone can see (at least with the help of magnifier) the difference:


This work very similar for other shapes as well. It's important to bear in mind that the imaginary line in terms of coordinates marks the boundary of fills but the center of borders and that the grid lines are inbetween the pixels. You have to position your drawings appropriately in order to look crisp.

But what about fonts? See my previous post to see the main problem with them. Sadly inkscape does not offer better smoothing than greyscale for fonts, so you have to either use gimp, or align each letter manually (tedious).

We've gone a long way…

… but we are still far from finish. I am talking about Echo Icon Theme. Its history is long and full of twist and contributors. It started as a personal project by former RedHat employee Diana Fong and it was targeted as a replacement for the aging bluecurve icon theme. The original draft looked like this:

The icon set quickly gained popularity among Fedora user base, but contributors were few, development slow and we missed the important part of making it default in Fedora (because it was not complete enough). This question of completeness has been haunting us ever since.

It's nostalgic to see what were my first contributions – I had practically no experience in graphics, but wanted to see the set improved. Here you can see my very first sketch:

As you can see, it is not-so-ugly icon with well distinguished shape, but with totally different style, as were pointed out by the Art members at that time (Luya and Nicu will maybe remember ;-)). I've finally ended with this:

I'd say, not bad for a first try, but this icon is no longer in Echo... I've replaced it much later with desing more consistent with our new apporach to echo.

The slight shift in design is nicely seen e.g. on these icons:




And now we're even starting something even more different – Echo Perspective. Here are some expamples of the initial progress:





Well, you might ask why starting anew when there are already great themes like tango or oxygen, what will happen to the original Echo and much more, why don't we rather join tango, … We cannot give you straight answers. It happend so that we like Echo and would like to see it being default in Fedora sometime in the future, but we also need to keep up with others – and that means perspective projection. We believe that neither Echo nor Echo Perspective is a lost case and that there are reason strong enough for us to continue working on these, but you might disagree. Well, at least, with the perspective theme, we can share a lot with tango or oxygen. Even though we have different style, the shapes can now be very similar and it should not be hard in the future to easily adapt echo-perspective icons to tango or oxygen guidelines.

And how far have I gone? In short very far. In longer – from an ocassional contributor to main contributor and practicaly the Echo Icon Theme project leader... Also as you can see from the images above, my inkscape skills have improved a lot ;-)

As you can see, on my very example, it's not actually hard to join Echo. Yep, the standars were risen a bit, but so was the infrastructure and we can call our project mature now. And we will be happy to welcome new contributors. Don't be shy and share your work/ideas with us. We will in turn help you to became a full-fledged Echo Icon Theme contributor :-) Fedora-art-list is the right place to start.

Developing New Library for Icon Artists

Since I-don't-remember-when I have been making a complete rewrite of echo-aritst scrpits which are intended to ease the life of echo-icon artist - they create new icons from template, are able to add icons/symlinks to echo icon theme and add manage their local git repository. So they abstract most of the non-artist stuff away from the artist. During the rewrite I noticed several things.

• It would be usefull to split my efforts to backend (i.e. ruby library) and frontend. This would make it easier for me to change the frontend interface while keeping the functionality intact or improving the functionality without keeping the user interface intact. Also it makes the future possibility of writing a gui frontend much more viable.
• Also I realised, I could totally abstract echo specific stuff out of the library into the scripts and thus possibly make the library useful for non-echo icon artists as well.

I also decided to make a logical split of the originaly single methods into

• Icon related stuff - icon creation, icon rendering, icon checking if it has all requisities needed to successfully render it, handling icon symlinks
• Theme related stuff - generating completely new index.theme, automatic addition of new directories to already existant one
• Build System related stuff - creating symlinks when doing the things the old way, adding icons and additional symlinks to build sys when using autotools and icon-naming-utils, add symlinks when building completely from source (the buildsystem itself is done in a way that icons are added automagically), or creating a brand new buildsystem (supports only the one where we build from source ATM).
• SCM system stuff - currently it means handling git without the need for the user to know how to use git sans git push origin.

You can see the result of this split at the icon-artist documentation page and our git repo. Since it's my first time writing a ruby library and also my first time using rdoc I welcome any suggestions that would lead to making the library interface and documentation better ;-)

Now, back to the scripts. I believe ideal icon artist workflow would be like this:

• Create icon from template (echo-icon-create --context CONTEXT --template CUSTOM-TEMPLATE icon-name)
• Actually draw the icon in inkscape and label the scalable icon (in order for the scripts to know, which part of the one-cavas SVG is supposed to be the scalable SVG icon used in the actual theme)
• Add the icon to local git repo (echo-icon-add --symlink SYMLINK1 --symlink SYMLINK1 --branch BRANCH1 --branch BRANCH2 --component COMPONENT icon-file)

In addition to that you need to initialize your local repo at first (echo-git-setup), and at the current state of things you also need to update the repo before adding the icon (echo-git-update) and push your changes to fedorahosted (cd git-repo-dir && git push origin). So in order to achieve the above I need to add git update and git push to echo-icon-add script... Update should be OK and it haven't done it simply because I haven't actually though about it, the push is more tricky since unless I am sure it won't break things I don't want to autopush changes to fedorahosted. So it's possible I rather create a simple echo-git-publish script for that purpose for the time being...

What do you think of it?

On a related note, are there any ruby-fluent readers who could tell me if I am doing things right in this install script?

Echo Icon Theme "Perspective", Part III

It's been a while since I've last blogged about this topic. It's mostly because new semester is keeping my spare time low... But anyway I thought I should take the first step and make some conclusions from my previous posts.

We are starting Echo Perspective

Ok, it's not official yet and there are still things that need to be done, but I am practically starting new parallel icon set to the current Echo called Echo Perspective. As the name suggests it's going to be more or less same as the current one, only we'll be using perspective.

Since we are starting basically on a clean field we can afford some more or less radical changes to the current looks, like complete redesign of some icons, slightly different looks, etc. I've drawn a proof-of-concept video-display icon to outline what way I'd like Echo Perspective to take. My goals are (in no particular order):

• usability - an icon must be easily recognisable at all sizes, the metaphor must suggest it's meaning and thus must not be too much complex
• looks - we are aiming at the same time at more realistic look, we'd like to be slightly more realistic looking than mango or tango, but slightly less than oxygen
• modern - we will use modern metaphors where appropriate, for example we'll use wide screen flat LCDs in favour old 4:3 CRT ones
• cross desktop - we aiming this icon set to be default in some future version of Fedora, this means we need to satisfy as much Fedora users as we can, so we need to support all major Fedora desktop environments like Gnome, KDE or XFCE

What's Next

Well, we need to set up our infrastructure to allow us easily push Echo Perspective icons to our git repository. I am working on that, but given the amount of free time I currently have, it'll take a while. But we can create the icons without pushing them to git in the mean time. And there are a few decisions that need to be made.

Directory Based Icons

From time to time, we are criticised for not having the directories blue in Echo. Also the design is pretty oldish, modern systems have folders that are standing. Now the questions is, how to make them in Echo Perspective? Any ideas? Any designs? I'd like the wider community to help with this one. You need not to create whole icon - concept design is all we need. I hope we can gather a few and decide later which one to use. I've set-up a wiki page for it, but you can as well send the designs to the fedora-art-list.

Trash Can

Trash can is another icon that is in dire need of redesign. We'd like our trash can to look more modern, perhaps made of metal, perhaps from coloured glass, perhaps semitransparent, whatever. Submit your ideas on the above mentioned wiki page or at fedora-art-list.

My New Timetable

Ok, so the winter term finally started and I am comming to school again (yay, this year I am having a bunch of interesting stuff like quantum theory or relativistic physics and it's also about time I start working on my Bachelor's thesis - I'll be working on Space-times of Minkowski and Kerr from a circular orbit). And with that comes the need for new timetable and I enjoy making it looking good. This year I've created one I am pretty much satisfied with so I though I'd share it with you ;-)



Source SVG: http://mso.fedorapeople.org/designs/rozvrh.3.zs.svg

As you can see I used three colours, each with two different variants. Darker versions are for lectures, brighter for excercises. Blue is for mandatory classes, orange for semi-mandatory and green for the rest (classes that are either voluntary or intended for higher study year than I am in). It was made in inkscape and it makes use of layers (ctrl+shift+L) and it is pretty easy and straightforward to edit it to fit your needs.

Batch of new mail-* Echo icon

There is a lot icons we need to create for Fedora 10. So we started to make them.

Today I've finished creating all the mail-* icons (both for Actions and Status context). Some of there were previously missing others had inconsistent various size variants and many missing size variants. So I reworked them all in one batch. It's been a lot of work, since it's a lot of icons and not all of them are perfect, but they can be improved later, when/if needed.

It's total of eleven Action icons and six Status icons, so I created two animated GIFs for preview purposes.





Since there is a lot of work to do still, we're constantly looking for new contributors. The only requirements are some basic skill in inkscape and willingness to invest your spare time into making Echo icons. If you are interested, drop us a mail in the fedora-art-list.

There is not much you need to know to get started. These are the most important things you need to have in mind when creating an echo icon ("sorted" as they came up to my mind):

• We have our own colour palette which you should use in inkscape


• We use darker contrastive borders compared to lighter fills. This helps defining the icon shape


• We use three different projections (incorrectly called perspectives in the Guidelines). On the Table for 32x32 and bigger Action icons, Isometric (actually some kind of axonometric) for other contexts for 22x22 and bigger sizes and Flat (plain 2D) for the rest (you can see all the mentioned perspectives in the above icons). Look into Perspective Guidelines for definitions.


• Brightest spots of fills are on top of objects and little to the right


• We use simple shadows for all sizes sans 16x16


• We prefer gradients to highlights/reflections

Fedora 10 Artwork

OK, it's around Beta Freeze and as usual we need some feedback for the artwork that's gonna be in Fedora 10. I'll start with Echo icons and follow to the traditional release-dependent things (wallpapers, etc).

Echo Icon Theme

As some of you already knows, echo-icon-theme has been approved as Fedora 10 Feature under the condition that we achieve good enough coverage. First we need to know *what* exactly is good-enough coverage, especially given that the current default has lot of gaps too... The consensus seem to be that we need to cover about the same icons as the current default on the Desktop Live Spin. So, I booted F9 Live and examined which icons are needed. I came up with this list [1]. Based on this list, I counted that the current coverage of what we need to have done for F10 is about 89 %.

Prior to that we focused our efforts at filling the Gnome Menu Bar. We have pretty good coverage of the first level menus and just ending with coverage of second level menus in the System menu. The improvement in System->Administration is vast, since there were about three or four different icon sets used and many of the icons were blurry...

Join Us!

We still need to create about 35 new icons for Fedora 10 and many more after then, also there are lots of icons that might profit from refinement/rework and icons that have missing various sizes. But there are only 2 people actively working on Echo currently which basicaly means we are overwhelmed by work. Therefore it would be great if more people joined the efforts. Creating an icon isn't that much hard. To get started you just need basic skills with inkscape, we'll help you with the rest.

If you are interested to join, pick up some icon to create/modify, tell us (one the fedora-art-list) that you are interested in it and start working on it following the guidelines [2] and first step of the Adding New Icon Set how-to [3]. After you are done send us a notice on the art-list and work with us on further improvements (if we have some suggestions). Once we accept the icon, we'll tell you what to do next :)

F10 Themes

Yesterday I've created, imported and built the themes that made it to Round 3. Install them by
yum --enablerepo=rawhide install gears-backgrounds invinxble-backgrounds neon-backgrounds solar-backgrounds, select them in your wallpaper preferences and give us some feedback on the art list. We still haven't decided which one will be in F10 final, so your opinion might help us decide :)

The candidates are:

Gears [4]

InvinXble [5]

Neon [6]

Solar [7]

References

[1] https://fedorahosted.org/echo-icon-theme/wiki/ToDo/BaseSet
[2] https://fedorahosted.org/echo-icon-theme/wiki/Guidelines
[3] https://fedorahosted.org/echo-icon-theme/wiki/AddingNewIconSet
[4] https://fedoraproject.org/wiki/Artwork/F10Themes/Gears
[5] https://fedoraproject.org/wiki/Artwork/F10Themes/InvinXble
[6] https://fedoraproject.org/wiki/Artwork/F10Themes/Neon
[7] https://fedoraproject.org/wiki/Artwork/F10Themes/Solar