Dragging the slider left or right will change the size of the preview. A preview of your icon will appear in a window with a slider at the bottom. Simply select the iconset folder in the Finder and hit the space bar on your keyboard to invoke QuickLook. Now is a good time to preview how your icon will look at various sizes. You’ll be asked if you’re sure you want to add the extension “.iconset” to the folder just tell it yes. Go ahead and put them all in one folder, then name the folder “.iconset”, where is the name of the icon. 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. 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 you do it, though, is really up to you.
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. The quickest way is to just take the same image and scale it down while exporting.
How you go about exporting these image sizes is up to you. Now, we need to export ten PNG versions of this image, each with its own size and name. Once you have your icon looking the way you want it, go ahead and save the file. It’s actually an interesting read no matter what (at least if you’re interested in icons and such). If you’re creating an application icon, I highly recommend following Apple’s OS X Human Interface Guidelines when creating your icons. This image will now have the same size and transparency as the original, and can now be loaded into its own layer in any graphics editing program that supports them (which should be most of them). Export the image as a PNG with an Alpha channel.Hit Command-N to create a new image with the contents of your clipboard (i.e., your reference icon).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. 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. 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. 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. So let’s get started! Create your base image.
Then you have all you need to make your own custom desktop icons.
In an interesting twist, when Apple made icons a little more complex with the addition of Retina icons in OS X 10.7, they actually made the process of creating the icons a lot easier all you need is a little skill with your favorite graphics program that can create images with transparent backgrounds (such as TIFFs or PNGs), and you can crank out custom icons for custom folders, internal and external drives, or even applications using built-in utilities and features of Lion and later. Some worked well, and others not-so-well. Later on, I wound up registering a Developer account with Apple so I could use the icon tools in Xcode (well… and for AppleScript Studio, but that’s a different story), and probably tried a half-dozen different freeware or shareware utilities over the years. Back then, I was stuck with 256 (or fewer) colors, a black/white alpha channel, and pretty much had to make them pixel by pixel in ResEdit (uphill… both ways… barefoot… in the snow…). I’ve been making my own Mac icons for folders, applications, and a myriad of other uses for well over 20 years now.
0 kommentar(er)
