Playing with graphics – 2013-08-12 02:40 (last update: 2015-01-26 19:43)

An ag(e)ing hacker — Luca Saiu's blog

Playing with graphics

I’m not good at graphics. Or rather, don’t think I have particularly good taste. Now that I’m thinking of it, in the remote past as part of my first big job I was actually paid to do photo touch-ups. It was my driving school job.

Old graphic hacks

The screenshot below belongs to that project; what we would call now an e-learning system, to be used locally on the driving school computers.

a simple touch up I did

The driving school owner went around taking photos of the roads in the neighborhood, so that his customers could recognize familiar places, which he thought made the thing less impersonal and more engaging. The trouble was that sometimes the situation was the one he wanted to show — uneven road, in this case — but the appropriate traffic sign wasn’t always there. So there I came, to “Gimp it in”. In this case the 50 kilometers per hour speed limit was added by me.

A., the driving school guy, was a perfectionist and quite forward-looking, in that transition era right before the Internet finally became mainstream. I was young. We’re speaking of 2001-2002, with maintenance extending for a few more years; mostly fixing or replacing individual computers, as their ageing hardware gradually failed.

Of course the touch-ups weren’t the important part of what I did; I wrote the full program including support for interactive lessons, tests with evaluation and statistics, and a simple administration interface. A very stripped-down GNU/Linux, custom graphic interface with SVGAlib; photos, text and audio commentary patiently prepared by A.; and even video (MPEG1), served over a local network of about ten computers; since the network was slow (10Mbs/s, thin coaxial), soon I added local caching for the most-recently accessed files. The computers were already old at the time: they were mostly Pentium-MMX clones with 8MB RAM (yes eight megabytes total; web programming crybabies, I’m speaking to you). C++. It worked like a charm for many years, long after I had moved away.

Gimping for the GHM

I didn’t really mean to talk about the driving school program tonight, even if it’s a pleasant memory for me. I wanted to talk about my graphic work for the forthcoming GNU Hackers Meeting (http://www.gnu.org/ghm/2013/paris). If you go to the link above, the first thing you’ll notice will be the cool animated intro contributed by Sylvain. And chatting with Sylvain on IRC, some time in July, I came up with this design for a GHM web banner:

 |        GNU Hackers Meeting 2013         |
 A      22-25 August -- Paris, France      A
/^\   http://www.gnu.org/ghm/2013/paris   /^\

To be rendered in a fixed-width font, terminal green over black, and a blinking cursor as the only concession to animation, hopefully not too distracting. I sent it to the GHM mailing list.

Ludovic approved. But the Eiffel tower profile wasn’t recognizable to everybody, so I thought of replacing one of the ASCII-art pictures with a silhouette taken from a photo. I found a suitable image whose copyright had expired (http://en.m.wikipedia.org/wiki/File:Construction_tour_eiffel8.JPG) and the next day, on the train back home from work, I made this:

Lame banner with VGA font

And this:

Lame banner with Monospace font

Neither font is really appropriate. The VGA font is recognizable by old-timers, but I don’t think it was ever used on green-phosphor dumb terminals. And I’ve seen IBM machines with black-white screens, but never monochrome. The Monospace font looks nicer, particularly in how the two “legs” of the ASCII-art tower align with the central “A”, but it’s high-resolution and clearly too modern.

Injecting some good taste

One or two people said they liked my banners. Then, the same evening, Sylvain took the picture at http://commons.wikimedia.org/wiki/File:Paris_-_Eiffelturm8.jpg and came up with this:

Sylvain’s banner

This was obviously superior, and in the beginning I hadn’t even noticed the nice touch of having the ASCII-art tower fade into the tower silhouette in the photo. After dinner Sylvain and I met on IRC, made some minor changes to his image and double-checked the legal notices to make the thing publishable. Initially I wasn’t convinced about the fading effect, now made more evident by the green color, so I also made another version without any transparent trace of the right ASCII-art tower. But eventually I came to prefer the fade-out picture as well.

The result is this banner, visibly displayed on the top of most pages of the GNU web site, as of Summer 2013:

GHM 2013 banner

GHM t-shirts

I wasn’t at the very first GHM in Spain. However José Marchesi told me it was fun; they even had custom t-shirts made — I believe it was the yo soy GNUdista design. When José proposed me to have t-shirts for the 2013 event as well, I liked the idea; we already had a good design, and in full color. So I started looking around for some place around Paris where they did this custom t-shirt thing.

I found several places, and contacted one of them which seemed to have competitive prices; for the quantity we needed, they came to cost about 10€ each, taxes included.

I was curious about how the printing process worked and e-mailed them some questions. They responded quickly and seemed professional enough, so I decided to go with them. The idea was to essentially print the horizontal banner on a black t-shirt. The printing shop guy wrote me that the appropriate technique for printing in full color on a dark background is flex imprimé en quadrichromie; which means color printing on top of a clear layer, which they later machine-cut and heat-press to the tissue — that’s not heat-transfer, as far as I understand.

Now I needed to send them a high-resolution version of our design. I had to start from scratch. Actually a vectorial image might have been better for this task, but I’ve never really used Inkscape, so I just made a very large raster image with the Gimp.

I think I did a good job following the same techniques used by Sylvain, the most important idea being Gimp’s layer masks (http://docs.gimp.org/en/gimp-dialogs-structure.html#gimp-layer-mask) — a mask associated to a layer, representing the transparency ratio of each pixel. In the GHM banner design we need linear gradients as transparency masks. The only problem was that we couldn’t use the same Eiffel tower photo. The color photo in the web banner (final-banner/Paris_-_Eiffelturm8.jpg) comes from Wikimedia Commons, and has a free license; however it requires attribution. That’s no big deal for web pages, but it’s an inconvenient requirement to satisfy when printing a t-shirt; so I had to find a replacement image. I found this: http://www.morguefile.com/archive/display/708822. It can be reused without attribution for any purpose if modified, but not if unchanged — go figure. However I was modifying it by adding transparency and text overlays so it suited my needs, despite being unfortunately a little narrower than the first photo.

The high-resolution version is wider than 3000 pixels. Here’s a scaled-down version:

t-shirt/t-shirt-small

The background is transparent, as they don’t have to print black on black: the black background will simply be the t-shirt tissue. See? Hmm. Looking again at the right-hand side, I got worried. How can they print in color over a presumably opaque layer (the flex thing), and obtain a transparency gradient effect? I decided to play it safe and made a second version with a bottom layer in the Gimp source; a simple black solid rectangle under the tower photo:

t-shirt/t-shirt-black-rectangle-small

So I exported both Gimp files to a format the printing shop could use, and sent the two of them, explaining my concerns. Apparently I was correct, as they used the black-rectangle version in the mock-up they sent me for the final confirmation.

That was on July 30th. I confirmed that I was satisfied, and that they could start. Then, in the early afternoon of Friday August 9th, when I was at work, I got an e-mail from them saying that my order was ready, and I could come get it. However, the message told me, the shop would be closed from Monday 12 to Wednesday 21. Ok, I answered, I can come on Saturday. No, they’re only open from Monday to Friday. That will force me to wait until the morning of August 22, right before the pre-meeting, to see the shirts for the first time. They could just have told me before, and I would have easily found a solution; but they didn’t.

I complained, in a reasonably polite way:

From: Luca Saiu
To: xxxx
Date: Fri, 09 Aug 2013 14:46:35 +0200 (2 days, 11 hours, 4 minutes ago)
Subject: Re: CDE OK

Vous m'avez contacté très tard !  En l'ayant su plus tôt, j'aurais pris
un après-midi de congés au travail.  Maintenant je serai obligé de venir
le 22 août matin, le jour du commencement de l'événement.

Donc je vais venir à [Xxxx] jeudi 22 matin.  J'espère qu'il n'y aura
pas de problèmes.

But the guy didn’t even bother acknowledging the problem:

From: xxxx
To: Luca Saiu
Date: Fri, 9 Aug 2013 12:54:43 +0000 (2 days, 10 hours, 59 minutes ago)
Subject: Re: CDE OK

Bonjour ,
Merci bien reçu.
Je me tiens à votre disposition pour le suivi de votre dossier.
Cordialement,
Xxxx

I found this very irritating, and that’s the reason why this shop isn’t getting any positive publicity from me. I was planning to post a photo of the t-shirts to make people more curious, but now I don’t have anything to show.

Oh, well. Whatever. What did I want to say?

Playing with graphics is fun. Really. It is.

Post-meeting update

So, on the morning of August 22, the pre-meeting day, I finally went to the shop to get the GHM t-shits; José, who had arrived in Paris the previous day, came along.

In the end the t-shirt place did a pretty good job:

ghm-t-shirt

Files

Here are all the files, including legal notices:

— Luca Saiu, 2013-08-12 02:40 (last update: 2015-01-26 19:43)

Tags:
english, gimp, gnu, graphics, hacking

Next post Previous post

Go to the main index...
Atom feed All post feeds: Atom 1.0, RSS 2.0.

[my photo]
Luca Saiu

The opinions I express here are my own and do not necessarily reflect the beliefs or policies of my employer, or for that matter of anyone else. In case you felt that the public statement of my thoughts threatened your warm sense of security and your emotional stability, please feel free to leave at any time.

The system does not support user comments and probably never will. Anyway you can contact me by e-mail if you want to discuss some topic with me. I might update my posts if you provide interesting insights.


Copyright © 2009, 2011, 2012, 2013, 2014 Luca Saiu
Verbatim copying and redistribution of this entire page are permitted in any medium without royalties, provided this notice is preserved.
This page was generated by trivialblog. trivialblog is free software, available under the GNU GPL.
Tag icon copyright information is available in this file.