Photography and Book Reviews

Menu

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

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

Preview Inpector

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.

Export As…

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.

Open both the GenericFolderIcon.png and the MAMELogoTM.jpg files in Photoshop.

On the MAME logo in the Layers panel click the padlock icon to convert the background to a regular layer.

Using the Magic Wand tool with a Tolerance of 12, Anti-alias checked, and Contiguous unchecked click the black background of the logo.

Delete Background

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

Adjust Levels

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.

Pasted Logo

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

Tranform Logo

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.

In the Layer panel switch the mode to Overlay.

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.

Adjust Logo

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%.

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.

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)”.

Save this one as icon_512x512.png.

Finished Files

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.

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/”

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.

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

Drag-and-Drop

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

Updated Folder

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.