Filed under: Features, How-tos, Mods
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.
Get a WordPress.com Blog
![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)
Reader Comments (Page 1 of 2)
Fray said 4:27PM on 11-16-2007
What's the benefit of making it into an ICNS file?
Reply
Eric Ranschau said 4:49PM on 11-16-2007
Honestly, I'm wondering why Apple didn't do something like this right off the bat. The icons are absolutely gorgeous. The only issue I had with this technique is that the icon itself shows in the list of the stack contents when it's expanded. Can anyone think of a way around this?
Reply
jake said 5:35PM on 11-16-2007
1) Wow. After two years of reading TUAW, I finally noticed and came to understand the logo. There's a "T", a "U",an "A", and a "W" in there. Interesting.
2) I can't get copying a graphic and pasting into Get Info to work fully for me in Leopard. Sure, it works enough to look nice in the stack, but this procedure doesn't seem to apply the 512x512 size graphic to the item. View the item in Cover Flow, and drag Cover Flow to be really large. You'll just see a big black box.
One then asks: after creating a real *.icns file using Icon Composer in the Developer Tools -- clearly with all 5 sizes --, how do you apply *this* to an item without copying/pasting into Get Info?
Reply
ohm said 5:07PM on 11-16-2007
@2 Start reading the original thread to find solutions to the icon in folder problem. As a matter of fact I also describe a method to keep an empty drawer on the dock when the stack is fanned (or gridded) out.
Reply
Pat said 5:29PM on 11-16-2007
And all done in preview, impressive.
Reply
checuervo said 5:43PM on 11-16-2007
Optional tip that I enjoy: what I like to do is in the stack of choice (say Downloads) make an alias of the folder and put it in the stack. So make an alias of Downloads that lives in Downloads. Then set it to have the drawer icon, and make it always appear at the top.
Why? The "Go to this folder" option is moved from the end of the list (for fan view at least) right to the beginning! Which can be quite handy. The bad news is you get the little alias arrow over your drawer. But it's a fair trade in my book.
Reply
Tyrannous said 7:10PM on 11-16-2007
i am into improving my system, but i think this may a little tedious , im confident apple will either tweak/improve the dock or refeature it in a later patch.
Reply
indiekiduk said 7:27PM on 11-16-2007
How do you get the icon to work on the download stack if you want it sorted by date added?
Reply
Pat said 9:16PM on 11-16-2007
@ indiekiduk
You will find your answer here towards the bottom of the page.
http://t.ecksdee.org/post/19001860
Reply
indiekiduk said 9:31PM on 11-16-2007
@ Pat
That page is only for date modified, not date added.
Reply
jcos said 10:35PM on 11-16-2007
Everything was great through step 5. I got it to show in finder as my icon, but when I drag the folder into Stacks, the drawer disappears.
Does anyone know how to fix this? Thanks.
Reply
Luigi193 said 12:28AM on 11-17-2007
5. 1) Wow. After two years of reading TUAW, I finally noticed and came to understand the logo. There's a "T", a "U",an "A", and a "W" in there. Interesting.
Oh.My.God.
HOLY CRAP!!!! I see that Frickin logo all the time AND JUST NOW I LEARN IT SAYS TUAW! Pretty well hidden if you ask me....tricky tricky!!!
Reply
Mark Sieber said 1:03AM on 11-17-2007
I can get the icons provided to work as drawers in the stacks, by placing them in the first position in the file folder the stack represents. However, when I make one using either Preview or Photoshop, there is a white background that prevents the folders from showing through. In Photoshop, I did not flatten the image, but merged the layers.
If I paste the new icon into the Info icon area, it's a little better, as there's not a white background, but the drawer sits in front of the file folders, rather than having them inside.
It's a problem with the transparency--what am I missing, here? I haven't yet installed the developer tools to create an icon format--though the article says this should work anyway--but an icns from CocoaThumbs has the same white background problem.
Any help will be much appreciated!
Thanks,
Mark S.
Reply
Nate said 9:17AM on 2-04-2008
I too am having the white backgound issue. The article says it can be done in Preview - i've tried it there and in Photoshop with the same results. I'd prefer not to convert it to a .icns file if i don't have to as i'm crossing my fingers that these will be temporary fixes until 10.5.2 arrives… crossing my fingers, not holding my breath. Can anyone point me in the right direction? Much appreciated!
Anthony Schaefer said 4:35AM on 11-17-2007
@13 Create a new folder (or copy one of the icons from the "drawer pack" and do "get info", select the icon in the upper right and copy and paste your newly created .png file. It took me a couple of minutes to figure this out as well.
Reply
filip De Cavel said 4:58AM on 11-17-2007
@ all: Thanks but strangely enough I don't see the preview tools (like instant alpha) you all talking about. I do have leopard installed (belgium user). I even used the preview help and looked for the tools, no result....very frustrating.
Reply
Matteo Rattotti said 6:42AM on 11-17-2007
Once you have created the png file you can use img2icns -> http://www.shinyfrog.net/en/software/img2icns/
It will create the .icns, or directly a folder with the icon attached :D
Hope this helps a little
Reply
Jerry said 12:22PM on 11-17-2007
For some strange reason the new created folder in Cover Flow is invisible. And when I put in my Dock I can see it but when I add a file it despairs.
I have follow the steps and I'm not getting the final result!
Jerry
Reply
jfpolo said 9:02AM on 11-20-2007
pilip de Cavel, you need to keep pressing the mouse button until the tools appear.
Reply
BTGunner said 11:54PM on 11-17-2007
@indiekiduk
I had to do a little bit of a hack to get the icon to stay on top when sorting by Date Added. Here's what I did for my Downloads Stack:
Open /Applications/AppleScript/Script Editor.app
Paste this into a new script window:
--------------------------------
on adding folder items to this_folder after receiving added_items
tell application "Finder"
do shell script "mv /Users/userName/Downloads/Icon /Users/userName/Desktop/Icon"
do shell script "mv /Users/userName/Desktop/Icon /Users/userName/Downloads/Icon"
end tell
end adding folder items to
-------------------------------
Make sure to replace userName with the name of your home directory. Save this file in "/Library/Scripts/Folder Action Scripts/" as RefreshDownloadsIcon.scpt or something like that.
Then right-click on the Downloads folder in your home directory and select "Configure Folder Actions..." Check the Enable box if it's not already, and click the [+] button beneath the folders box. Select your downloads folder when the dialog pops up, then select it in the "Folders with Actions" list.
Now click the [+] beneath the Script pane and select "RefreshDownloadsIcon.scpt" or whatever you named it.
This will remove and re-add the Icon just like you were dragging and dropping it, but automatically every time you add something to the Downloads folder and you can now Sort by Date Added.
I just tested this with my Downloads and Applications folders and it works great, please leave a reply if I've made an error.
Good luck!
Reply