TUAW Tutorial: Custom Stack Drawer icons

Many folks commented on our recent post about adding those gorgeous drawer icons to your Stacks. As great as the originals are, however, a lot of you also wanted to know how to customize them. Fortunately, the original author was kind enough to make the blank drawer PNG available, so in this little tutorial I'll show you how to make your own customized drawer icons using nothing more than Preview. Obviously you can get much sophisticated results using a more serious image editing application, but Preview can do enough to get you the results you see above and since everyone has it, I thought it best to focus on using it despite its limitations.

Step 1 Grab the 512x512 blank drawer image from the original author and save it somewhere (or right-click and save it from here). That will get you this (this version is resized down so don't use it, use the original):

Step 2 Get another image that you want to overlay onto the drawer. I'm naturally enough going to use the TUAW logo. Now I want my custom drawer to look something like the originals, so that means we're going to need to extract the image from its background. Fortunately, one of the great new features of Preview is "Instant Alpha." I selected the white background with the Instant Alpha tool (from the drop-down menu of the selection tool), being sure to get all the interiors as well. Then when I hit return and the background disappears like magic!

Step 3 (optional): Since I'm trying to remain consistent with the original drawers I decided to make the TUAW logo black, rather than leaving it blue and green. One of the easiest ways to do this is open up the Adjust Color panel and push the White and Black levels all the way over to the right and the saturation all the way over to the left. Of course you can also play with these to get whatever effect you want. Naturally, if you were doing this in a more sophisticated image editor you could add gradients, etc. Once you're finished, copy the image to the clipboard.

Step 4 Using Preview open the blank drawer PNG you got in step one. Paste the image from step 3 onto it, move it around until you get it where you want it, and and then save it.

Step 5 Still in Preview, copy the image to the clipboard. In the FInder, select the folder you want to change the icon of and Get Info (⌘-I). Select the folder icon at the top left of the Get Info pane and paste in your custom graphic. Voilà, you're done!

Step 6 (optional): You can also convert your custom icon into a standard ICNS file using the Icon Composer from the Developer Tools. If you haven't already you'll need to install those from the optional installs folder of your Leopard disc. Once you do so Icon Composer can be found at /Developer/Applications/Utilities. The Icon Composer lets you drop in a 512 x 512 image and automatically convert it to an IconsFileStore file. You can then export it to an ICNS file.

View Tags

Categories

Features How-tos Mods

Many folks commented on our recent post about adding those gorgeous drawer icons to your Stacks. As great as the originals are,...

Add a Comment

Sign in »

30 Comments

Filter by:

Jason The Saj

Thanks for the tutorial on creating custom versions of the "drawers". (I wound up hacking thru this a few weeks ago.)

Anyways, I blogged on these "drawers" as well as some other improvements. (ie: a little 'Show Desktop App' that works like Windows XP's 'show desktop icon')

Other improvements I found are some scripts to create a "recently used application" stack and a "recently used documents" stack.

Enjoy!
http://thesaj.wordpress.com/2007/12/05/os-x-leopard-improving-the-dock/

- The Saj

I've added a link to your tutorial in my blog post on these things. Now, if Apple will just implement these are standard into Leopard and fix "Spaces". My transition to the dark side will be complete. (Well, and as soon as I have the cash to replace my Dell laptop with a MacBookPro.)

December 20 2007 at 9:35 AM Report abuse Permalink rate up rate down Reply

DarkOPus

I'm having the same problem as many. I've followed the instructions verbatim, however, when I add something to the downloads folder it still uses the icon in the folder ahead of the stack icon I've just created.

Can someone help with this as there are three or four other people with the same issue on this thread alone.

Cheers.

December 17 2007 at 12:25 PM Report abuse Permalink rate up rate down Reply

asdf

OMG i love this :D

December 08 2007 at 12:36 AM Report abuse Permalink rate up rate down Reply

tomt

One note: The first time I downloaded, the folders were the usual generic blue, not the swell brushed-aluminum ones.

I had originally downloaded the folder archives (via Firefox) and had Stuffit automatically de-archive and save to disk. Saving to disk only and using the OS X (Leopard) Archive Utility (control-click->Open with->Archive Utility) did the trick.

Here's a web page about the util: http://www.macworld.com/weblogs/macosxhints/2007/11/prefarchives/index.php

November 21 2007 at 9:26 AM Report abuse Permalink rate up rate down Reply

blackwing

Stack drawer in Matrix Rebooted style

http://www.flickr.com/photos/7376342@N06/sets/72157603255256455/

November 21 2007 at 1:17 AM Report abuse Permalink rate up rate down Reply

Jasen

Doesn't work for me.

I DLed the premade icon folders from the site listed above, put them in the appropriate places, and the Dock icon is the generic folder!? Opening the folder in the Finder shows the custom icon, and doing a Command-I on the folder displays the custom icon, but in the dock, it is a generic folder.

Any clues as to why this would happen?

November 20 2007 at 8:54 AM Report abuse Permalink rate up rate down Reply

kemck

I have the same problem. I followed the directions and when I put the folder in the Stacks section I still get the basic folder icon...any help or suggestions from anyone?

November 19 2007 at 1:22 PM Report abuse Permalink rate up rate down Reply

TanZing

@BTGunner,

Thanks for the script. I find it works just about perfectly except in one situation.

When you download a disk image in Safari, while the icon in the Downloads folder is the file downloading icon the script works but when the download is complete and the image mounts and the icon changes to the disk image icon, I find the script then executes only as far as moving the drawer icon to the desktop but not back into the downloads folder. This last step has to be done manually. At this point I usually find that Folder Actions has also been disabled.

This is probably a bug in Leopard as I'm finding that there are a lot complaints in the blogosphere about Folder Actions not working in Leopard.

November 19 2007 at 9:23 AM Report abuse Permalink rate up rate down Reply

dani

It doesn't seem to be working for me per this TUAW tutorial. I paste the graphic into the folder's info box and it changes fine. But when I place the folder on the dock, the drawer doesn't show.

November 18 2007 at 2:01 PM Report abuse Permalink rate up rate down Reply

From a 1 week Mac user - I really like the look of this and have implemented it using checuervo's comments in line 6. It works fine except for the arrow indicating an alias.

I was concerned with changing the graphic of the original documents and downloads folders without being able to change them back later. Can someone let me know if it is possible to change the folder graphic back to the original later if I want?

TUAW - thanks for posting a simple solution!

November 18 2007 at 10:03 AM Report abuse Permalink rate up rate down Reply