Events icon set released

The icon set for events, holidays and occasions is available for free download.

Creating icons is not my primary field of expertise, I know about it enough to understand how hard it is, so I am contributing only a tiny bit to desktop icons, but when WorldLabel.com asked for this set targeted at web use I happily accepted, knowing I won't have to struggle with pixel optimization as such awful sizes as 16x16 and 24x24, but I can focus on the thinks I like: metaphors and shapes. Added bonus was the freedom: the set is truly free, released under the Public Domain (this is an experience we learned from the Open Clip Art Library), so people can use them absolutely as they like. In a couple of weeks the images will also hit the library as well as my own clipart collection.

The icons were created with Inkscape 0.47, assembled into collages with GIMP 2.7.1 (beta), all under Fedora 13. They will be available as PNGs rendered at various resolutions as well as sources in SVG.

I propose two games, please participate to them in the comments below:

• look at the images, understand the metaphor and guess the event/holiday/occasion they are intended for
• name your favorite - bet you like some more than the others, I saw very divergent opinions, let's make a top!

And, of course, do not forget to go to WorldLabel.com and download the good stuff.

Good hackergotchis for everyone

A good Planet blog aggregator, like our Planet Fedora is defined by its great content, and I am one of those who strongly believes great content is not only dry info about our work and press releases, but also personal things about the people lives: data about our pets, year long running self-portraits, game tips, movie reviews, mosaic covered drawings and so on (I may not be 100% on the same page with the board here, but I am a known felon). But the content by itself is just content and is provided by a large and distributed team, we at the Design Team can't, and should not try to influence it, what we can do is to improve the presentation.

Presentation-wise, we have a nice template that fits the look and feel of Fedora and we have those little graphics named "hackergotchi" which are ...not perfect. So that's the purpose of this article: talk about them, give a few hints about how they can be improved and show some examples.

A dry definition from Wikipedia sounds like this: "A hackergotchi is a picture of a writer used as an avatar to identify the author of a given web feed in blog aggregators" and also according to Wikipedia they were somewhat invented by Jimmac (BTW, I am still speechless in awe by the news about him joining Red Hat maybe is still hope for GNOME 3 to not become a turd?). In practice they are disembodied hacker heads floating next to one's blog post, to help identify and make a personal connection with the author.

Years ago I tried to improve their state and did what I was able to do: created a default icon for those who do not have an image, wrote a small tutorial about creating your own hackergotchi and created a wiki page where those who can to it themselves can place a request. I advertised those on Planet, but failed to do the next step: proactively contact people with bad, poor or unsuitable hackergotchis and inform them about their options. I suck.

Now I passed the hackergotchi maintenance torch to Pierros who, as a junior member of the Design Team needed an entry task so I can pretend to have an eldery status and make judgements on quality and pass advices. And be self pretentious.

From a technical point of view a hackergotchi is a small PNG image with transparent background, so it can work regardless of the page background, usually depicting the head of the person with no background and having a drop-shadow to make it stand-out better in the page. Historically I used to make them 96x96 pixels, people who did themselves used whatever sizes they thought of but recently Pierros proposed, and we agreed, to move to a new standard size, 120x120, which should be small enough to not alter the layout but large enough to give a better image, so you can actually recognize the person when meeting face to face. Also, when cutting your face on the contour, leave out your neck or body.

From an artistic/photographic point of view you need a good photo: as the image is supposed to represent you, it must show your personality, so don't use photos like they are used for your passport/id card/driver license, use something to show your soul. Try to take the photo with a good camera, using the crappy one made with your cell phone may be usable if you have the perfect light, get a lucky angle and the stars are aligned, but most of the time not even the most experienced GIMP wizard will have a hard time with it and the result will not be great. When taking the photo is a good idea to use a plain, seamless background so the work is easier and if your hair is curly, fluffy or long to have it hung together (you know how hard is to cut the hair's contour?).

If I scared you with the instructions above, here is the sugar-coating: we have a service where the Design Team will do the work for you if you provide an image! Go to our ticketing system and put a new request, select "hackergotchi request" as the type at the top of the ticket and attach or link to a photo (please, see above what is a good photo).

At the latest IRC meeting, when I was tasked with this article we considered a good addition would be a list of examples of good hackergotchis, but as the creator of many of those images I wanted to avoid bias, so Mo helped me with a list with what she consider good samples (I don't necessarily agree with her selection), which I will try to comment and highlight the strong points, so here we go:

for this one I do like the shooting angle, is good and it made the cutting work easier and I like his smile, however, I don't like his eyes being so closed, I don't believe this is his personality (IIRC, it was a beach photo and the sun was "guilty" for that).

this one is great and it was made by the user himself: the photo is very sharp, made probably with a good camera, the smile is telling a lot and the hat used to tell its part of the story.

warm smile, good angle = good hackergotchi

here you can see the result of using a good camera, however not knowing him in person can't say how representative the smile is. I acknowledge my GIMP'ing mistake, should have cleared a bit more below the ear.

very sharp image, easy to work with and a huge smile, showing a person you would want to work with too.

good original angle, good GIMP work for cutting, it could have used a bit more sharpening

this one also suffers IMO from the lack of sharpness, maybe GIMP can help, otherwise is great: the angle, the posture, the diffused light.

another warm smile, another hackergotchi made "by the book".

this one is close to perfection: good photography (sharpness, light), good posture, big smile. Only a few pixels at the chin could have been softer (why do you think we use drop shadows? to make those pixels less visible!)

I would have not included this one as a "good" example: it to flat, the camera used was not great (look at the hair) and the background is white, not transparent. But he has a good smile, which makes a lot.

great one, the angle tells a whole story, that's someone you don't want to miss with.

if you know Pierros, you know his smile. Still, I had a lot of troubles with this, his black hair is held with a black band and it was really hard when GIMP'ing to understand which is which.

A closing conclusion? Yeah, is the time, I feel like I already bored everyone: rules? yes, they are usually good, but when you have a vision, forget about them, go crazy and show the real you. And take all I said with a grain of salt, after all I am the one using currently as hackergotchi the drawing below:


Update: Jef just provided a template small howto for adding badges to your hackergotchi, adding the link as it is an useful reference.

Echo tips: screencast - Creating icons

It seems like my initiative to get people intro producing tips, howtos and tutorials about creating Echo icons was not that bad after all, Martin wrote a couple of very useful pieces.

Being in a screencasts frenzy today and until I got to write something original, here is a little screencast I made based on Martin's excellent tutorial about Creating Echo Icons with On the Table Perspective (all the creative credit goes to Martin, I just recorded his steps):

Note: forgive me Martin, I misspelled your name in the screencast and I am too lazy to record it again only to properly de-capitalize one letter :p

Everybody: what are you waiting for? Move your lazy asses and start drawing Echo icons, is not hard at all!

Echo icons. Tips: guides and grids.

A bit of history

There are two years since the first mockup (no picture, the particular wiki page is dead) for what was going to become the Echo icon theme (at the time it was just "Bluecurve and Beyond") appeared. It was a rough preview (~20 icons) made by Diana.
Honestly, the icons sucked a lot - bloated SVG made with Illustrator, no standard size, no guidelines and so... but a lot of us, bored by the already old Bluecurve and not convinced by Tango, got excited and put some hope in it.

Now

After a while, without a maintainer, with poor infrastructure (a wiki page), no guidelines and poor SVGs and few active contributors, the development slowed down.
Then Luya and Martin stepped in, took over the maintenance, worked hard on guidelines, a new hosting infrastructure and a number of cool looking icons which are used in various places around Fedora.
The plan is ambitious: to get the icon theme in a state so it can be considered as a default for Fedora 10. The plan is hard but not unattainable. In needs more contributors. It needs you.

Tips

Icon development is not my filed of expertise, I have contributed to Echo only a few remixes in the early days, but I like to learn. So here is my idea: show some basic tips to encourage others to put they own tips, generate a healthy exchange of information, learn from each other and encourage new blood.

One of the hard part about the Echo icon theme is that it uses an axonometric (not that is not isometeric) view for the large view, and the creation of such icons have a level of difficulty. So you need to use a kind of helper - the old way was to import a SVG showing a grid, draw on top of it and then delete it (the source is available in the guidelines page):

Now Inkscape 0.46 comes with improved features: angled guides and axonometric grids, making your life (and icon creation) easier.

Drag and drop from the top ruler a grid line, double click on it, rotate with 24.5 degrees:


Drag another grid and rotate it with -16.25 degrees (at least, those are the values I measured):


Now use these two guides to help you drawing the nice perspective (press "|" to toggle their visibility on/off):


While the guides are only a visual reference, a grid can be more effective: it is more dense and also allow snapping to its nodes. Its visibility can be toggled on/off using "#".
So use File -> Document Properties, go to the Grids tab and create a new Axonometric grid with a 16.25 degrees X angle, 24.5 degrees Y angle and whatever value you like/need for Y spacing:

Keyboard languages, language communities and national communities

I hate the the Keyboard Indicator applet on my Fedora/GNOME desktop.

My (physical) keyboard, as virtually all keyboards sold in my country (Romania), has an US layout. And I, as a large majority of people around, write without diacritics (ă, â, î, ş, ţ). Except in the cased when I really need diacritics or the euro symbol (€). So I have to change the keyboard configuration, and for my own use the "programmers" version of the Romanian layout (the default Romanian layout in Fedora) is the best: it is identical with the US layout, so the print on my keys remains usable and I get diacritics with AltGr+a for ă, AltGr+s for ş, AltGr+e for € and so on. Which is nice. But I still hate the applet.

As shown in the screenshot above, the applet display a text, "Rou" in my case, instead of flag icons. While I know the argument why the flags were replaced with text a long time ago and it make sense (flags are symbols for countries, which represent political entities, not languages and their use may get you into nasty nationalistic conflicts), I sincerely don't care. I want pretty pictures, my desktop to look nice, with icons on the panel, not with boring text. So the best option for me is to stay with one single layout and not use the applet at all.

I used to argue for the flags, as I believe we should grow up and get past those artificial issues, here is an example: using a Hungarian flag at a public event in Romania in 1990 was absolutely inflammatory, today we grew up as a community and people do not react seeing those flags displayed. But some happenings in the Fedora land made me see the issue from the other perspective and have a first hand understanding of why country-based communities are not such a good idea, so I have now something to put in balance.

I worked recently on a small graphic for the Fedora community of Moldova and I tried to find some way of collaboration with our Fedora Romanian community. I ended by not finding any solid bridge, as they have almost all the valuable content in Russian, but it was an invaluable opportunity for me to contemplate this strange animal: a tri-lingual website, with a short English introduction, a lot of Russian content and some Romanian content.

I wonder what is the purpose of such a website? People searching the web for Fedora content in Russian will land in a Russian website, people searching for Romanian content will land on a Romanian site. If they will open a forum, what's the point for an user to join that forum instead of going to a larger Russian or Romanian forum? This is, IMO, the best example for the futility of a country-based community.

But I still hate the keyboard applet and would prefer it to have flags

PS: And here is a pretty picture for the knowledgeable ones:

Beauty is in the eye of the beholder

In my opinion, the Parsix theme is ugly, a bad combination of light blue wallpaper, dark gray windows, light blue window title bars and glowing orange/brown icons. Should I wonder when it is acclaimed on the Art list by our favorite two trolls?

Import Illustrator (.ai) files with Inkscape

One of the features which can be found in the soon-to-be-released Inkscape 0.46 is the ability to import PDF files (based on libpoppler) and as a consequence, .ai (Adobe Illustrator) files (which are based on PDF). Note: this feature was developed as part of the Google Summer of Code 2007. So how good is that import? I found it to be quite good.

But first a bit of history: for those who remember, the Bluecurve icon set was revolutionary for its time: an icon set for a Linux desktop created with vector graphics. But in those early days, without a competent editor available, it had to be created with Adobe Illustrator, which was for a long time a problem for contributors, which were not able to play with those icons without selling their souls.

Fast forward a couple of years ago, when we had the tool, Inkscape, and were thinking about the future of the Fedora icons: stay with Bluecurve, create a next-generation Bluecurve, adopt an existing icon set or create a new one from scratch (we pursued partly option 3 and 4, but this is not the subject of this post).

We still had problems with anything Bluecurve-related: no way to open the .ai files on a Linux desktop and without written guidelines, hard to re-create them from scratch. So the so solution was to export them as SVG with Illustrator and then freely play with those SVGs on Inkscape.

Today the Bluecurve days are behind us (if you still find a Bluecurve icon here and there on a Fedora desktop it is a bug and have to be fixed) but using the Inkscape 0.46 pre-releases (on Rawhide, but also easy to find for F8) we can play at last with the initial .ai files (after 5.5 years... good lesson to learn about file formats).

Below are two screenshots: one is the Illustrator created .ai files opened with Inkscape 0.46 pre2 and the other a SVG exported from Illustrator and opened with the same Inkscape 0.46 pre2. They look the same to me, bug for bug, which I find pretty good.

Update: and here is how they are supposed to look (Illustrator created PNG) - not sure if the small differences are caused by Inkscape bugs or features not supported by SVG:

Pac-Man baddies with Inkscape: clipart, tutorial, screencast and challenge

My not so secret Pac-Man project is finished, the clipart images are available on my collection as well as on openclipart.org, the tutorial is on the tutorials page, a screencast too, so now is the time to talk about them.

Ladies and gentelmen, here are some Pac-Man bad buys and bad girls:

The idea started months ago, when I made a silly cartoon about Fedora Games and I quickly realized the potential: is easy and fun (at least I think so), anybody can create such graphics and a tutorial is obvious and quick enough to be covered also by a screencast.
It got stuck in my head for a long time, screaming to get out waiting for me to get in the right mood for that. And in the end I gave up.

I started by doing a screencast (as I said, is based on a concept I was already familiar with), sorry for the Flash abuse, it is made with Istanbul in Ogg Theora and I have the original, but until fedoratv gets usable, its temporary home will be on YouTube.


Then I made in Inkscape the base shape, taking at each step screenshots for a future tutorial.

When done the next step was to create various derivatives, changing either the texture or the shape, there are many of them I like, for example the ninja-pirate duo (who would win in a fight?):

or the textured stripes and camouflage:

The original plan was to create 9 distinct images but the ideas came over and over so I jumped first at 16 and ended with 25 images (and still have a lot of ideas, but enough is enough).

Then I uploaded the images: both in a pacman gallery of my clipart collection and to the Open Clip Art Library (check the arcade tag).

After that, crop the screenshots, combine them, put together in a HTML, add some English text and the Pac-Man baddies Inkscape tutorial is made. Translate everything into Romanian language (yup, I write in English first), put everything online, including the screencast and I am almost done.

The last step is this: blog about them and throw a challenge: look at the gallery and find one baddie representing you. If you can't find one, read the tutorial and draw one yourself. Enjoy it. Show it to the entire world. Maybe upload it to the Open Clip Art Library.

And with that, enough for me with clipart for a while...

How it's made: my map elements with Inkscape

I imagine such a preamble is not very inviting, but it is the preamble of the latest article from my tutorials website:

It's been a while since I wrote a tutorial (in fact quite a while, as "wrote" != "published") and that was for good reason: I was not able to come with a tutorial fitting the rest of my my tutorial site and did not want to break the tradition . So it was a hard decision to write this piece, which comes as a conclusion to my quest to create a RPG tileset of over 50 clipart images, a decision I made mostly because I already was asked about how I made the images and expect even more questions in the future.

It is not really a tutorial, more a "how it's made" for my map tileset (available also from the Open CLip Art Library), it describe the process I used in creating those images, a very short sketch of the workflow (described in more detail in the article) is like this:

[read more]

Of course, there is available as usual a Romanian translation.

And now I can really consider this topic closed.

Unbloat your Inkscape made SVGs

This should be common knowledge, but I see it often not used, so maybe a blog post will increase the awareness a bit.

Long story short: when trying to fit all the packages on a live CD every bit matters, so a number of strangely large file size for some SVG icons got noticed: a directory with 50 icons, 3.0 MB (in g-p-m, if that matters). Puff: run a "magic" script (an one liner), the size is decreased to 986.0 KB, the new version is commited upstream and everybody is happy!
It looks like a good idea for everyone using SVG icons to "unbloat" them, the space saved may be significant.

As any Inkscape user that's wort his salt should already know, the script is something like this:

for i in *.svg; do inkscape -f "$i" --vacuum-defs --export-plain-svg "$i"; done

Or, for one single file from the GUI, File > Vacuum Defs and save as Plain SVG.

Now some boring details: when working for a long time on a complex document Inkscape may vreate a lot of definitions and some of them may get ununsed, like you fill an object with a gradient and delete the object later. The gradient definition is kept, you may want to reuse it later, so a complex file may gather a lot of such unused definitions (even more if you import another files, each with its duplicate or unused definitions). Vacuuming them is a good idea, it may reduce the file size.

Another (small) file size reduction can be achieved by saving as "plain" SVG. By default, Inkscape will put inside the SVG some atributes useful (but not essential) for further editing (window geometry, guides, metadata and so on). Saving as "plain" SVG will remove them.

One of the worst offender was initially 281.1 KB, it decreased to 56.4 KB after vacuum defs and to 48.6 after saving as plain SVG.

Quest complete: RPG map tileset

I can consider complete my quest for a RPG map tileset, 50 images are done (outline and full color), uploaded to my clipart collection and to the Open Clip Art Library (look at the cartography tag).

Now is the time to sit back, relax, upload some samples in various places (like here), annoy people with that and maybe think at the next step, which should be something different. Or should I do more pieces for the set, considering I have a long list with additional ideas? This is a good think to think about while sitting back.

I don't know how transparent is from those clipart images how much I miss the time when I used to fight orcs and be happy about that. I guess it's quite obvious (is a long time, about an year and a half).

PS: the samples above are JPEGs, the PNG version was to big in file size, so I had to use lossy compression (with high quality), but load the JPEG, change the extension and will get either PNG and SVG.

Uploading to OCAL is killing me...

So the time has come: the set is done, it have to be uploaded to the Open Clip Art Library. Unfortunately by hand, one by one, the full color image, the outline and a PNG thumbnail.
Question again: what are the computers build for? By any chance to help us automate repetitive tasks? Anyone wonders why I hesitate re-uploading my images (some hundreds) from the old site? Look at the pretty screencast (2.8MB, Ogg Theora) and multiply the operation with 50 (the number of images I have to upload):

Php coders badly needed... anyone available?

Coloring the map

The other day I talked about the outlines for my RPG map tileset, naturally I went to the next step: adding pretty colors (as planned) and it progress quite fast, it is the easy part.

I tried to get a balanced result: at the same time shiny enough but also simple enough, I could have added a lot more details but this is my current trade-off (feel free to start from the outlines and do your own colorization).

One decision I made will surely come back and bite me in the ass: I used gradients. They make the look prettier but after importing a few images with gradients Inkscape gets confused very fast (it is a known bug).

But enough for now, I spammed enough with this topic, will talk again about it when the set will be complete and uploaded to the Open Clip Art Library (hopefully next week considering the current speed). Until then I will quietly update my gallery, one by one.