Late Night PC

I'm going to try to keep this short but I wanted to make a note of a quick script I just did to desaturate and lighten a bunch of images in the Gimp. The workflow I used was basically to open a bunch of images then do exactly the same thing to each one of them then close and save each one. My first thought was that clicking Tools->Colour Tools->Hue Saturation... then doing an adjustment & hitting Okay was taking too long. I knew I'd been here before so I dug out the script I did before to do Hue Rotation in the Gimp. I remember that painful learning curve to figure out Scheme. Luckily this time I want to use roughly the same command but I want to leave the hue alone and change the other two parameters. So I modified the code and pasted this in to the Script-Fu console.

There's been a lot of talk of all the hacks & odd searches you can do on Google Code Search. Interesting, amusing and maybe a little scary. All of it clever. Clever is the first pass at a new tool, let's get on to the boring stuff! (Why does that interest me so much?) I've wanted more times than I can count to tell Google that I mean to search for source. It's not as if you can add the name of the language - "C" or "C++" - to a normal search query and get anything meaningful. The obvious and canonical use of a tool like this is to find an example of code that does what you're trying to do. The simplest thing would be examples of a particular function or class in use. Maybe you want to see a JTable instantiated and used. Maybe you need to know more about using the PCMCIA bus in Windows drivers. Okay, that search doesn't work so well for closed source...

I set out today to write about converting a simplistic XML document into a simple CSS stylesheet. The specific example I chose to work with creates code for CSS-rollover buttons. The first part I deal with is how to create such a rollover manually. The second part is about generating CSS like this using XSLT and a homemade XML language.

Making the Graphics with the Gimp

I started with the Gimp. First I used the Simple Beveled Button Script to produce a button. After that I made another, but set the upper right colour to be a little brighter. Next I made the same button again, but this time I checked off the "pressed" checkbox. So now I've got three images in the Gimp that represent the three states of the button I want to put on a web page. The first is the default state, the second is used when the mouse is over the button and the third is used when the button is clicked. There's a popular method of making the button change between these states very smoothly using just CSS. Basically you pack all three images into a single image file. This single packed file is just an ordinary image (gif, jpeg or png) that has all three states of the button one next to the other. The picture is set as the background image for some otherwise transparent box. Then the background-offset CSS property is used to adjust the position of the background so that the different parts of the image are visible when the button is in each of the three states I mentioned. Oh, and the three states are distinguished with the help of the CSS pseudo-classes hover and active.

• Rob's blog
• 5 comments
• Read more
• Buy Rob a coffee

Adrian Woods is giving a talk entitled The Make Art Button: Batches, Actions, and Scripts. I think he sums it up in the session description just perfectly:

Do something once, it's creative. Do something twice, it's repetitive. Do something three times, you can probably automate it.

I've said the same thing many times, but maybe I start to automate at twice. This session will use comand-line tools, Photoshop automation, and MaxScript for 3DS Max. For myself, I've used plenty of command-line tools, a tiny bit of MaxScript and no Photoshop automation. I do find that a lot of Photoshop tools have counterparts in the Gimp however. Given the work he's been involved in on Microsoft Flight Simulator, I'm looking forward to hearing what kinds of work he recommends automating and how much effort it's worth. The question that I have about automation for art is about balance. Specifically how to balance the work needed to produce new tools for automating a very specific task against the work needed to complete these tasks manually. The way I approach this issue is by considering a few factors that are all around time savings, reuse, and repeatability.

I just learned something new about the Gimp. I guess this should have been obvious. If you've ever editted a picture in the Gimp that has no transparency, like a JPEG for example, then you know that when you erase, it always erases to the background colour. This makes sense in general, but I've in the past I've had to go to a lot of work to get transparency while I'm working. I'd do it by saving as an XCF (the Gimp's native file format) then adding a layer with a transparent background and cutting and pasting the whole picture into the new layer. Don't do that.

In which we talk a little about scripting in the Gimp, a little about colours and as only as much as is necessary about Scheme.

If you've ever looked at a picture and decided that it would look great with a different palette then you'll see where I'm coming from with this. Think about graphics resources you use in a game. Like a red brick wall. Now suppose you'd rather it was a yellow brick wall. Suppose furthur that you're not really a great artist, but you've got a whole bunch of great graphics resources for free (as in speech, if you mean to republish it).

You can easily move from one part of the colour spectrum to another with a hue rotation. The term comes from the measurement of colour hue in the Hue-Saturation-Value (or HSV) colour model. The hue measurement can be thought of as how far across the rainbow you're going. The colours of the rainbow are arranged in a circle, so the measurement is done in degrees. All a hue rotation does then is to change each replace each colour with the colour that's a given number of degrees away on that circle.

It's not hard to find the hue-stauration tool in the Gimp. It's on the Colour Tools Submenu of the Tools Menu. You can use the tool to do a hue rotation and adjust some other parameters for the selected part of the image. That part is pretty easy. If it was just one red brick wall texture then that's how I'd do it. Suppose that you have to do this operation a lot however. Suppose you have a bunch of red brick walls, maybe ten or twenty variations of the same wall - to keep the game interesting. Now that's not a huge amount of work to do once, but it can be enough to slow a developer down or tempt them to skip it and just use the pictures as they are. That's the point when I decide I need to do a little automation. For a little project like this I want to reduce the chance of making a mistake on one or two graphics and also I want to speed it up from 30 seconds each to 10 seconds each.