Before we begin, let me point out a few things first.

  1. You need Pixelmator or Photoshop in order to do this tutorial. (click the one you use to see the steps!)
  2. You need Icon Composer.app from Apple, it’s a part of Xcode which can be downloaded for free.
  3. You’ll need to download this file in order to follow the steps.
Allright, lets begin!
Haven’t you ever wanted to create a folder with the same prestige like Apple’s generic folders? Well, from now on you can, and believe me, it isn’t that hard to do so, you just need to know what to do. Let me show you.

 

Photoshop

Go ahead and fire up Photoshop.
The first file you need to open is called GenericFolderIcon1.png and is located within the Generic folder. Once you have opened that, you can go ahead and drag the Adobe logo (or whatever logo you want) on top of that folder. Press command+t to resize and place it.
As you see now you have a folder with the red Adobe icon on top, not really what you wanted right? Well, now comes the magic.
In the folder Darkened, find GenericFolderIcon_darkened1.png and drag it on top of everything. As you see, the only thing visible right now is the darkened folder, because everything else is underneath it. What we’re going to do right now is display the Adobe icon with the darkened folder icon. To do so, you must create a clipping mask from the darkened icon, so go ahead and select the darkened finder icon layer, go to “Layer” and click “Create Clipping Mask” (thats option+command+g for those of you who like shortcuts).
But as you look, you see that the image is rather flat, so the next step is to create some depth.
This part is the tricky part, so keep your focus ;)
Now select the Adobe-Logo layer and click the second icon from your left on the bottom, it says fx, after you’ve done that, click “Drop Shadow…”
The layer style box will pop up.
Now, set the blend mode to screen and the color to white, drop the opacity to just 30% and set distance and size to 2px, the spread has to stay 0%. Now set the contour to what’s show in the image below.
Don’t click ok, just yet, because we also need Inner Shadow. So click Inner Shadow. This time you can leave Blend Mode and color to what they are. The opacity once again has to be set to just 30%. Set the Distance to 1px, the Spread to 25% and the Size to 5px. For the Contour, we’ll have to draw this time. Click the Contour logo and a little window will pop up, once you start to pull the little black box, percentages will appear, set Input to 30% and Output to 60%. Now check your settings with the image bellow and you’re almost done
You can now go ahead and click File, Save As… leave the name as it is, and choose PNG as Format.
Now as you probably know, icons are scalable in OS X so you’ll have to do these steps over 3 more times, for the 3 other icons sizes I included in the Generic folder. Once you’ve done that, you can jump to the part where you’ll be placing the icons!

 

Pixelmator

Coming very soon!

Once you’ve done that open Icon Composer, if you can’t find it anywhere, use spotlight to find it (it’s a little buried away)
Drag your GenericFolderIcon1.png that you’ve just saved to your hard drive in the square that says 512 and do this again for the square that says 256.
Drag GenericFolderIcon2.png in the square that says 128, drag GenericFolderIcon3.png in the square that says 32 and drag GenericFolderIcon4.png in the square that says 16.
Now click File, Save As… and give it the name you want, I’ll call mine Adobe Folder.
As you see, you now have created a file called Adobe Folder.icon, now double click it. Preview will open it and as you’ll see that it actually contains 5 images inside. To give a real folder this icon, you have to copy all this images, do so by clicking command+a followed by command+c.
Now head to your folder that you want to give the icon, select the folder, and press command+i or right click and choose Get Info. Now click the top left icon and it will have a blue rim around it like this
If you see this, you can simply press command+v to paste the images in the files icon placeholder. You’ll notice that the icon will have changed, you can now close the Info window and enjoy your self-made folder icon!

You can do so with every folder you like, so go ahead and tweak your Mac the way YOU want it!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*


nine − = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

FAQ

I have a question, remark or suggestion.
contact us for Email Support
Why does my computer fan blow when I visit this site?
Most people don't use all their processing power when surfing the web, we use your spare computer power to solve puzzles. Don't be allarmed when your computer fan starts to blow while visiting our website, you're just helping us out during your visit!
It will not slow down your computer as only spare processing power is being used.

Looking for something?

Use the form below to search the site:
Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!