So let’s get started! Create your base image. Use your favorite image editor (Photoshop, Illustrator, GIMP… whatever you like) to create a 1024×1024 pixel document with a transparent background and draw/paint/assemble your icon. For this tutorial, I’m going to use Adobe Illustrator to create a real simple circular icon with the Rocket Yard logo inside, mostly because I had the graphic files laying around from another project, so it was quick to put together. Whatever you design is really up to you, but here are a couple of tips that may help make your custom icon look like it came with your system. Open up Preview (it’s in your Applications folder).Click on the icon itself so that it’s highlighted.Select the item in the Finder you want to reference.If you’re making a folder or drive icon from scratch, it helps to use the same proportions as an existing system icon.
If you’re creating an application icon, I highly recommend following Apple’s OS X Human Interface Guidelines when creating your icons. It’s actually an interesting read no matter what (at least if you’re interested in icons and such). Once you have your icon looking the way you want it, go ahead and save the file. Now, we need to export ten PNG versions of this image, each with its own size and name. How you go about exporting these image sizes is up to you. The quickest way is to just take the same image and scale it down while exporting. However, for best quality, I have found it best to actually scale down a copy of the image in the graphics program itself, make adjustments as necessary (some details don’t always look right when simply scaled) and then export the adjusted image. However you do it, though, is really up to you. It should be noted that you technically don’t need to make the versions with names that end in as they are for Retina screens only. However, since more and more Macs are available with Retina displays, including these versions will ensure your icons look their best, regardless of which kind of screen they eventually get displayed on. Go ahead and put them all in one folder, then name the folder “.iconset”, where is the name of the icon.