Press "Enter" to skip to content

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

Preview Inspector Dialog Box
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.

Right-click menu
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.

  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. Photoshop delete background image
    Delete Background
    Click the Delete key to remove that black background then Command D to cancel the selection.
  5. Photoshop adjust levels
    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.
  6. Photoshop pasted MAME logo
    Pasted Logo
    Then Select All (Command A), Copy (Command C), then switch to the GenericFolderIcon graphic and Paste (Command V).
  7. Photoshop resize MAME logo
    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.
  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. Photoshop add fx to the logo layer
    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%.
  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. Photoshop image size 512@2x
    Image Size 512@2x
    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. Photoshop image size 512
    Image Size 512
    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. Finished images for the icon
    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.

  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. Drag-and-drop the new icon set
    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.
  3. Folder with new icon set
    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.

One Comment

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.