Some people prefer to have the tool icons unobtrusive, not to steal the focus form the actual artwork. Here’s a quick theme to do just that for GIMP 2.3. Untar to ~/.gimp-2.3/themes/ and select the Greyscale theme from the preferences. The gtkrc uses menu-sized icons for the toolbar and tiny fonts.

Click to download the theme.

You need to tweak the gtkrc to your liking if that’s not your choice. There is a dark widget gtkrc included, but is commented out as it looks weird for metacity to pick up light colors from the global theme, but have the window content dark. You can of course use that one globally. Just add your favorite engine to it.

Thanks to the teamwork of Andreas Nilsson, William Szilvester, Lapo Calamandrei and myself, we have a new default icon theme in the upcoming version of GNU Image Manipulation Program. It follows the Tango style guidelines (surprise, surprise) so as a bonus it should also look more native on Windows XP (screenshots courtesy of Jernej Simoncic) and Mac OS X. I’ll be happy if somebody uses the comments area to post a screenshot of how GIMP looks under Mac OS X.

I should also mention that we’re open to contributions to the Art Libre set, which aims to unify the metaphors and perhaps create a single icon library for free software graphics packages such as GIMP, Inkscape, Blender, Diva etc.

• GNOME Screenshot
• GNOME screenshot (dark theme)
• Windows XP screenshot

I’ve demoed my typical Tango workflow at the Boston Summit and recently the Installfest in Prague (Video recordings will be hopefully available soonish). I’ve been using GIMP to create the small resolution versions simply because of being used to it. Tuomas
and Andreas have been prefering to create everything in Inkscape. And I have to admit for certain type of icons it’s even faster.

As I’ve blogged about the all-saving SVG solution before, the above image kinda illustrates nicely the different needs for detail and perspective at each size.

Not long ago I have shown you how not to do a usable wallpaper. Well maybe it also makes sense to give a few tips on how to create a wallpaper that is usable and doesn’t get in your daily desktop usage.

The desktop is a highly exposed, fairly large area. Just like a work desk, people tend to personalize it. Apart from stuffing incredible amount of useless junk on the desk to be “within hand reach”, people put family or personal photo frames on their desk. Similar thing happens on the desktop. In GNOME, files from the web are downloaded there by default, most used application launchers are placed on the desktop and people tend to customize the wallpaper image as the first thing they do on a desktop.

Photos

In majority of cases, users will place a child or a partner photo on the background. As for computer geeks, nekkid chick does the job. If everybody changes the default to a photo, does that mean a desktop should ship with a photo by default? Hardly. The reason why people change their wallpaper is to make them comfortable; to feel “at home”. Using a photograph has major usability implications though.

• A typical photograph has enough contrast to make the items on your desktop lose the visual dominance. Finding an item such as the recently downloaded file or an application launcher becomes harder.
• Putting a photo of your loved one will seriously lower your effectivness as you will not want to cover his/her face with an application window! (Just kidding in this case .

So for a default wallpaper do we want to rule out photography as a whole? Not necessarily. Especially in the field of macro or abstract photography, you can find a plentitude of great wallpaper material. My fellow artist at Novell, Garrett LeSage, has a tremendous library of photographs, many of which are perfectly suited to be a usable desktop wallpaper. The attributes to look for are lower depth of field and homogenous, out-of-focus spaces.

Photography © Garrett LeSage

A photo is also a great asset to be edited furter to become a great wallpaper. Using various blur and overlay techniques, a photo that isn’t very usable as a wallpaper on its own can become a base for a highly usable wallpaper.

Generated Images

From the usability point of view, a solid flat color background is perfect. It is also pretty dull. Decent desktop environments allow to create a gradient instead of a flat color area. This works for some, but still bores most people I’ve had a chance to observe.

Handy Techniques

So what can can we create to spice up the desktop without hindering usability? Here’s a couple of techniques you may find useful in the process of creating a usable wallpaper. But first, let’s keep in mind what makes a wallpaper usable in the first place:

• Homogenous Spaces. – try avoiding covering large areas with high contrast artwork.
• Obstructed Areas. – when deploying elements such as logos or embeded photos, make sure you take obstructed areas into consideration. This depends on the desktop environment, but usually the top and bottom areas are occupied by a panel. All sides are very likely to be used for placing launchers and other items. The rule of thumb is that if at all, use
  the center of the screen for a logo.
• Testing. – Never forget to test your wallpaper. It may look just fab when you press F11 to view it
  fullscreen in GIMP, but keep in mind you will have the desktop items and the panels and everything overlaid. So you want to apply the newly created image and check out your desktop.

  Since the process usually takes a number of iterations, it may be more practical to create an overlay of your desktop items
  as a layer in GIMP to toggle when previewing fullscreen. To do this, apply some unlikely color to have on your desktop, such as pink as your background. Incidently this can be done by draging a color from the gimp palette or other color widget onto the desktop Take a screenshot of your desktop and use color to alpha filter to get rid of the pink areas. Now you can use this image as a layer overlay on your actuall wallpaper.

Solid Noise

Solid noise is in my opinion the mother of all abstract wallpapers. Without much work you can achieve a nice wavy texture to defeat the empty canvas syndrome and let the experimentation begin. Here’s a sample session to inspire your own experimenation:

Selective Gaussian Blur

While not too much of a problem on a photograph, having CCD noise on a desktop wallpaper is extremely annoying. This magical GIMP filter is a great help to get rid of the noise. Read my earlier entry for more pointers on how to use it.

Watermarking

One feature of the gnome desktop with regard to wallpapers that isn’t widely used is the possibility to use semi-opaque RGBA “watermarks” on top of the flat color or gradient. This allows the user to keep the texture from the wallpaper bitmap while customizing the color or preference. Also useful for creating a watermark logo tile.

Everybody’s raving about scalable icons. I know, I know, I was one of the first to put together an SVG icon theme when the Eazel guys added the functionality to Nautilus.

Scalable icons are great because they can save the artist a lot of work. In theory you should only have to do the icon once and let the application ask for the resolution it needs for the renderer to provide the pixmap. Also it’s easier to re-use parts of artwork (I’m finding a lot of Gorilla elements in other themes). In some cases it’s even faster than rendering a PNG. It’s great for simple style like Gorilla or. Once you add complexity, overlaid semi-opaque objects, objects with effects, the rendering speed drops.

But it’s not only the speed advantage that’s going away. As an example, look at the vectorized icons we have in Industrial. If rendered in the resolution for which it was designed, it looks just as sexy as the bitmap original, but if you scale it up, the strokes scale up as well and the icon loses it’s appeal. The icon style shifts. What’s worse, if you scale it down, it starts to look unreadable.

When you design a bitmap 16x16px icon, you have to simplify the artwork a lot. Not only by limiting the number of detail, but also by sticking to the grid more. The objects’ sides are orthogonal and if you do diagonals, they are usually 45°. Such strong perspective distortion, however only works for these tiny icons. There’s no need to do this at higher resolution and the icon would look odd in a higher resolution such as 48x48px.

Even if rendering an SVG icon at 16x16px will look crisper than scaling down a 48×48 bitmap down to 16×16, it’s never going to look as good as creating a special small icon. Even if some artists use the scaled down hi-res version as a starting point, they “tweak” it to make it fit the raster and make it readable.

It looks like Apple realised this for their latest applications. When OSX 10.0 came out, they had the small icons scaled down from a large resolution bitmap at application runtime. The high resolution is becoming a necessity with all these high resolution screens.

But in addition, in their following release, you see them creating special versions for the smaller resolutions (Althought it appears they mostly cheat with applying an unsharp mask). With Keynote and Pages toolbar icons you can see these being pixel-grid optimised.

© Apple Computer.

So if you’re doing simple, comic-like style, which can be observed on Gorilla or Gartoon icon themes, you may truly save some work. The artwork is simple enough to survive being rendered at 16×16 or 24×24. The fact the outline is scaled along with artwork isn’t a defect, but a feature.

For a more realistically looking art you are left with no choice but creating special versions for most commonly used sizes. Yes, you could do the simplified orthogonal icon in vectors, doing pixel-precise work at the target output resolution, but what’s the point? If you scale it up, it may not be as blocky as scaled up bitmap icons (or fuzzy in most cases, when using interpolation), but it will look odd because of the perspective and wide stroke.

Bitmaps are not going to die. For toolbar and menu icons (16×16 px and 24×24 px), they are faster to produce and simply look better. There are more reasons why SVG icons are great, such as the posibility to make them accessible or easily recolor them on the fly. Having bitmap icons in the toolbars and menus isn’t just a relic of the past though. It’s a design decision. You can’t beat bitmaps at 16×16.

If you’re not familiar with SVG icons, Christian has written a nice overview of SVG support in GNOME in an OS News article while back.