Posted By Quentin Carnicelli on September 25th, 2005

The initial reaction to the new window style in iTunes 5 seems to be mixed. However, just about everyone universally condemns it for introducing yet another style into an already inconsistent user interface. Personally, I think the sooner brushed metal is gone, the better. And so to further that cause, I present the secret to making your very own Polished Metal windows.

Step 1 – Pre-conditions

We start off with a standard Brushed Metal window. Using any other base window style for what we are going to do won’t work.

Step 2 – Margins and Layout

Next, we divide the content of the window into 3 basic areas: Header, Body, and Footer.

Our header is comprised of the window title bar, and any number of pixels below it.

The body is everything below that and above the footer, and can not reveal any of the window background (you’ll see why in step 3). Some single pixel black border lines are also recommended.

Finally the footer is any size of space below the body.

Step 3 – Header gradient

Now then, we are ready to install our first bit of polished metal, the gradient that will be displayed in the header.

First thing we do is compute the height of the header. In our example window, our header area is 38 pixels tall, plus the height of the title bar. The title bar of a Brushed Metal window is 22 pixels, so the total height we need is 60 pixels.

So we fire up Photoshop, and make the approriate gradient by just using the Gradient tool, and sucking color values out of iTunes with the Apple Color Picker:

Now for the real magic. To get our window to display our header gradient, we set the window’s background color. Makes sense, right? Not to me either, but that’s how it works. First we create an NSColor based off our gradient image, and then setBackgroundColor: on the window itself:

That will give us this:

So now our header is looking good, but you’ll note that the footer doesn’t look quite right. What’s happening is, NSWindow tiles it’s background image. So our 60 pixel high header gradient repeats itself over and over again. This is precisely why the body section can not show any of the window background. So next, we fix the footer.

Step 4 – Footer gradient

To fix the footer, we’ll just draw a proper gradient over the background. So we go back to Photoshop and create a second footer gradient image of the proper height (amazingly enough in our example here, that height is 60 pixels). Then in Interface Builder we just drop in an NSImageView into the footer area, and set it to display the footer gradient:

Step 5 – Post-conditions

And that gives us the final results:

Which for thirty minutes of work isn’t half bad. It’s not a pixel-by-pixel clone, but it’s passable. The big differences between it and iTunes 5, are the window corners and the resize thumb. The upper corners are too round, and the lower corners aren’t round enough. The only way to fix that would be to reimplement the entire window from scratch with the base window being a borderless window (which is what iTunes does).

But now you know the secret: -[NSWindow setBackgroundColor:] & +[NSColor colorWithPatternImage:]. Now try not to do quite so much evil with it as Gus.

Update 1:
Mark Johns notes that if you add a little transparency to the footer image, you can round the bottom corners back out.

Update 2:
Matt Gemmell shows how to do it and avoid having the background image tile.