The Pug Automatic

Making Leopard toolbar buttons

Written October 31, 2007. Tagged OS X, Design.

I recently blogged about toolbar buttons for Leopard's Finder (for opening in TextMate and some other useful scripts).

Today, I spent some more time fiddling with the buttons. I added the brighter line below the buttons and made the corners transparent, so the buttons look better when depressed and inactivated (as they will be in Time Machine). They don't match the "real" toolbar icons fully: e.g. the brighter line, not just the icon proper, will darken when depressed and inactivated, but I don't think you can get around that. The built-in toolbar icons are likely something else than .icns files.

I updated the previous posts with the slightly improved icons. I also figured I would share the template I made, in case someone wants to make their own.

Photoshop file: leopard-toolbar-button.psd.

Note that the text layer has an outer glow layer effect, to approximate the etched look. (I'm sure someone can improve upon this. Please do share.)

Edit that file, then Save For Web as PNG-24 with transparency.

Open /Developer/Applications/Utilities/Icon Composer.app. Icon Composer comes with the Developer Tools on your Leopard disk. Install if you didn't already. The entire set of Developer Tools amounts to several gigabytes, but hopefully you can pick-and-choose if you don't want the rest.

[Screenshot]

Drag your icon to the "32" (32 * 32 pixels) field. Select "Use for this size only" when prompted.

Now, just save and you'll have an icon.

See my earlier post for how to get the icon in your script's belly.