Make an Icon for Mac Yosemite

How to make a new folder icon for your MAME games is pretty easy with a handful of steps. This is the process I followed; there are other ways to do it using other tools. I used Preview, Adobe Photoshop, and Xcode’s Icon Utility.

Step 1: Get the Icons

I like JohanChalibert’s OS X Yosemite Icon set that he has posted on Deviant Art, but you could search around a bit and find many different icon sets that would be a great place to start.

Download the icon set, unzip it, take a moment to read the readme file, and then find the folder icon you want to use as a starting point, I used GenericFolderIcon.icns. Right-click the Icns file and open it in Preview.

Step 2: Export the Base Icon

Now that you have the icon set open in preview you can see that it is made up of 10 different graphics. By opening the Inspector (Tools > Show Inspector or Command i) you can see the details for each graphic, like the first graphic is 1024 x 1024 pixels in size at 144 dpi.

Right-click the “1” graphic and choose Export As…, change the Format to PNG making sure the Alpha checkbox is checked. I kept the default name of GenericFolderIcon.png.

Step 3: Editing the Graphics

Now I download the super large version of the MAME logo from MAME Dev. This is what I want to put on the front of my folder icon.

1. Open both the GenericFolderIcon.png and the MAMELogoTM.jpg files in Photoshop.
2. On the MAME logo in the Layers panel click the padlock icon to convert the background to a regular layer.
3. Using the Magic Wand tool with a Tolerance of 12, Anti-alias checked, and Contiguous unchecked click the black background of the logo.

4. 

   Click the Delete key to remove that black background then Command D to cancel the selection.

5. 

   Open the Levels panel (Image > Adjustments > Levels… or Command L) and under Output Levels make both sides “0” which will make the entire logo solid black.

6. 

   Then Select All (Command A), Copy (Command C), then switch to the GenericFolderIcon graphic and Paste (Command V).

7. 

   Initially the MAME logo will be huge compared to the folder so you will need to transform it to fie. Transform (Command T) then while holding down the shift key to keep the ratio of the logo locked start resizing the logo until it looks good to you.
8. In the Layer panel switch the mode to Overlay.
9. Create an “fx” layer with an Inner Shadow, I like the settings Blend Mode: Mulitply, Opacity: 36%, Angle: 128, Distance: 9px, Choke: 0, Size: 21px. Play with it until you find something you like.

10. 

    For my tastes the MAME logo is still too strong, I want it to more closely match the Apple Applications folder Icon. So back in the Layers I turn the Opacity of the logo layer down to 38%.
11. Save that PSD file early and often so you have something to go back too if there are any problems or you want to make adjustments later.

Step 4: Saving the Graphics

For a complete Apple icon you need 10 images.

icon_16x16.png
[email protected]
icon_32x32.png
[email protected]
icon_128x128.png
[email protected]
icon_256x256.png
[email protected]
icon_512x512.png
[email protected]

The “2x” images are saved at 144 DPI while the others are saved at 72 DPI.

It can get a bit confusing at this point, but keep in mind that [email protected] is really 256×256 at a resolution of 144 DPI while icon_256x256.png is 256×256 at a resolution of 72 DPI.

1. I make a Duplicate (Image > Duplicate) of the image so that I wont accidentally overwrite my full-sized PSD file.

2. 

   In the Image Size panel (Image > Image Size… or Command Option I) adjust the resolution to 1024×1024 at 144 DPI.
3. Then Save for Web (File > Save for Web… or Command Option Shift S) with the settings of PNG-24 and Transparency Checked.
4. Click Save and in the Save Optimized As dialog box make a new folder naming it “MAMEFolderIcon.iconset”. The “.iconset” portion is important later.
5. Name this first file [email protected] and save it.

6. 

   Back to the Image Size panel adjust the size to 72 DPI Resolution and sized 512×512 (easier to make the changes in that order as adjusting the resolution will change the width and height). Resample should be set to “Automatic” or “Bicubic Sharper (reduction)”.
7. Save this one as icon_512x512.png.

8. 

   Now do that another 8 times adjusting the size and saving based on the file names above.

As the icon graphic gets smaller you could change it up to keep it distinguishable from other icons. Instead of using the full MAME logo you could use just an “M” or you could darken the logo, or anything else you can think of.

Step 5: Building the Icon Set

I am using the Icon Utilities tool that comes with Xcode. There are a lot of icon tools out there, the App Store is full of them, but I happen to have Xcode installed and decided this was the easiest way for me to create the finished icon set.

1. Open the Terminal app and change the directory to where you have the MAMEFolderIcon.iconset saved. For me that was “cd /Users/dnelson/Documents/Folder\ Icon\ Post/”
2. Then run the Icon Utilities app “iconutil -c icns MAMEFolderIcon.iconset”

And BANG! You have your very own MAMEFolderIcon.icns icon set.

Step 6: Put your New Icon Set to Use

Find the folder you want to give your new Icon Set to and get ready for the magic.

1. Select the folder, click on it once, than then Get Info (right-click and choose Get Info or Command I).

2. 

   Now drag-and-drop you new icon set on top of the folder icon at the top of the Get Info dialog box.

3. 

   And you are done!

It is a tedious process, but it is nice to have custom icons like this, especially for folders in the Doc. This process will also work for making icons for your game launching files.