Abstract interfaces

Gimp 2.8 - an important milestone in the road to Gimp 3 - is out. But this post is not about the new single window UI, or about the fact that saving an image is easy for the first time. This post is about the path to get to version 2.8.

Gimp is powerful - not entirely Photoshop powerful - but more than sufficient to handle anything an amateur photography enthusiast might want to throw at it. But overshadowing it's power is a user interface that feels piecemeal and awkward. If I had to summarize it's problems - it would be this: the interface lacks abstraction.

When a programmer builds user interfaces, it is a bit like an engineer trying to sell a product. A programmer knows exactly how piece of functionality works - what the variables are, what the functions do. The user interface reflects that - a list of inputs for the variables, organized into groups of functions. This would be perfect, if the goal of a user was to run the various functions - but when the user comes in to perform a task, the interface begins to get in the way.

A great abstraction bridges the gap between the user task and tool functionality.

And Gimp is taking it's first steps in that direction. Starting with a brutal evaluation of the current state of the interface, the Gimp team is doing what any good built-by-consensus project would. Reach out to the community for ideas.

But there is many a step before Gimp begins to resemble a polished UI. While that in no way means copying the Photoshop interface, but it involves coming up with a way to interact with the user in such a way as to provide capability and not functions. Of taking all available ideas and distill them into a coherent experience. But again, just like consensus might not be the best way to build a program, it might not be the best way to polish an interface. Maybe it just takes singular vision.

Always Coca-Cola

I still remember the first time I had a coke in a can. It was in India, after Coca-Cola's second coming, post economic liberalization in the country. The can itself cost 20 rupees, an affordable luxury at that time. I remember the intense anticipation, the impatient seconds of study to figure out out to open it, and then the surprising let down in the taste department. Even as I loudly tried to convince me and those around me that it indeed tasted better if not the same.

Nevertheless, coke was and continues to be a part of the familiar; a cornerstones of my world. There is yet to be a place I have been to, that the familiar red and white had not already visited. So when I came across some "facts" about the company, I had to try to make an infographic out of it.

More importantly, I needed a reason to try out inkscape - an open source vector graphics tool. I needed a better way to make infographics, and for all its capabilities, gimp was quickly turning out not to be the tool for it.

Enjoy.

Cross-processing using GIMP

Downloaded FxCamera for our trip over to Chicago over the holiday weekend. The app has a mode called Toy camera, that produces a cross-processed look to the photographs in the phone itself. Unfortunately, the final images are resized, and applying an in-phone effect to a phone camera shot results in an irrecoverable loss of fidelity, leaving no room for anything else. According to the author, the effect is produced by manipulating the color curves of the image - something that GIMP does a rather good job of.

Cross-processing has its roots in film photography, where a film is deliberately developed in a chemical solution intended for a different film. Cross processing results in color casts, high contrast and a sort of blown highlights and color casts in blacks.

Cross-processing technique

To cross-process in GIMP, the idea is to open the picture; auto-correct the colors or get the picture to look well exposed; apply the curves; then potentially adjust contrast.

The focus of this post is the trickiest part step from the above - to apply custom curves for the cross-processed look. The screenshot below shows how the curves should look. Save these as a preset and use as a starting point. As you can see, the red highlights get toned down and shadows get stretched, the green highlights get stretched, and blue is clipped at the ends.

Redscale technique

Similar to the cross-processed technique is the redscale technique, that originated with film cameras using the film in reverse. This causes the photograph to have an overtly red cast, while suppressing greens and blues.

The curves similarly follow, by focusing on boosting the higlights and midtones of the reds, while actively damping greens and blues. The curves below are what work best when trying to apply the redscale technique in post processing.

The advantage of doing this outside the phone is of course the additional control, but in addition you can leave the poor phone camera to do what it can to get a decent photograph with its itsy bitsy sensor, without worrying about having to post process it as well.

Of course, after using either technique, a good followup is to do a quick contrast boost make sure the resulting photograph is not too flat, and do the usual crop, resize, unsharp mask prior to saving as a png. Boosting contrast is achieved by using the classic "S-curve" on the composite channel. The curve can be stronger or flatter depending on the original photograph and the final desired effect. Know that you will lose a bit of detail at the higher and lower ends of the histogram using either technique and you shouldn't necessarily try to get it back with contrast correction.

External links: lilahpops.com & epicedits.com

Using GIMP: Web 2.0 Buttons - II

In a prior post, I posted an easy way to make those three dimensional reflective buttons that are typical of the new Web 2.0 interface elements. GIMP, is a great tool to create those nice and shiny buttons. The other method was relatively quick, and this one is a tad more involved.

I am using GIMP 2.6.10 for the tutorial. For earlier versions, the main difference is the difficulty in selecting with rounded corners. Step by step tutorial with pictures after the break

Using GIMP: Web 2.0 Buttons - I

Web 2.0 has adopted its own distinctive style for interface elements, dominated by those three dimensional, reflective buttons. Using GIMP, it is easy to create those buttons. This is the first of two ways to do it - a relatively simple method. I will post a slightly more involved method later.

I am using GIMP 2.6.10 for the tutorial. For earlier versions, the main difference is the difficulty in selecting with rounded corners. Step by step tutorial with pictures after the break